here to learn
MathJaxPolygon inputMultiple SankeysDrag to re-arrange (vertical edition)Dijkstra's algorithm (huge version)Hexagonal World (coloring by country)DLA + CA rules!Fullscreen CanvasD3 ScatterplotD3 Log-Scaled HistogramDijkstra's algorithm (d3-delaunay version)TOCNotebook Visualizer (Firefox-compatible)Lazy DownloadDOM.download(callback) feature request [solved]Version Pinning for Notebooks
d3 quadtrees with more data
{
const height = 500
const data = d3.range(n).map(
()=>({x:Math.random() * width, y:Math.random() * height, r:Math.random()*20,
col:Math.floor(Math.random()*10)}));
const tree = d3.quadtree()
.extent([[0, 0], [width, height]])
.x(d=> d.x)
.y(d=>d.y)
.addAll(data)
const svgDOM = DOM.svg(width, height)
const svg = d3.select(svgDOM)
const color = d3.scaleOrdinal(d3.schemeCategory10);
svg.selectAll('node')
.data(data)
.enter()
.append('circle')
.attr('r', d => d.r)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('fill', d=> color(d.col))
svg.selectAll('rectangle')
.data(nodes())
.enter()
.append('rect')
.attr('width', d => d[0].x1 - d[0].x0-4)
.attr('height', d => d[0].y1 - d[0].y0-4)
.attr('x', d => d[0].x0+2)
.attr('y', d => d[0].y0+2)
.attr('fill', 'none')
// .style('fill-opacity',0.5)
.attr('stroke', d=> {
//console.log(d[1]);
return d[1] ? color(d[1].col) : '#ddd'})
function nodes () {
const nodes = []
tree.visit(function(node, x0, y0, x1, y1) {
node.x0 = x0
node.x1 = x1
node.y0 = y0
node.y1 = y1
nodes.push([node,node.data])
})
return nodes
}
return svgDOM;
}
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.
