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).
• [x] The chart and its associated pages have been minified using the npm run process-visual command.
• [x] 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]

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]

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 ?

We discussed some new chart ideas over slack but to answer the other questions

• no need to cite chatgpt if its just highchart syntax. If its a weird little used function, usually nice to link to highchart documentation so others can see what it does. If you are using it to write a js function or something that is more complex then i would link to where you got it from even if chatgpt.
• yes you are correct, the CSS will never change for highcharts. It just defines the size of the div for the chart as a static value.

[air-kyi]

Closing so it doesn't keep trying to make lint checks