mahowa / covid-19-d3 Goto Github PK

View Code? Open in Web Editor NEW

13.0 3.0 43.0 27.82 MB

Created with CodeSandbox

Home Page: https://codesandbox.io/s/github/mahowa/Covid-19-d3

License: GNU General Public License v3.0

HTML 1.12% JavaScript 91.65% CSS 7.23%

hacktoberfest hacktoberfest2020 hacking d3 covid19 covid19-live-tracker covid19-data

covid-19-d3's Introduction

The most up to date code

D3 Charts using Covid-19 Live Data

D3 stands for Data-Driven Documents, which is used to create a static SVG chart. It helps to draw various types of charts:

Bar Chart
Circle Chart
Pie Chart
Donut Chart
Line Chart
Bubble Chart; and many more.This project mainly focuses on Line Charts.A line chart is a type of chart which displays information as a series of dataPoints connected by straight line segments. Each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis. Markers are automatically disabled when there are large number of dataPoints. You can override this behaviour by manually setting markerSize to a value greater than zero.

Steps on how to create a line graph are as follows:

1. The HTML part of the code just creates a div that will be modified by D3 later on.
2. The first part of the JavaScript code set an SVG area. It specifies the chart size and its margin.
3. For example the data herein, shows, the increase in number of Corona virus patients as the time increases.
4. Line is drawn using a path, and using the d3.line utility.

Now that the chart is made, let's know how to style it, and following are the points which should be kept in mind while doing so:

AXIS
COLORS
THEMES
RESPONSIVENESS
LEGEND

You can easily fork this project on CodeSandbox

This project is about D3 examples using real life data on real scenarios.

NY Times Live Dataset: https://github.com/nytimes/covid-19-data/tree/master/live

Brush over section of chart to select the time frame. Double click to reset the chart.

NOTE: Please update this picutre if you make changes to the ui/add anything to the page

HACKTOBERFEST

For any queries, switch to the FAQ section.
Sign up to the Hacktober Fest and enjoy the open source festival all month long.Sign Up

HACKTOBER FEST Issues:

1.  Update this Readme with information found in the codebase
    - Something like how to create a chart
    - How to custom style a chart
2.  Write a test
3.  Update styles
4.  Add some more data sets
5.  Create a chart
   - Heatmap of us
6.  Add tool tips
7.  Add more documentation or helpful information to the comments in the code

HINT: Look through the code. There are some notes on things that might help you get started Hacking.

Getting Started

Fork this project on CodeSandbox which is by far the easiest way to get started

Work on it locally

Run npm i && npm run start

Contributing

If you've ever wanted to contribute to open source, and a great cause, now is your chance!

I will make sure everyone gets credit as long as its not a spam request. Even if you do a task someone else does. Contribute!!

See these contributing how to docs for more information.

If you create a PR I'll add you as a Hacktoberfest Contributor to the Readme using a bot;

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Matt Howa} 💻	_{Irina Chernik} 💻	_{Nouval Kurnia Firdaus} 💻	_{Jivthesh M R} 💻	_Anamika810 💻	_{Lakshya Taragi} 💻	_{Henry Nguyen} 💻
_{Ashish Agrawal} 💻	_{Adnan Habbat} 💻	_{Subham Das} 💻	_{Simon Hoyos} 💻	_cardinalion 💻	_{Augusto Amaral} 💻	_{Raj Srinivas Jena} 💻
_Deepi1219 💻 🐛	_a2br 💻	_SandeepV 💻	_{Amit Chakraborti} 💻	_a2br 💻	_Emma 💻

PRs which are welcomed by us:

Ones which you are assigned to do.
Your PR has to link the issue.
Your solution must be correct.

This project follows the all-contributors specification. Contributions of any kind welcome!

Created with CodeSandbox Thank you!

covid-19-d3's People

Contributors

Stargazers

Watchers

Forkers

magdalenapaluch astnrgn nbrown0000 ravenblack24 jilimm irina-chernik christinej82 cerapier dilukshashamal swordfk github-byte pradeepnalluri bdmcewen novalkrnfds guptapranav4299 code4stef 3zk1m0 noboomta nitish750 nandakishor45 jivthesh sourav9124 anamika810 lakshyataragi simonhoyos hn4733 adncodez ashish979 cardinalion augusto-jm-amaral thachmai na1710 negiankit97 rajsrinivasjena prakshalj emma-r-slight deepi1219 amitchakraborti9 joquendo lenadgit jkalio52 godstyme warengonzaga

covid-19-d3's Issues

Add more data

Is there anywhere else we can get data from to make our visualizations more interesting?

For example: we have data talking about the mask use and positive case at universities. This could be combined with some lat and log coordinates to let us show what universities are hit the most using a heat map.

