Published
Edited
Apr 26, 2020
2 forks
10 stars
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.category')
.data( root.children )
.join('text')
.attr('class', 'category')
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('dy', '0.6em')
.attr('dx', 3)
.style('font-size', 11)
.text(function(d) {
var count = d3.sum(d.data.children, d=>d.value);
return d.data.name + ', Cases: ' + format(count)}
)
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.data.name }\n${ d.value.toLocaleString() }`)
var rect = leaf.append('rect')
.attr('fill', function(d) {
if(d.parent.data.name == 'Late Stage (>50% post-peak)'){
// return '#F0FFEB';
return '#CEFFBF';
} else if(d.parent.data.name == 'Middle-Late Stage (~50% post-peak)'){
// return '#DEF1FF';
return '#C6E7FF';
} else if(d.parent.data.name == 'Middle-Early Stage (peaked)'){
// return '#FDE2D3';
return '#FCCCB3';
} else if(d.parent.data.name == 'Early Stage [or indeterminate] (pre-peak)'){
// return '#FFC9E4';
return '#FFC6E3';
}
} )
.attr('opacity', 0.7)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.attr('rx', 3)
.attr('ry', 3);
leaf.each((d, i, arr) => {
const current = arr[i]
const left = d.x0,
right = d.x1,
width = right - left,
top = d.y0,
bottom = d.y1,
height = d.y1 - d.y0
const tooSmall = width < 34 || height < 25
const text = d3.select( current ).append('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)
})
//let's try adding the line charts
root.children.forEach(function(group) {
group.children.forEach(function(state){
var extentCases = d3.extent(grouped.get(state.data.name), d => d.newCasesRolling);
var extentDates = d3.extent(grouped.get(state.data.name), d => d.date);
// console.log(state.data.name, state.x0, state.x1, state.y0, state.y1, extentCases, extentDates);
const offset = 5;
const y = d3.scaleLinear()
.domain(extentCases).nice()
.range([state.y1 - offset, state.y0]);
const x = d3.scaleUtc()
.domain(extentDates)
.range([state.x0 + offset, state.x1 - offset]);
const line = d3.line()
.curve(d3.curveMonotoneX)
.x(d => x(d.date))
.y(d => y(d.newCasesRolling));
svg.append('path')
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('opacity', 0.4)
.attr('stroke-width', 1.5)
.attr('d', line(grouped.get(state.data.name)));
})
});
return svg.node();
}
categorized = d3.group(sortedStates, d=>d.category)
{
const green = ['Idaho','Guam','Louisiana','Washington','Michigan','Vermont','Maine']
const blue = ['Alabama','Florida','Missouri','New York','Oregon','Oklahoma','South Dakota']
const orange = ['South Carolina','Tennessee','Pennsylvania','Puerto Rico','Georgia','Colorado','Texas','Maryland','Massachusetts','New Jersey','Nevada','Wisconsin']
const pink = ['Kentucky','Connecticut','North Carolina','Mississippi','Iowa','Delaware','District of Columbia','Kansas','New Mexico','Virginia','California','West Virginia','Nebraska','North Dakota','New Hampshire','Ohio','Indiana','Minnesota','Arkansas','Arizona','Minnesota','Illinois','Rhode Island','Utah']
sortedStates.forEach(function(state) {
if(green.indexOf(state.name) >= 0) state.category = 0;
else if(blue.indexOf(state.name) >= 0) state.category = 1;
else if(orange.indexOf(state.name) >= 0) state.category = 2;
else if(pink.indexOf(state.name) >= 0) state.category = 3;
else {
state.category = 4;
}
})
}
{
grouped.forEach(function(value, key) {
for(var i=0; i<value.length; i++) {
var element = value[i];
var newCases = 0;
if(i > 1) newCases = value[i].cases - value[i-1].cases;
element['newCases'] = newCases;
element['newCasesRolling'] = 0;
if(i >= 6) {
let sum = 0;
for (var j=0; j<6; j++) {
sum += value[i-j].newCases;
}
element['newCasesRolling'] = sum / 7;
}
}
});
}
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.