Public
Edited
May 22, 2023
1 fork
viewof CountyMap = {
let value = null;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color:colorScale, title: `% Difference in ${dataInfo.variable}`, width: 260 }));
svg.append("g")
.selectAll("path")
.data(topojson.feature(countiesTopojson, countiesTopojson.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("fill", d=> currentData.pctData[+d.id] ? colorScale(currentData.pctData[+d.id][dates[currentDate]])||'rgb(255,255,255)' : 'rgb(255,255,255)')
.attr('id', d => d.properties.name)
.attr('class', 'county');
svg.append("g")
.selectAll("path")
.data(topojson.feature(countiesTopojson, countiesTopojson.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr("fill", 'none')
.attr("stroke", d => 'white')
.attr('id', d=> d.properties.name)
.attr('class', 'state');
svg.append("path")
.datum(topojson.mesh(countiesTopojson, countiesTopojson.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", d => 'white')
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);
// thanks! https://observablehq.com/@duynguyen1678/choropleth-with-tooltip
const tooltip = svg.append("g")
// svg
// .selectAll(".county")
// .on("touchmove mousemove", function(event, d) {
// tooltip.call(
// callout,
// `${d.properties.name} \n
// On ${dates[currentDate]}, ${dataNameDict[dataInfo.dataset2]} reports ${currentData.pctData[+d.id][dates[currentDate]] > 0 ? `${Math.round(currentData.pctData[+d.id][dates[currentDate]]*1000)/10}% more ${dataInfo.variable} than ${dataNameDict[dataInfo.dataset1]}.` : currentData.pctData[+d.id][dates[currentDate]] === 0 ? `the same number of ${dataInfo.variable} as ${dataNameDict[dataInfo.dataset1]}.` : `${Math.round(currentData.pctData[+d.id][dates[currentDate]]*1000)/10}% fewer ${dataInfo.variable} than ${dataNameDict[dataInfo.dataset1]}.`}
// `
// );
// tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
// d3.select(this)
// .raise();
// })
// .on("touchend mouseleave", function() {
// tooltip.call(callout, null);
// d3.select(this)
// .attr("stroke", null)
// .lower();
// });
const outline = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");
return Object.assign(svg.node(), {value: null});
}
currentData = {
// console.clear()
const sourceData = await d3.csv(DATA_URLS[`${dataInfo.dataset1}_${dataInfo.variable}`])
const targetData = await d3.csv(DATA_URLS[`${dataInfo.dataset2}_${dataInfo.variable}`])
let pctData = {};
let sourceSums = [];
let targetSums = [];
const allKeys = Object.keys(sourceData[0]).slice(1,)
const tempKeys = Object.keys(sourceData[0]).slice(1+7*(weekAggregation-1),)
for (let i=0; i<sourceData.length; i++){
let tempObj = {
'fips':sourceData[i].fips
}
const tempTargetData = find(targetData, 'fips', sourceData[i].fips)
if (tempTargetData === undefined) {
continue
}
for (let n=0; n<tempKeys.length; n++){
let sourceValue = +sourceData[i][tempKeys[n]]
let targetValue = +tempTargetData[tempKeys[n]]
if (sourceValue && targetValue) {
for (let q=1; q<weekAggregation; q++){
sourceValue += +sourceData[i][allKeys[allKeys.indexOf(tempKeys[n])-(q*7)]]||0
targetValue += +targetData[i][allKeys[allKeys.indexOf(tempKeys[n])-(q*7)]]||0
}
sourceValue = sourceValue/weekAggregation
targetValue = targetValue/weekAggregation
if (sourceSums[n]===undefined){
sourceSums.push(+sourceValue||0)
targetSums.push(+targetValue||0)
} else {
sourceSums[n] += +sourceValue||0
targetSums[n] += +targetValue||0
}
if (sourceValue === targetValue || (sourceValue === 0 && targetValue === 0)) {
tempObj[tempKeys[n]] = 0
} else if (sourceValue === 0 && targetValue !== 0){
tempObj[tempKeys[n]] = 1
} else {
tempObj[tempKeys[n]] = (targetValue-sourceValue)/sourceValue
}
} else {
continue
}
}
pctData[sourceData[i].fips] = tempObj
}
let returnSums = []
for (let i=0; i<sourceSums.length; i++){
returnSums.push({
'value':sourceSums[i],
'dataset':dataInfo.dataset1,
'date':tempKeys[i]
})
returnSums.push({
'value':targetSums[i],
'dataset':dataInfo.dataset2,
'date':tempKeys[i]
})
}
return {pctData, returnSums, dates: tempKeys, [dataInfo.dataset1]: sourceSums, [dataInfo.dataset2]: targetSums }
}
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.