This is just one idea but feel free to expand it how you feel. If you are just dropping by and dont want to contribute but you have an idea, please leave it in the comments

The checkbox/toggle is not working

Right now its set to always on and is not changing the data. Ill fix this but if someone can get to it before me this would be a good pr for hacktoberfest

Format Text Data

The text data is hard to read lets make it look cleaner

EDIT: How about we shorten the text so that instead of 10123 its says 10.1K. Then if you hover over it a little title over the number can say the exact number. make the numbers easily digestible.

2500000 -> 2.5M

Add loading screen

When data is being loaded into the window it would be nice to have a loading screen.

The more creative the better here.

Addition of live demo link

Can I host this site on netlify and add the live demo to this project?

Add legend to chart

Examples here https://www.d3-graph-gallery.com/graph/custom_legend.html

Set the months label to abbreviated text

When you resize to smaller screen sizes the full names of the months overlap. I think the abbreviated forms will fit

Issue while raising pull request

Description

GitHub Workflows(greetings and test) are failing on new pull requests

Steps to reproduce:

Raise a new pull request

Expected behaviour:

Both the checks(greetings and test) should be run successfully

Screenshot:

'Show Cumulative' switch is not working

Show cumulative toggle next to states filter is not working.

This was working when checkbox was there instead of switch.

Add Text Data

It would be nice to see some sort of table showing you simple stats

Examples:

Total Cases
Total Deaths
Cases in the last week

Get creative here and make sure these stats are linked to the filters for the chart. We dont want the chart saying one thing and the text data saying something else

You dont have to style this but it sure would be nice

Add text data based on selection

Right now we have text data that gives a good overview of the entire selected data set.

Now it would be nice to add some based on the date selection (that is if there is one)

Update Readme

Add useful documentation to the readme.

Ive left a bunch of comments through the code you can easily look through to get some of this info.

Things like how to make your own chart would be helpful for people who wish to do so.

Animate data changes on the Line Chart

Do this using transition. here is some docs on how to do it http://duspviz.mit.edu/d3-workshop/transitions-animation/

Create a github pages branch

Right now the current setup will not work with github pages. To fix this create a separate branch that will work with github pages

Update some styles

For example, the checkbox and the dropdown have default styles. Lets get those updated with our current theme.

Also moving the styles in index.html to a dedicated styles.css file would be great.

If your inclined getting a good layout setup would make adding charts a breeze

Add world data

https://pomber.github.io/covid19/timeseries.json

Will need to change the confirmed property to cases

Chart Dimensions

We updated the chart height to be the size of the screen. This is great because now you can see the whole chart on any screen.

This sizing isn't great for data vis though so let make one more update.

Using a 2:3 height to width ratio. Lets limit the size of the chart.

Requirements:

Make sure the chart is always fully visible on the screen. Never let height or width go beyond the screen height or width.
Keep the chart ratio.

Improve Comments

Ive left a lot of comments throughout the code. If your new to d3 this could be a good way to get started.

walk through my LineChart/line-chart.js and try to find the documentation to the code ive written and commented.
Add some better information there or just a link to the doc.

I want to make this project as useful as an example of what you can do with d3 and also provide helpful information to get started

Add husky

Add husky and run eslint & prettier pre commit

Create a chart

You could add any chart you would like but if you want some help getting started here are some examples

Add a heatmap of the US (an example has been done [here]. (https://www.nytimes.com/interactive/2020/07/17/upshot/coronavirus-face-mask-map.html)) - Advanced
Add a bar chart (look at the data and decide how to use it) - Beginner
Look at all you can do with d3, look at the data we currently have, and use your imagination https://observablehq.com/@d3/gallery - Super Advanced

This will be an open issue but please comment on what chart you would like to add

Make project work outside code sandbox

Ive only run this in code sandbox so I didnt realize it didnt work outside it. if someone wants to fix this that would be huge to help others

Add jest to project and write a test

https://jestjs.io/

Comment here if you would like me to assign this to you

Fix bad data

Some of the data reported by the New York Times is incorrect.

The issue im seeing specifically is some states are reporting negative data (clearly incorrect)

lets set the min of all the data to 0

heres an example

Restrict the chart size

restrict the size of the chart to the size of the screen

Add a date range selector

Here is are some examples but let your imaginations go wild

https://codepen.io/cmessinides/pen/LvYPdp
http://square.github.io/crossfilter/. (this is more of what were looking for but either works)

Select the data you want to show (i.e. turn off the cases and only view deaths or vice versa)
Date picker (this is its own issue but an example none the less)
How about showing all the states in one chart

Make chart responsive

When the screen resizes make the chart responsive

Add Prettier

Add prettier to the project

Hint: Use lint-staged to to add the files to the commit after running
Hint: Use husky to run this command pre commit