Published
Edited
Nov 22, 2020
/*
viewof yearVolume = slider({
min: 1996,
max: 2017,
step: 1,
value: 2017,
title: 'Year',
})
*/
yearVolume = 2000
height = 320
viewof chart = {
const svg = d3.select(DOM.svg(width, height))
const tileSize = 36;
const tileMargin = 2;
const textMargin = 3;
const sparklineMargin = 5;
const sparklineTileScale = .8;
svg.append('g')
.selectAll('rect')
.data(states)
.enter()
.append('rect')
.attr('x', (d,i) => {return (tileSize+tileMargin)*d.x})
.attr('y', (d,i) => {return (tileSize+tileMargin)*d.y})
.attr('width', tileSize)
.attr('height', tileSize)
.attr('fill',(d,i) => {
if (serieVolume[d.name] > 0){
const colorScore = 0.7+1*(serieVolume[d.name]-volumeMin)/(volumeMax-volumeMin);
return d3.interpolateGnBu(colorScore)
} else {
return '#e3e3e3'
}
})
.attr('class', (d,i) => {return d.name})
.on("click", function(d) {
console.log("test")
})
.on("mouseover", function(d) {
d3.select(this).style("fill", "#FDD511");
})
.on("mouseout", function(d) {
d3.select(this).style('fill',(d,i) => {
if (serieVolume[d.name] > 0){
const colorScore = 0.7+1*(serieVolume[d.name]-volumeMin)/(volumeMax-volumeMin);
return d3.interpolateGnBu(colorScore)
} else {
return '#e3e3e3'
}
})
});
svg.append('g')
.selectAll('text')
.data(states)
.enter()
.append('text')
.text((d,i) => {return d.name})
.attr('x', (d,i) => {return (tileSize+tileMargin)*d.x+tileSize-textMargin})
.attr('y', (d,i) => {return (tileSize+tileMargin)*d.y+textMargin})
.attr('fill', theme.text)
.attr('text-anchor', 'end')
.attr('alignment-baseline', 'hanging')
.style('font-family', 'sans-serif')
.style('font-size', '13px')
return svg.node();
}
serieVolume = {
const jsonData = volume;
let result = {};
for (const key in jsonData) {
const value = jsonData[key].filter(d=>d[0]==yearVolume)[0][1];
result[key] = value
}
return result
}
serieVolume[0].name
arrayAllData = {
let result = [];
for (const key in data) {
const value = data[key].map(d=>d[1]);
result = result.concat(value);
}
return result
}
table = {
const tbl = d3.select(html`<table class="blog-table"></table>`);
//headers
tbl.append('thead').append('tr')
.selectAll('th')
.data(data)
.enter()
.append('th')
.text(d => d);
return tbl.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.
