Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
Published
Edited
Feb 13, 2020
md`# Charts`
{
const svgHTML = html `<svg height="300" width="500" style="border: 1px solid #ccc" />`
// Select our svg element just like before
const svg = d3.select(svgHTML)
// Now, select all rects that are contained by the svg
const rects = svg.selectAll('path')
// Define the data that we will bind to our rectangles
// each element in the array will become a new rect
const data = [ [[0, -100], [0, 100]], [[5, -50], [5, 50]], [[ 10, -25], [ 10, 25]], [[15, -150], [15, 150]]]
// const data = [100, 20, 30, 40 ]
const xScale = d3.scaleLinear().domain([0, 20]).rangeRound([0, 500])
const yScale = d3.scaleLinear().domain([-100, 100]).rangeRound([100, 200])
// x.domain([0, waveform.length]).rangeRound([0, 1024])
// y.domain([d3.min(minValue), d3.max(maxValue)]).rangeRound([offsetX, -offsetX])
// const line = d3.line()
// .x((d, i) => xScale(d))
// .y((d, i) => yScale(d))
const line = d3.line()
.x((d, i, arr) => {
console.log(d)
return xScale(d[0])
})
.y((d, i) => {
// console.log(yScale(d[1]))
return yScale(d[1])
})
rects
// The data join - the big moment!
// When we do this, we tell D3 to include
// 5 additional rects in our selection, one for each element in our data array
.data( data )
.enter()
// .append("g")
// Now we append the rects just like before.
// Unlike before, when we append, we're actually
// appending all 5 rects at once
.append('path')
// ...and when we set style and attributes, we're setting them
// for all 5 rects at once, too
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke", '#000')
.attr('d', d => line(d))
return svgHTML
}
d3 = require("d3@5")
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.
