Data

Tools

Indexes

Applications

Experiments

Open Source Science

loneliness

Data visualization hall of fame project

https://github.com/ajo01/loneliness

Science Score: 18.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ○
    codemeta.json file
  • ○
    .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (9.6%) to scientific vocabulary

Keywords

d3js data-visualization webapp
Last synced: 6 months ago · JSON representation ·

Repository

Data visualization hall of fame project

Basic Info
Statistics
  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Topics
d3js data-visualization webapp
Created about 2 years ago · Last pushed about 2 years ago
Metadata Files
Readme Citation

README.md

Loneliness - A Story

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.

screenshot-2023-12-07-at-2 14 32-pm sankey dot screenshot-2023-12-07-at-2 17 31-pm

How to run

This a React app. You can run it 2 ways.

  1. React Server

npm i then npm start

This should open the app at http://localhost:3000/

  1. Static Server

npm run build

cd build

npx http-server

This should open the app at http://127.0.0.1:8080/

  1. 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/

How to run the preprocessing script

cd preprocessing

jupyter notebook

go to localhost:8888

select on script.ipynb

select Cell > Run All

✍️ Citations:

Arrows

  • https://codepen.io/JoshMac/pen/MaYEmJ
  • https://codepen.io/jmuspratt/pen/zYddQQ

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/linecolorgradient_svg.html
  • https://gist.github.com/anbnyc/0121e8c412ebb173a4b9859c51c22ee2

Make dashed lines

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

Sort by object string property

  • https://stackoverflow.com/questions/45924821/javascript-sorting-array-of-objects-by-string-property

Gradient texts

  • https://cssgradient.io/blog/css-gradient-text/

Dynamic tooltip text

  • https://www.students.cs.ubc.ca/~cs-436v/20Jan/fame/projects/20jan/fb-politics/index.html

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/barplotstackedpercent.html

Understanding Keys for Stacked Bar

  • https://www.geeksforgeeks.org/d3-js-d3-keys-function/

  • 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

  • https://observablehq.com/@datavizcowboy/stacked-dots

Sankey chart

  • https://d3-graph-gallery.com/sankey.html
  • https://github.com/d3/d3-sankey
  • https://observablehq.com/@d3/sankey-component

Typewriter Effect

  • https://www.npmjs.com/package/typewriter-effect

📊 Data Pre-processing:

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]

Owner

  • Name: Amy Jo
  • Login: ajo01
  • Kind: user
  • Location: Vancouver, Canada

Accessible web tools, data vis, and interaction design

Citation (CitationREADME.md) 

# ChatGPT use

input: js programmatically create array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
output:

```js
Array.from({ length: 11 }, () => 0);
```

input:
Given this code, ensure only one chart exists and this it renders only once

```js
import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import { Scatterplot } from "../classes/scatterplot";
import styles from "./ScatterPlotPage.module.css";

const ScatterPlotPage = () => {
  const svg = useRef(null);
  const [chart, setChart] = useState(null);
  useEffect(() => {
    d3.csv("data/experiment_data.csv")
      .then((data) => {
        const convertToInt = (data) => {
          return data.map(({ trial, accuracy }) => {
            return { trial: parseInt(trial), accuracy: parseFloat(accuracy) };
          });
        };

        const preparedData = convertToInt(data);
        if (svg.current) {
          const chart = new Scatterplot(svg.current, preparedData);
          setChart(chart);
          chart.updateVis();
        }
      })
      .catch((error) => console.error(error));
  }, []);
  return (
    <div className={styles.scatterplotPage}>
      <div id="vis" ref={svg} />
    </div>
  );
};

export default ScatterPlotPage;
```

output:

```js
import React, { useEffect, useRef, useState } from "react";
import * as d3 from "d3";
import { Scatterplot } from "../classes/scatterplot";
import styles from "./ScatterPlotPage.module.css";

const ScatterPlotPage = () => {
  const svg = useRef(null);
  const [chart, setChart] = useState(null);

  useEffect(() => {
    d3.csv("data/experiment_data.csv")
      .then((data) => {
        const convertToInt = (data) => {
          return data.map(({ trial, accuracy }) => {
            return { trial: parseInt(trial), accuracy: parseFloat(accuracy) };
          });
        };

        const preparedData = convertToInt(data);
        if (!chart && svg.current) {
          const newChart = new Scatterplot(svg.current, preparedData);
          setChart(newChart);
        } else if (chart) {
          chart.updateVis();
        }
      })
      .catch((error) => console.error(error));
  }, []); // Empty dependency array, so it runs only on component mount

  return (
    <div className={styles.scatterplotPage}>
      <div id="vis" ref={svg} />
    </div>
  );
};

export default ScatterPlotPage;
```

GitHub Events

Total
Last Year

Dependencies

package-lock.json npm
  • 1329 dependencies
package.json npm
  • @types/d3 ^7.4.3 development
  • @types/d3-sankey ^0.12.4 development
  • @testing-library/jest-dom ^5.17.0
  • @testing-library/react ^13.4.0
  • @testing-library/user-event ^13.5.0
  • d3 ^7.8.5
  • d3-sankey ^0.12.3
  • react ^18.2.0
  • react-dom ^18.2.0
  • react-hotkeys ^2.0.0
  • react-responsive-carousel ^3.2.23
  • react-scripts 5.0.1
  • typewriter-effect ^2.21.0
  • web-vitals ^2.1.4