Master's student, developer, designer. :)
Published
Edited
Aug 6, 2019
7 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))
svg.selectAll()
.data(data)
.enter()
.append('rect')
.attr('x', (d) => x_scale(d.t) + margin.left)
.attr('y', (d) => y_scale(d.n))
.attr('width', x_scale.bandwidth())
.attr('height', (d) => 50)
.attr('fill', (d) => color_scale(d.value))
return svg.node()
}
color_scale = d3.scaleLinear()
.domain([0, 100])
.range(['#fff', '#A3320B'])
data = buildData()
buildData = () => {
let array = []
d3.range(10).map((d) => {
const o = types.map((t) => ({
t: t,
n: d,
value: Math.random() * 100
}))
array = [...array,...o]
})
return array
}
y_scale = d3.scaleBand().domain(d3.range(10)).range([height, 0])
x_scale = d3.scaleBand()
.domain(types)
.range([0, width])
types = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
margin = ({ top: 50, left: 40, right: 40, bottom: 50 })
height = 500
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.
