injustice_datasets = [kill, tort, disap, polpris, elecsd, speech, assn];
colorScale = d3.scaleLinear().domain([0,70]).range(["#000d3d","white"])
colorByID2 = (objectSet,dataList,objectIDfield,dataIDfield,dataValueField,weights,extents,colorScaleColors) => {
// dataIDField = country code
// dataValueField = year
// colorScale = low, high
var combined = {}; // combined dataset, maps country to value (given year)
for (let index = 0; index < 7; ++index) {
let data = dataList[index];
data.forEach(d =>{
if (!(d[dataIDfield] in combined)){
combined[d[dataIDfield]] = 0;
}
combined[d[dataIDfield]] += weights[index] * toNum(d[dataValueField]);
})
}
let minValue = -1;
let maxValue = -1;
let firstValue = true;
for (const property in combined){
if (firstValue){
minValue = combined[property];
maxValue = combined[property];
firstValue = false;
}
else {
if(combined[property] < minValue){
minValue = combined[property];
}
if(combined[property] > maxValue){
maxValue = combined[property];
}
}
}
// let minValue = d3.min(combined, country => toNum(combined[country]));
// let maxValue = d3.max(combined, country => toNum(combined[country]));
let colorScale = d3.scaleLinear().domain([minValue, maxValue]).range(colorScaleColors)
for (const property in combined){
objectSet.filter(o=>o[objectIDfield] == property)
.style("fill",colorScale(combined[property]))
}
}
colorByID2(mapLayers["countries"],injustice_datasets,"id","Three",year,slider_vals,'',[bad,good])
chart = {
let mySVG = d3.select('svg');
mySVG.append("rect")
.attr("x", 20)
.attr("y", 390)
.attr("width", 200)
.attr("height", 100)
.style("fill", "#011329")
mySVG.append("rect")
.attr("x", 30)
.attr("y", 400)
.attr("width", 20)
.attr("height", 15)
.style("outline", "2px solid " + "#b08400")
.style("fill", good)
mySVG.append("text")
.text('Safe Havens')
.attr("x", 60)
.attr("y", 400)
.attr("alignment-baseline", "hanging")
.style("fill", '#e6dcbe')
mySVG.append("rect")
.attr("x", 30)
.attr("y", 430)
.attr("width", 20)
.attr("height", 15)
.style("outline", "2px solid " + "#b08400")
.style("fill", bad)
mySVG.append("text")
.text('Worst Offenders')
.attr("x", 60)
.attr("y", 430)
.attr("alignment-baseline", "hanging")
.style("fill", '#e6dcbe')
mySVG.append("text")
.text(year)
.attr("x", 60)
.attr("y", 460)
.attr("alignment-baseline", "hanging")
.style("fill", '#e6dcbe')
}
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.
