data = {
const csv = d3.csvParse(await FileAttachment("llb_all_cities_with_coordniate.csv").text(), d3.autoType)
const statesMap = new Map() // help look up the series for each state
const datesSet = new Set() // store all the dates
const series = [];
const orderedStates = [];
csv.forEach(({city, llbalance, date}) => {
var nDate = String(date)
const parseTime = d3.timeParse("%Y%m%d");
nDate = parseTime(nDate)
datesSet.add(nDate)
if (!statesMap.has(city)) {
orderedStates.push(city)
statesMap.set(city, series.length)
series.push({state:city, values: []})
}
series[statesMap.get(city)].values.push({date:nDate, cases:Number(llbalance)})
})
return {
series,
dates: Array.from(datesSet),
states: ['All', ...Array.from(statesMap.keys()).sort()],
statesMap,
orderedStates,
}
}
data2 = {
const csv = await d3.csv(
'https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv', d3.autoType)
const statesMap = new Map() // help look up the series for each state
const datesSet = new Set() // store all the dates
const series = []; // a collection of all the series [{state, values: [{date, cases} ...]} ...]
csv.forEach(({date, state, cases}) => {
datesSet.add(date)
if (!statesMap.has(state)) {
statesMap.set(state, series.length)
series.push({state, values: []})
}
series[statesMap.get(state)].values.push({date, cases})
})
return {
series,
dates: Array.from(datesSet),
states: ['All', ...Array.from(statesMap.keys()).sort()],
statesMap,
}
}
xScale = d3.scaleUtc()
.domain(d3.extent(data.dates)).nice()
.range([margin.left, width - margin.right])
yScale = {
const scale = d3.scaleLinear().range([height - margin.bottom, margin.top])
if (selectedState === 'All') {
scale.domain([0, d3.max(data.series, (s) => d3.max(s.values, (d) => d.cases))]).nice()
} else {
const slice = data.series[data.statesMap.get(selectedState)]
scale.domain([0, d3.max(slice.values, (d) => d.cases)]).nice()
}
return scale
}
color = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf","gold", "blue", "green", "yellow", "black"]
bisect = {
const bisect = d3.bisector(d => d.date).left;
return mx => {
const date = xScale.invert(mx);
const index = bisect(data, date, 1);
const a = data[index - 1];
const b = data[index];
return date - a.date > b.date - date ? b : a;
};
}
callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
function swatches({
color,
columns = null,
format = x => x,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
}) {
const id = DOM.uid().id;
if (columns !== null) return html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 10px sans-serif;">
<style>
.${id}-item {
break-inside: avoid;
display: flex;
align-items: center;
padding-bottom: 1px;
}
.${id}-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}
.${id}-swatch {
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin: 0 0.5em 0 0;
}
</style>
<div style="width: 100%; columns: ${columns};">${color.domain().map(value => {
const label = format(value);
return html`<div class="${id}-item">
<div class="${id}-swatch" style="background:${color(value)};"></div>
<div class="${id}-label" title="${label.replace(/["&]/g, entity)}">${document.createTextNode(label)}</div>
</div>`;
})}
</div>
</div>`;
return html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id} {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
.${id}::before {
content: "";
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin-right: 0.5em;
background: var(--color);
}
</style>
<div>${color.domain().map(value => html`<span class="${id}" style="--color: ${color(value)}">${document.createTextNode(format(value))}</span>`)}</div>`;
}
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.
