Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append('g')
.attr("transform", `translate(80, 30)`)
const cellSize = 45;
const cells = g.selectAll('rects')
.data(data).enter()
.append('rect')
.attr('width', cellSize - 1)
.attr('height', cellSize - 1)
.attr("transform", (d) => {
const [i, j] = position.get(d.statecode);
return `translate(${i * cellSize},${j * cellSize})`;
})
.attr('fill', (d) => getColor(type, d[type]) );
const texts = g.selectAll('texts')
.data(data).enter()
.append('text')
.attr("x", cellSize / 2)
.attr("y", cellSize / 2 + 5)
.attr("transform", (d) => {
const [i, j] = position.get(d.statecode);
return `translate(${i * cellSize},${j * cellSize})`;
})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 15)
.attr('fill', d => getTextColor(d[type]))
.text(d => d.statecode);
return svg.node();
}
data = d3.csvParse(await FileAttachment("stateData@2.csv").text(), d3.autoType)
function getColor(type, value) {
if(value == 0) { return '#f3f3f3' }
else {
if(type == 'bars') { return '#C6607A' }
if(type == 'mask') { return '#538B94' }
if(type == 'indoor_dining') { return '#64974B' }
}
}
function getTextColor(value) {
if(value == 0) { return '#999999' }
else { return '#ffffff' }
}
function grid() {
const positionById = new Map;
d3.csvParseRows(String.raw.apply(String, arguments).replace(/^\n|\n$/g, ""), (row, j) => {
row.forEach((id, i) => {
if (id = id.trim()) {
positionById.set(id, [i, j]);
}
});
});
return positionById;
}
gridWidth = d3.max(position, ([, [i]]) => i) + 1
gridHeight = d3.max(position, ([, [, j]]) => j) + 1
import {select} from "@jashkenas/inputs"
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.
