Covid data scatter plot format

New To Observable
1

Noob here to D3. Covid Data Source Scatter Plot / C369 / Observable
I uploaded CovidData.csv
put into an array and plotted on a scatter plot.

A few requirements:
Draw a scatter plot with x-axis is Cases, y-axis is Deaths.
Draw x-axis, y-axis, and ticks on the plot
Draw all dots in ‘circle’ use color to represent data by
date

Issues:
Well my points are on the chart but it looks awful. I need help changing the size of the chart.
x and y axis seem to be correct. IDK what “ticks” on the plot is referring to.
How can I draw dots in “‘circle’ use color to represent data by
date”

1 Like
2

Hello and welcome to the platform! Have you seen the Plot Cheatsheets? They provide some good interactive examples of how to use Plot. You should be able to find some of your answers there. Take a look and let us know if you have any questions.

3

Thanks for this info. It is informative, but I am still struggling.

4

It looks like you’ve taken care of the following:

  • Draw a scatter plot with x-axis is Cases, y-axis is Deaths
  • Draw x-axis, y-axis, and ticks on the plot

The ticks are the axis marks indicating some value. I’ll take a look at the colors requirement and follow up.

FYI, this is another good resource for documentation.

1 Like
5

There are a few issues going on here. To address your specific questions first:

  • You can adjust the color using the fill channel, as you attempted. The problem with fill: Date is that Date doesn’t refer to the data, rather it’s a built in constructor. Thus, it’s the same for each data point, which is why you get the same color. To change the color, you want fill: "Date".
  • I’m not sure what you mean by your Ticks question, as you don’t refer to ticks at any point in your code.
  • You can change the size of the chart using the width and height channels, e.g.:
Plot.plot({
  width: width, // The built in width macro
  height: 500,
  ...
})

I’m not so sure that the plot looks awful; that kinda depends on what you want to illustrate. You might reduce the size of your points and/or add a little opacity. If you want to illustrate how deaths and cases are related, though, then I think a scatter plot like this is perfectly appropriate.

If you want to focus on something else, then you might need another time of plot. I don’t think that coloring by date is likely to be revealing, since you’ve got 4 colors assigned to over 13,000 different points that are all mixed together. You might try faceting like so:

That notebook also include the option to zoom in on the plots

6

I think that a good option (after fixing the “Date” reference as described above) would be to add a legend. You can do that like this:

Plot.plot({
  color: {
    legend: true
  },
  marks: [
    Plot.dot(coviddata, {x: "cases", y: "deaths", fill: "Date"}),
  ]
})

And I agree that it doesn’t look awful. It’s just a work in progress. You’ll get it where you want it soon.

1 Like
7

*celebrating
I just added a legend and saw your suggestion. I am noob JS too.