You can see the project here.
The feeling of loneliness can sometimes feel inescapable. In many, it can become chronic and even lead to depression. In others, it can spur a need to take action and go out more. Why do we feel lonely? And what factors contribute to it? What can we discover about loneliness and its patterns? These are the questions that led us to explore the topic of loneliness for our project. For our project, we wanted to focus on the everyday impacts and factors that contribute to loneliness. We wanted to take a data-driven story approach to talk about the issue of loneliness and its factors and see correlations and interesting patterns for ourselves and others alike.
This a React app. You can run it 2 ways.
-
React Server
npm ithennpm startThis should open the app at http://localhost:3000/
-
Static Server
npm run buildcd buildnpx http-serverThis should open the app at http://127.0.0.1:8080/
-
Static Server - no NPM
We attached the build folder for those without npm installed. In this case you just need to run two commands.
cd build
npx http-server
This should open the app at http://127.0.0.1:8080/
cd preprocessing
jupyter notebook
go to localhost:8888
select on script.ipynb
select Cell > Run All
Arrows
Indicators
- https://codepen.io/Fernos/pen/vazgzj
- also check CitationREADME.md as it cites the use of chatgpt with exact prompts and output
Linear Gradient
- https://d3-graph-gallery.com/graph/line_color_gradient_svg.html
- https://gist.github.com/anbnyc/0121e8c412ebb173a4b9859c51c22ee2
Make dashed lines
Sort by object string property
Gradient texts
Dynamic tooltip text
Stacked Bar Chart
- Didn't use yet, but this looks useful: https://stackoverflow.com/questions/66840038/is-there-a-way-to-convert-a-d3-rollup-created-with-two-keys-to-a-flat-array-of-o
- https://observablehq.com/@ericd9799/learning-stacked-bar-chart-in-d3-js
- https://www.educative.io/answers/how-to-create-stacked-bar-chart-using-d3
- https://d3-graph-gallery.com/graph/barplot_stacked_percent.html
Understanding Keys for Stacked Bar
-
deleted "total" rows, as they were redundant and could be calculated using d3.rollups already (except for total of all loneliness levels) use custom svgs as points https://netwoven.com/custom-development/different-ways-adding-custom-svg-images-d3-line-charts-angular-4/
Adding Emojis to the Bar Chart
- https://stackoverflow.com/questions/53122344/add-image-at-top-of-each-d3-bar-rect
- https://www.fabiofranchino.com/blog/how-to-load-image-in-svg-with-d3js/
- https://copyprogramming.com/howto/adding-image-in-d3-js
Dot chart
Sankey chart
- https://d3-graph-gallery.com/sankey.html
- https://github.com/d3/d3-sankey
- https://observablehq.com/@d3/sankey-component
Typewriter Effect
Dataset #1 (StatCan) 9:22
- changed "-1" values in "amount" column to be 0, as to not skew results when summing
- got rid of all "total persons" data
- created a "categories" column that differentiates each datum by its "type", these are the categories:
- age: [ 15 to 24 years, 25 to 34 years, 35 to 44 years, 45 to 54 years, 55 to 64 years, 65+ years, and more overlapping categories ]
- gender (2): [ male, female]
- education (5): ["No certificate, diploma or degree", "Secondary (high) school diploma or equivalency certificate", "Apprenticeship or trades certificate or diploma", "College, "CEGEP or other non-university certificate or diploma", "Bachelor's degree or higher" ] took out other sections as they were redundant, or just didn't have sufficient data across the board
- urbanization (2): [ Rural areas, Urban areas ]
- immigration (2): [ Non-immigrants, Immigrants ] removed all other categories encapsulated already in immigrants
- work (3): [ Working at a paid job or business, Retired, Other activity]