Master's student, developer, designer. :)
Published
Edited
Aug 5, 2019
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))
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '-.55em')
.attr('transform', 'rotate(-90)' );
g.append('g')
.attr('class', 'y axis')
.call(d3.axisLeft(y_scale))
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Value ($)');
g.selectAll('bar')
.data(data)
.enter().append('rect')
.style('fill',(d) => d.value > 1.6 ? '#7E349D' :'#BE90D4')
.attr('x',(d) => x_scale(d.date) + 10)
.attr('width', 16)
.attr('y', (d, i) => height)
.attr('height', 0)
.transition()
.duration(50)
.delay((d, i) => i * 5)
.attr('y',(d) => y_scale(d.value))
.attr('height',(d) => height - y_scale(d.value))
return svg.node()
}
y_scale.domain([0, d3.max(data, (d) => d.value)])
x_scale.domain(data.map((d) => d.date))
data = d3.csv('https://gist.githubusercontent.com/marialuisacp/c8f50cd27d34f6a34c05ab59eb3ec7e5/raw/ced5dc9bda6f9c612bca7b0a881150167f8dc655/total-business-inventories-to-sales-ratio.csv', (d) => {
d.date = parseDate(new Date(d.date))
d.value = +d.value
return d;
})
y_scale = d3.scaleLinear().range([height, 0])
x_scale = d3.scaleBand().range([0, width - margin.left - margin.right])
parseDate = d3.timeFormat("%Y")
height = 500 - margin.top - margin.bottom
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.
