nc.features.map(f=>f.properties.county)
import {rasterize} from "@mbostock/saving-svg"
DOM.download(() => rasterize(map), undefined, "Save as PNG")
createLegendCells = (colorScale, scaleTitle = "Legend") => {
let colorRange = colorScale.range().map(function(d,i, array){
let currentRange = colorScale.invertExtent(d).map(d3.format('.2d'));
let currentRangeText = `${currentRange[0]}% to ${currentRange[1]}%`;
i == 0 ? currentRangeText = `less than ${currentRange[1]}%` :
i == array.length - 1 ?
currentRangeText = `greater than ${currentRange[0]}%` :
currentRangeText = currentRangeText;
return {color: d, range: currentRangeText};
});
let fontColor = "#4b4b4b";
return svg`<g class = cells><text x=0 y=-15 fill=${fontColor}>${scaleTitle}</text>${colorRange.map((d, i)=>`<g id="legend-${i}" class="cell" transform="translate(0,${22 + i * 22})"><rect class="swatch" height="20" width="20" transform="translate(2,0)" fill=${d.color} style=" stroke-width: 1; "></rect><text id="legend-text-${i}" class="legend-label" fill=${fontColor} transform="translate(25, 12.5)">${d.range}</text></g>`)}</g>`;
}
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.
