Master's student, developer, designer. :)
Published
Edited
Aug 4, 2019
2 forks
3 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.append('path')
.datum(item.data)
.attr('fill', 'transparent')
.attr('stroke', item.color)
.attr('stroke-width', '2px')
.attr('d', line)
})
return svg.node()
}
dataset = [{ data:gd(), color: '#fa983a' }, { data: gd(), color: '#0077c0'}, { data: gd(), color: '#7e349d'}]
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 = 300
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.
