Published
Edited
May 31, 2020
d3.range(10)
d3.range(10).map(d=>d*2)
d3.range(10).map(d=>({x:d,y:d*2}))
Math.floor(Math.random() * 100)
Math.random()
Math.random() * 10000
Math.floor(Math.random() * 10000)
line1 = { yield d3.range(10).map(d=>({x:d,y:Math.random() * 10000})) }
line2 = { yield d3.range(10).map(d=>({x:d,y:Math.random() * 10000})) }
line3 = { yield d3.range(10).map(d=>({x:d,y:Math.random() * 10000})) }
line4 = { yield d3.range(10).map(d=>({x:d,y:Math.random() * 10000})) }
anArray = []
anArray.push(20)
anArray
aDifferentArray = [[0,[23]],[0,100],[10,100]]
aDifferentArray
collectLines = [line1,line2,line3,line4]
collectLines.map(d=>d.map(e=>e.x))
allXvalues = { yield d3.merge(collectLines.map(d=>d.map(e=>e.x))) }
collectLines.map(d=>d.map(e=>e.y))
d3.merge([[1,2,3],[4,5,6],[7,8,9]])
allYvalues = { yield d3.merge(collectLines.map(d=>d.map(e=>e.y))) }
{
const svg = d3.select(DOM.svg(width, height))
var color = d3.scaleLinear().range([0,1]).domain([0,collectLines.length]);
var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic
const margin = 35
const x = d3.scaleLinear().range([margin,width-margin]).domain(d3.extent(allXvalues))
const y = d3.scaleLinear().range([height-margin,margin]).domain(d3.extent(allYvalues))
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+ (margin) + ",0)")
.call(d3.axisLeft(y));
const line = d3.line()
.x(d=>x(d.x))
.y(d=>y(d.y))
.curve(d3.curveLinear)
svg.selectAll("path.line").data(collectLines).enter().append("path")
.attr("class", "line")
.attr("d", d=> line(d))
.style("stroke",(d,i)=>palette(color(i)))
.style("stroke-width","1px")
.style("fill","none")
/* const g = svg.selectAll("g.points").data(collectLines).enter().append("g")
.attr("class", "points")
.style("stroke",(d,i)=>palette(color(i)))
.style("stroke-width","1px")
.style("fill",(d,i)=>palette(color(i)))
g.selectAll("circle.points").data(d=>d).enter().append("circle")
.attr("cx",d=>x(d.x))
.attr("cy",d=>y(d.y))
.attr("r",5)
.append("title")
.text(d=>"x: "+d.x+" y: "+d.y)*/
yield svg.node();
}
d3 = require("d3@5", "d3-random@2")
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.
