Master's student, developer, designer. :)
Published
Edited
Aug 5, 2019
2 stars
chart = {
const svg = d3.select(DOM.svg(width, height))
const g = svg.attr('width', width + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',0)')
g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x_scale))
g.append('g')
.call(d3.axisLeft(y_scale))
dataset.map((item) => {
svg.selectAll('.dot')
.data(item.data)
.enter().append('circle')
.attr('r', 5)
.attr('fill', item.color)
.attr('cx', (d, i) => (x_scale(i) + margin.left))
.attr('cy', (d) => y_scale(d.y))
})
return svg.node()
}
dataset = [{ data:gd(), color: '#CA2C68' }, { data: gd(), color: '#0067B0'}, { data: gd(), color: '#3C4A59'}]
gd = () => d3.range(7).map((d) => ({ y: d3.randomUniform()()}))
line = d3.line()
.x((d, i) => (x_scale(i) + margin.left))
.y((d) => y_scale(d.y))
y_scale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0])
x_scale = d3.scaleLinear()
.domain([0, 6])
.range([0, width - margin.left - margin.right])
height = 350
margin = ({ top: 50, right: 50, bottom: 50, left: 50})
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.
