Create first-draft graphics for Common Data Set story

[air-kyi]

What does this PR do?

Create percentage-stacked, grouped bar charts to show gender distribution in students applying to UChicago over time via the Common Data Set. Uses Northwestern as an initial comparison.

How was the functionality tested and verified?

All steps should be completed in the order presented, and you should not move on to the next step until the previous is completed.

• [x] The title of the html page is the same as the chart.
• [x] The meta_data.json file is filled in correctly (the description is a complete sentence, the title is the same as the visual).
• [ ] The chart and its associated pages have been minified using the npm run process-visual command.
• [ ] The visual is styled similar to other charts (centered title/subtitle, no legends unless absolutely necessary, etc.)
• [ ] This visual was approved by the lead developer.
• [ ] The visual was approved by the story's stakeholders.

[air-kyi]

When trying to minify, it seems I am missing some file?

PS C:\Users\kyi> npm run process-visual --year=2024 --story=common-data-set
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\kyi\package.json
npm ERR! errno -4058
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\kyi\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\kyi\AppData\Local\npm-cache\_logs\2024-08-20T00_10_53_607Z-debug-0.log
PS C:\Users\kyi>

Different error encountered when using git bash but that's probably a syntax issue

[air-kyi]

Hi can someone provide feedback on initial graphics draft? Anything is appreciated but specific questions I have:

• Is it easier to follow if we switch out the year and status groupings?
• Is this more readable vertical or horizontal?
• Should we split this out into multiple graphs comparing pairs of variables at a time? I like being able to compare multiple but may be hard to read
• Should I cite ChatGPT lol. It helped me with syntax especially for the tricky stack label part but design was me. What is our policy
• The CSS file seems irrelevant to me, when do we ever use CSS files? Unless very specific custom graphs ?

Outstanding notes (will continue once feedback/help received for this round):

• I want to implement the data module for .csv importation
• Fix tooltips to show stack and group
• Add the third school
• Edit this folder name to reflect it is gender specific as I will do separate one for race
• I want to do T-test or something to find significance - but we don't have SD so likely not possible

Notes on choosing this chart type:

• I have no idea how to fit this many variables in one graph otherwise
• Pie/donut was considered but hard to read
• Sankey was considered but can't do multiple years in 1 chart I think ?
• Line was considered but too many variables ?

[asteinhart]

When trying to minify, it seems I am missing some file?

PS C:\Users\kyi> npm run process-visual --year=2024 --story=common-data-set
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\kyi\package.json
npm ERR! errno -4058
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\kyi\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\kyi\AppData\Local\npm-cache\_logs\2024-08-20T00_10_53_607Z-debug-0.log
PS C:\Users\kyi>

Different error encountered when using git bash but that's probably a syntax issue

I think you need to cd into the data-visualization folder to run this. it looks like you are in C:\Users\kyi> and not the data-visualization folder! But FWIW we can fix this later

[air-kyi]

ope rookie mistake. after cding i do get the same error as in git bash but ya you're right we can call abt this sometime later. maybe windows vs mac thing

PS C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations> npm run process-visual --year=2024 --story=common-data-set

> chicagomaroon.github.io@1.0.0 process-visual
> npx htmlprocessor ./$npm_config_year/$npm_config_story/index.html -o ./$npm_config_year/$npm_config_story/index.proc.html && npx minify ./$npm_config_year/$npm_config_story/index.proc.html > ./$npm_config_year/$npm_config_story/$npm_config_story.min.html && rm ./$npm_config_year/$npm_config_story/index.proc.html

node:internal/fs/sync:25
  return binding.readFileUtf8(path, stringToFlags(flag));
                 ^

Error: ENOENT: no such file or directory, open 'C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\$npm_config_year\$npm_config_story\index.html'
    at Object.readFileUtf8 (node:internal/fs/sync:25:18)
    at Object.readFileSync (node:fs:441:19)
    at Object.read (C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\node_modules\htmlprocessor\lib\utils.js:24:13)
    at HTMLProcessor.process (C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\node_modules\htmlprocessor\lib\htmlprocessor.js:107:36)
    at C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\node_modules\htmlprocessor\index.js:45:24
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\node_modules\htmlprocessor\index.js:44:13)
    at Object.<anonymous> (C:\Users\kyi\OneDrive - AIR\Documents\GitHub\data-visualizations\node_modules\htmlprocessor\bin\htmlprocessor:93:1)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\kyi\\OneDrive - AIR\\Documents\\GitHub\\data-visualizations\\$npm_config_year\\$npm_config_story\\index.html'
}

Node.js v20.9.0