Playing with COVID-19 data: D3.js Bar Charts

Last week, we gathered COVID-19 statistical data.  This week, we are going to try to build some charts using D3.js.  D3.js is a javascript library that allows you to generate some fairly fancy charts and graphs but we are going to start with some basic bar charts.  Let’s take a look at a simple example.

See the Pen
D3.js – Bar Chart – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, D3.js lets you feed it an array of data and it builds the chart based upon it.  So, what if we take our dataset from last week and try to feed it in?

See the Pen
Playing with COVID-19 data – Part 5
by Joe Steinbring (@steinbring)
on CodePen.

The problem seems to be that the number of data points and the maximum values in out dataset make the graph pretty unreadable.  So, what if we flip our graph 90 degrees?

See the Pen
D3.js – Bar Chart – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, the first data point is on the first line, the second one is on the second line, etc.  That should hopefully at least fix the issue with the chart wrapping onto the next line, right?

See the Pen
Playing with COVID-19 data – Part 6
by Joe Steinbring (@steinbring)
on CodePen.

As you can see, it still leaves it pretty darn unreadable.  Well, let’s try limiting the data to just a 30 day period?

See the Pen
Playing with COVID-19 data – Part 7
by Joe Steinbring (@steinbring)
on CodePen.

This is a little bit better. It at least leaves us with a semi-readable chart.  Next week, we are going to take a look at how we could use the same data to create a line chart.

Until then, if you have any questions, comments, etc, feel free to leave a comment, below.

 

[ Cover photo by visuals on Unsplash ]

Leave a Reply

Your email address will not be published. Required fields are marked *