Published
Edited
Mar 22, 2021
md `reference: https://observablehq.com/@duynguyen1678/choropleth-with-tooltip`
chart = {
let path = d3.geoPath()
// .projection(null);
const width = 900;
const height = 600;
const margin = 30;
const svg = d3
.create("svg")
.attr("viewBox", [-margin, 0, width + margin, height + margin]);
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(topojson.feature(india_map, india_map.objects.states).features)
.join("path")
.attr("class", "county")
.attr("stroke", color(20000))
.attr("title", d => d.id + ": " + data.get(d.id))
.attr("fill", d => color(new_data.get(d.id)))
.attr("d", path);
svg
.selectAll("path")
.on("touchmove mousemove", function(event, d) {
d3.select(this)
.attr("fill", "red")
.raise();
})
.on("touchend mouseleave", function() {
d3.select(this)
.attr("fill", d => color(data.get(d.id)))
.lower();
});
return svg.node();
}
topojson.feature(india_map, india_map.objects.states)
data = new Map(d3.csvParse(await FileAttachment("state_wise_Current.csv").text(), ({State, Active}) => [State, +Active]))
color = d3.scaleOrdinal(d3.schemeBlues[9])
topojson = require("topojson-client@3")
india_map = FileAttachment("Covid19IndiaOrg_india.json").json()
d3 = require("d3@6")
new_data = new Map(Test_Data.map(function(d) { return [d.State, +d.Active]; }))
// console.log(new_data)
newTest = Test_Data
map2 = new Map()
Test_Data.forEach(function(d){
map2.set(d.State, +d.Active)
})
map2
d3.extent(Test_Data, (d) => +d.Active)
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.
