Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
// Load the data with `d3.csv()`
raw_data = d3.csv(
"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv"
)
import { chart as aarons_chart } from "@aboutaaron/small-multiple-chart-cartogram"
// Import his chart, but specify *our* data to use
import { chart } with {
formatted_data as data
} from "@aboutaaron/small-multiple-chart-cartogram"
// Store a list of dates for our x scale
dates = {
// (need to find the min / max in the data)
const all_dates = [];
formatted_data.forEach(d => {
d.data.forEach(dd => {
if (all_dates.indexOf(dd.key) == -1) all_dates.push(dd.key);
});
});
return all_dates.sort((a, b) => new Date(a) - new Date(b)); // sort!
}
// Get the maximum value (for the Y scale)
max_value = d3.max(formatted_data, d => d3.max(d.data.map(dd => +dd.value)))
// Define our own x scale
my_x = d3
.scaleBand()
.domain(dates)
.range([0, state_size])
// Define our own y scale
my_y = d3
.scaleLinear()
.domain([0, max_value])
.range([0, state_size + 100])
// Importing my own version of the chart, with the data, labels, and scales specified
import { chart as forked_chart, state_size } with {
formatted_data as cartogram_data,
my_title as title,
my_first_x_label as first_x_label,
my_total_label as total_label,
my_y_height_label as y_height_label,
my_x as x,
my_format as format,
my_y as y
} from "@mkfreeman/small-multiple-chart-cartogram/2"
// Also setting the formatter
my_format = d3.format(",")
my_first_x_label = "Date of first case"
my_y_height_label = "New cases each day"
my_total_label = "Total cases"
with_text_labels = await FileAttachment("with_text_labels.png").url()
parseDate = d3.timeFormat("%b. %d")
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.
