Published unlisted
Edited
Sep 4, 2020
bar_data = d3.range(7).map(d => 200*Math.random())
bar_svg = {
bar_data // place this cell on the dependency path
return d3.create('svg').attr('width', 800).attr('height', 300) // full canvas: 800 x 300
}
bar_g = bar_svg
.append('g')
.attr('transform', 'translate(50,50)')
bar_g
.append('rect')
.attr('width', 700)
.attr('height', 200)
.attr('fill', d3.hcl(0,0,95))
bar_dj = bar_g
.selectAll('g')
.data(bar_data)
drawjoin(bar_dj)
bar_rect = bar_dj
.enter()
.append('rect')
bar_rect
.attr('class', 'bar')
bar_rect
.attr('x', (d,i) => 70*i)
.attr('y', d => 200 - d)
.attr('height', d => d)
.attr('width', 60)
.attr('fill', d3.hcl(0,0,50))
bar_svg.node()
grouped_bar_data = d3.range(3).map((_,i) => {
return d3.range(4).map(d => 200*Math.random())
})
grouped_bar_svg = {
// place this cell on the dependency path
grouped_bar_data
return d3.create('svg').attr('width', 800).attr('height', 300)
}
grouped_bar_g = grouped_bar_svg
.append('g')
.attr('transform', 'translate(50,50)')
grouped_bar_g
.append('rect')
.attr('width', 700)
.attr('height', 200)
.attr('fill', d3.hcl(0,0,95))
grouped_bar_dj = grouped_bar_g
.selectAll('g')
.data(grouped_bar_data)
grouped_bar_plots = grouped_bar_dj
.enter()
.append('g')
grouped_bar_plots
.attr('transform', (d,i) => `translate(${200*i},0)`)
grouped_rect_dj = grouped_bar_plots
.selectAll('g')
.data(d => d)
drawjoin(grouped_rect_dj)
grouped_rects = grouped_rect_dj
.enter()
.append('rect')
grouped_rects
.attr('x', (d,i) => 40*i)
.attr('width', 35)
.attr('height', d => d)
.attr('y', d => 200-d)
.attr('fill', d3.hcl(0,0,50))
grouped_bar_svg.node()
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.
