mahowa / covid-19-d3 Goto Github PK

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

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

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.

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 husky and run eslint & prettier pre commit

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

The map view needs to be responsive.

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:

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

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

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

Will need to change the confirmed property to cases

Right now you can filter by state, and change the data to use the cuumlative data. But theres a ton more we can do with this.

Examples are:

• 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

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

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)

Description

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

Steps to reproduce:

1. Raise a new pull request

Expected behaviour:

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

Screenshot:

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

using d3 we can easily add tooltips with more specific date to the charts

heres a good example: https://bl.ocks.org/d3noob/a22c42db65eb00d4e369

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

Show cumulative toggle next to states filter is not working.

This was working when checkbox was there instead of switch.

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

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

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)

https://jestjs.io/

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

When the screen resizes make the chart responsive

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

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

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

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

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

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

The more creative the better here.

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