EJ Fox & Ian Johnson
streaming data, code, acid, design
date = "20200301"
rPopScale = d3
.scaleSqrt()
.domain(popExtent)
.range([1.5, 15])
calendar = (element) => {
element.selectAll("*").remove();
element
.append("text")
.classed("calendar-date", true)
.text(realDate(date).format("MMM DD"))
.attr("dy", "-6")
.attr("font-size", "12px")
.attr("text-anchor", "start")
.attr("text-transform", "uppercase")
.attr("font-family", "monospace")
.attr("font-weight", "bold")
.attr("fill", "#fff");
element
.append("g")
// .attr("transform", `translate(240,70)`)
.selectAll("rect")
.data(monthDates)
.join("rect")
.attr("width", cellSize - 1)
.attr("height", cellSize - 1)
.attr("y", (d) => d3.utcSunday.count(d3.utcMonth(d), d) * cellSize + 0.5)
.attr("x", (d) => d.getUTCDay() * cellSize + 0.5)
.attr("fill", (d) => {
if (+d == +now) {
return "#fff";
}
return "#444";
});
}
// circles = {
// let localNodes = shapesWithData
// .map(d => {
// let p = projection(d.centroid.geometry.coordinates) || [0, 0];
// return {
// id: d.id,
// metric: d.metric,
// name: d.properties.name,
// state: d.state,
// r: rScale(d.metric), // || 2,
// population: d.population,
// p: rPopScale(d.population),
// cx: p[0],
// cy: p[1],
// x: p[0],
// y: p[1]
// };
// })
// .filter(d => !isNaN(d.r));
// // console.log(localNodes);
// let simulation = d3
// .forceSimulation(localNodes)
// .force(
// "collide",
// d3
// .forceCollide()
// // .radius(d => d.p) // for spacing by population
// .radius(d => d.p * 1.12) // for spacing by metric
// .strength(0.65)
// )
// .force(
// "x",
// d3.forceX(d => {
// return d.cx;
// })
// )
// .force(
// "y",
// d3.forceY(d => {
// return d.cy;
// })
// );
// simulation.tick(200);
// localNodes.sort((a, b) => a.metric - b.metric);
// return localNodes;
// }
// colorScale = d3.scaleSequential(
// // d3.extent(shapesWithData, d => d.metric),
// signalMap[signal].extent,
// // [0, 3000],
// d3.interpolateReds
// )
colorScale = d3.scaleQuantize(
signalMap[signal].extent,
// d3.schemeYlGnBu[8].reverse()
d3.schemeYlOrRd[6].reverse()
)
// colorScale = d3.scaleQuantize(extent, signalMap[signal].colorScheme)
signal
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.
