color=colorCovid
// // No tooltip
// chart2 = {
// const svg = d3.create("svg")
// .attr("viewBox", [0, 0, 975, 610]);
// svg.append("g")
// .attr("transform", "translate(610,20)")
// .append(() => legend({color: colorCovid, title: data2Map.title, width: 260, tickFormat: ".1f"}));
// svg.append("g")
// .selectAll("path")
// .data(topojson.feature(us, us.objects.counties).features)
// .join("path")
// .attr("fill", d => colorCovid(data2Map.get(d.id)))
// .attr("d", path)
// .append("title")
// .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
// ${format(data2Map.get(d.id))}`);
// svg.append("path")
// .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
// .attr("fill", "none")
// .attr("stroke", "white")
// .attr("stroke-linejoin", "round")
// .attr("d", path);
// return svg.node();
// }
data=data2Map
viewof mytext = text()
chartToolTipCovid = {
const width = 975;
const height = 610;
const margin = 30;
const svg = d3
.create("svg")
.attr("viewBox", [-margin, 0, width + margin, height + margin]);
svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() =>
legend({ color: colorCovid, title: data.title, width: 260, tickFormat: ".1f" })
);
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("class", "county")
.attr("fill", d => colorCovid(data.get(d.id)))
.attr("d", path);
svg
.select("#map")
.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
const tooltip = svg.append("g");
svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
let message= ((data.get(d.id)===undefined) ?
`No Data
${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}` :
`${format(data.get(d.id))}
${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`);
// Thanks to @mootari for the tip on the nodata for tooltip.
tooltip.call(
callout,
message
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
d3.select(this)
.attr("stroke", "red")
.raise();
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.lower();
})
.on("click", function(event, d) {
viewof mytext.setValue(d.id);
});
return svg.node();
}
import {text} from "@severo/inputs-setter"
data2Map.get("01001")
dataOrig
= Object.assign(new Map(d3.csvParse(await FileAttachment("unemployment-x.csv").text(), ({id, rate}) => [id, +rate])), {title: "Unemployment rate (%)"})
COVIDurl="https://raw.githubusercontent.com/youyanggu/covid19-infection-estimates-latest/main/counties/1_latest_percent_infected_counties.csv"
data2=d3.csv(COVIDurl)
data2fips_infect= data2.map( d => {
return [d.fips, Math.floor(Number(d.perc_current_infected_mean)*10000)/100]
}).filter( d => { return d[1]>0 })
// filter out the 0's
lodash.max(data2fips_infect.map(d => d[1]))
data2Map = Object.assign(mymap, {title: "Covid Rate (%)"})
mymap=new Map(data2fips_infect)
data2Map.get("title")
[ "51011", "51620", "01001" ].map(d=> [data2Map.get(d), data.get(d)])
colorOrig = d3.scaleQuantize([1, 10], d3.schemeBlues[9])
colorCovid = d3.scaleQuantize([0, 5], d3.schemeBlues[9])
path = d3.geoPath()
format = d => `${d}%`
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
topojson.feature(us, us.objects.counties).features
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
lodash = require("lodash")
import { callout } from "@d3/line-chart-with-tooltip"
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.
