News and graphics at @ClimateLab, a project of @PostGraphics.
function lineLegend(){
let color = (d, i) => d3.schemeSet2[i];
let entries = [];
let key = d => d.key;
function legend(sel){
const items = sel.selectAll(".item")
.data(entries)
.enter().append("div")
.attr("class", "item")
.style("display", "inline-block")
.style("margin-right", "8px");
items.append("div")
.attr("class", "swatch")
.style("background", color)
.style("display", "inline-block")
.style("height", "10px")
.style("margin-right", "4px")
.style("vertical-align", "middle")
.style("width", "10px");
items.append("div")
.attr("class", "key")
.style("display", "inline-block")
.style("font-family", "sans-serif")
.style("font-size", "14px")
.style("vertical-align", "middle")
.text(key);
return legend;
}
legend.color = function(fn){ return arguments.length ? (color = fn, legend) : color; };
legend.entries = function(arr){ return arguments.length ? (entries = arr, legend) : entries; };
legend.key = function(fn){ return arguments.length ? (key = fn, legend) : key; };
return legend;
}
function lineVoronoi(){
let data = d => d.data;
let key = d => d.key;
let x = d => d[0];
let y = d => d[1];
let size = [];
function voronoi(entries){
const flat = arr.flatten(entries, data);
const v = [...new d3.Delaunay(arr.flatten(flat.map(d => [x(d), y(d)]))).voronoi([0, 0, ...size]).cellPolygons()];
for (let i = 0, l = v.length; i < l; i++){
v[i].data = flat[i];
}
return v;
}
voronoi.data = function(fn) { return arguments.length ? (data = fn, voronoi) : data; };
voronoi.key = function(fn) { return arguments.length ? (key = fn, voronoi) : key; };
voronoi.size = function(arr) { return arguments.length ? (size = arr, voronoi) : size; };
voronoi.x = function(fn) { return arguments.length ? (x = fn, voronoi) : x; };
voronoi.y = function(fn) { return arguments.length ? (y = fn, voronoi) : y; };
return voronoi;
}
arr = require("arraygeous@0");
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.
