Published
Edited
Sep 4, 2018
3 stars
chart = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)
g.append('defs').append('clipPath')
.attr('id', 'clip')
.append('rect')
.attr('width', width - margin.left - margin.right)
.attr('height', height - margin.top - margin.bottom)
g.append('g')
.attr('class', 'axis axis--x')
.attr('transform', `translate(0, ${y(0)})`)
.call(d3.axisBottom(x))
g.append('g')
.attr('class', 'axis axis--y')
.call(d3.axisLeft(y))
g.append('g')
.attr('clip-path', 'url(#clip)')
.append('path').datum(data)
.attr('fill', 'none')
.attr('stroke', 'black')
.attr('stroke-width', '1.5px')
.transition().duration(500).ease(d3.easeLinear)
.on('start', tick)
return svg.node()
}
data = {
return d3.range(40).map(random)
}
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.
