Published
Edited
Oct 23, 2020
md`# Data Visualization Messes`
import { vl } from "@vega/vega-lite-api"
import { table } from "@tmcw/tables/2"
import { select } from "@jashkenas/inputs"
d3 = require("d3-dsv")
import { data as ProvinceData } from "@bulbil/part1-using-vega-lite-api"
ProvinceData
md` The columns of ProvinceData, which is from the [JHU CSSE COVID-19 Dataset](https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data), are as follows:
| FIPS (US) | Province_State | Country_Region | Lat and Long_ | Confirmed | Deaths | Recovered | Active | Incidence_Rate | Case-Fatality Ratio |
| ----- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |---- | ---- |
| Federal Information Processing Standards | province, state | country, region | MM/DD/YYYY HH:mm:ss | Dot locations on the dashboard | confirmed and probable counts of cases | confirmed and probable counts of deaths | estimated, may be skewed right | total cases - total recovered - total deaths | cases per 100K | (%) # recorded deaths/# cases |
<font size="1">All cases, deaths, and recoveries reported are based on the date of initial report. Exceptions to this are noted in the "Data Modification" and "Retrospective reporting of (probable) cases and deaths" subsections below.</font>
`
md` <h1>Nicer Table Formatting</h1> `
table(parsedData)
parsedData = d3.csvParse(ProvinceData)
vl.markBar()
.data(parsedData)
.encode(
vl.x().fieldN("FIPS"),
vl.y().fieldQ("Active"),
vl.color().fieldN("Province_State")
)
.render()
vl.markPoint()
.data(parsedData)
.encode(
vl.x().fieldN("FIPS"),
vl.y().fieldQ("Active"),
vl.color().fieldN("Province_State")
)
.render()
alphabet = d3.csvParse(await FileAttachment("alphabet.csv").text()) // about file attachments https://observablehq.com/@observablehq/file-attachments
// about viewof https://observablehq.com/@observablehq/a-brief-introduction-to-viewof
viewof simpleBar = vl.markBar() // Make a bar chart
.data(alphabet) // Using the alphabet data
.encode(
vl.x().fieldO("letter"), // .sort(vl.fieldQ("frequency").order("descending")), // Letters are ordinal on the x-axis
vl.y().fieldQ("frequency").axis({ format: "%" }) // Frequency on the y-axis, formatted as percent
//vl.color().fieldN("vowel").scale({ range: ["green", "gold", "lightgray", "darkgray", "red", "blue"] })
)
.render()
viewof horizontalBar = vl.markBar()
.data(alphabet)
.encode(
vl.y().fieldO("letter"),
vl.x().fieldQ("frequency").axis({ format: "%" })
)
vl.color().fieldN("
.render()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
