Published
Edited
Jun 9, 2020
md`# Day 10 - treemap`
d3 = require('d3@5')
data = {
const d = d3.csvParse(await FileAttachment("Electricity generation by source-1.csv").text())
const children = d.map(country => ({
name: country.Country,
children: Object.entries(country).map(c => {
if(c[0] == '' || c[0] == 'Country' || c[0] == 'Year') return
else return {
name: c[0],
value: c[1]
}
}).filter(d => d)
}))
return {
children
}
}
width = 500
height = 700
margin = ({
top: 10,
right: 10,
bottom: 10,
left: 10
})
colorScale = d3.scaleOrdinal( d3.schemeSet2 )
hierarchy = {
const dataCopy = JSON.parse( JSON.stringify( data ) )
return d3.hierarchy( dataCopy )
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
}
treemap = d3.treemap()
.size([ width, height ])
.padding(2)
.paddingTop(10)
.round(true)
root = treemap(hierarchy)
chart = {
const svg = d3.create('svg')
.style('font-family', 'sans-serif')
.attr('width', width)
.attr('height', height)
const g = svg.append('g')
.attr('class', 'treemap-container')
g.selectAll('text.country')
.data( root.children)
.join('text')
.attr('class', 'country')
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('dy', '0.6em')
.attr('dx', 3)
.style('font-size', 12)
.text( d => d.data.name )
const leaf = g.selectAll('g.leaf')
.data(root.leaves())
.join('g')
.attr('class', 'leaf')
.attr('transform', d => `translate(${ d.x0 },${ d.y0 })`)
.style('font-size', 10)
// leaf.append('title')
// .text(d => `${ d.parent.data.name }-${ d.data.name }\n${ d.value.toLocaleString() + ' GWh' }`)
leaf.append('rect')
.attr('fill', d => colorScale(d.parent.data.name))
.attr('opacity', 0.7)
// the width is the right edge position - the left edge position
.attr('width', d => d.x1 - d.x0)
// same for height, but bottom - top
.attr('height', d => d.y1 - d.y0)
// make corners rounded
.attr('rx', 3)
.attr('ry', 3)
leaf.each((d, i, arr) => {
// The current leaf element
const current = arr[i]
const left = d.x0,
right = d.x1,
// calculate its width from the data
width = right - left,
top = d.y0,
bottom = d.y1,
// calculate its height from the data
height = d.y1 - d.y0
// too small to show text
const tooSmall = width < 34 || height < 25
// and append the text (you saw something similar with the pie chart (day 6)
const text = d3.select( current ).append('text')
// If it's too small, don't show the text
.attr('opacity', tooSmall ? 0 : 0.9)
.selectAll('tspan')
.data(d => [ d.data.name, d.value.toLocaleString() ])
.join('tspan')
.attr('x', 3)
.attr('y', (d,i) => i ? '2.5em' : '1.15em')
.text(d => d)
})
return svg.node()
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.