Public
Edited
Dec 12, 2024
1 fork
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {toNum, colorByID} from "@emfielduva/dvlib"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gridMapD3 = d3.select(gridMapContainer)
Insert cell
import {gridMap} from "@emfielduva/dvlib_maps"
Insert cell
Insert cell
Insert cell
myGridMap = gridMap(gridMapD3,"usgrid",usGridMapData,gridOptions)
Insert cell
Insert cell
Insert cell
Insert cell
// calculates the total of a property for the given state and filterType ( sector )
function calcState (state, property, filterType) {
var sum = 0;
fooddata.forEach(d => sum += (d["State1"] == state && (filterType == "All" ? true : d["Sector"] == filterType)) ? toNum(d[property]) : 0)
return sum
}
Insert cell
usGridMapData.forEach(d => d["Total"] = calcState(d["state"], property, filterField))
Insert cell
Insert cell
{
var colorScale = d3.scaleLinear().domain(d3.extent(usGridMapData,d => toNum(d["Total"]))).range(["white","pink"])
colorByID(myGridMap,usGridMapData,"state","state","Total",'',colorScale)
var range = d3.extent(usGridMapData,d => toNum(d["Total"]))
var layer = d3.select(gridMapContainer).select("#layer0")
var y = 0;
for (let index = range[0]; index <= range[1]; index += (range[1]-range[0])/5) {
layer.append("rect")
.attr("x", 0)
.attr("y", y)
.attr("width", 20)
.attr("height", 20)
.style("fill", colorScale(index))
.attr("class", "keysq")

layer.append("text")
.attr("x", 30)
.attr("y", y + 15)
.text(Math.round(index))
.style("fill", "black")
.style("text-anchor", "start")
y+= 20
}
}
Insert cell
Insert cell
Insert cell
Insert cell
// creates the Array of Key,Value pairs for the pie chart
function calcPie(state, sector) {
if (sector == "All"){
var bysector = []
for (let sec of [...new Set(fooddata.map(item => item["Sector"]))]) {
var sum = 0;
fooddata.forEach(d => sum += ((state == "All" ? true : d["State1"] == state) && d["Sector"] == sec) ? toNum(d[property]) : 0)
bysector.push([sec.toUpperCase(), sum]);
}
return bysector
}
var byfoodtype = []
for (let food of [...new Set(fooddata.map(item => item["Food Type"]))]) {
var sum = 0;
fooddata.forEach(d => sum += ((state == "All" ? true : d["State1"] == state) && d["Food Type"] == food) ? toNum(d[property]) : 0)
byfoodtype.push([food.toUpperCase().replace("-TO-", "2").replace(" & ", "/"),sum]);
}
return byfoodtype
}
Insert cell
Insert cell
Insert cell
Insert cell
{
// from https://observablehq.com/@sjengle/interactivity
myGridMap.append("g").attr("id", "annotation");
var rect = myGridMap.selectAll("rect")
var label = myGridMap.select("g#annotation")
rect.on("mouseover.highlight", function(d) {
d3.select(this)
// .raise() // bring to front
.style("stroke", "black")
.style("stroke-width", 2);
});

rect.on("mouseout.highlight", function(d) {
d3.select(this).style("stroke", "#ddd");
});

rect.on("click", function (e, d) {
d3.select(gridMapContainer).select("#layer1").selectAll("g.piearc").remove()
var donut = dvDonut(graph1Elem, calcPie(d["state"], filterField), 225, 75, donutOptions)
d3.select(gridMapContainer).select("#layer1").select("#centerlabel").text(d["state"])
rect.select()
})

d3.select(gridMapContainer).select("#layer1").select("#resetchart").on("click", function (e, d) {
d3.select(gridMapContainer).select("#layer1").selectAll("g.piearc").remove()
var donut = dvDonut(graph1Elem, calcPie("All", filterField), 225, 75, donutOptions)
d3.select(gridMapContainer).select("#layer1").select("#centerlabel").text("United States")
})

}
Insert cell

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.
Learn more