d3 = require('d3')
{
const svg = d3.select(DOM.svg(size.width, size.height));
svg.append('g')
.attr('transform', `translate(0, ${size.height - margin.bottom})`)
.call(xAxis);
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis);
svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr('fill', d => fillScale(d.y))
.attr("r", 2.5);
return svg.node();
}
data = Array.from({length: dataLength}, () => ({x: Math.random(), y: Math.pow(Math.random(), 2)}))
chroma = require('d3-scale-chromatic')
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.
