Published
Edited
Mar 30, 2022
Insert cell
Insert cell
Insert cell
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.append("g")
.attr("transform", "translate(300,0)")
.append(() =>
legend({
color: nullcolor,
title: "No Data",
width: 50,
tickFormat: ".1f"
})
);
svg.append("g")
.attr("transform", "translate(600,0)")
.append(() =>
legend({
color: color,
title: data.title,
width: 250,
tickFormat: ".1f"
})
);

svg.append("g")
.selectAll("path")
.data(india_states.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.5)
.attr("fill", function(d){
if(data.get(d.properties.shapeID) > 0){
return color(data.get(d.properties.shapeID));
}
else{
return d3.color("black");
}
})
.attr("d", path)
.append("title")
.text(d => " Main Languge Share: " + data.get(d.properties.shapeID));

svg.selectAll(".subunit-label")
.data(india_states.features)
.enter().append("text")
.attr("class", function(d) { return "subunit-label " + d.id; })
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("fill", function(d){
if(data.get(d.properties.shapeID)<0.6)
return "black";
else
return "white";
})
.attr("fill-opacity", "1")
// .attr("font-size", "15px")
.attr("font-size", function(d){
if(d.properties.shapeName.length > 10)
return "6px";
else
return "7px";
})
.attr("font-weight", "300")
.attr("text-anchor", "middle")
.text(function(d) { return d.properties.shapeName; })

return svg.node();
}
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
Insert cell
format = d => `${d}%`
Insert cell
topojson = require("topojson-client@3")
Insert cell
india = FileAttachment("india.json").json()
Insert cell
india_states = topojson.feature(india, india.objects.india)
Insert cell
Insert cell
Insert cell
csv_data = d3.csvParse(await FileAttachment("india_data@1.csv").text(),({shapeID, number_of_named_languages, main_language, main_language_population, pop_total}) => [shapeID, [+main_language_population/+pop_total]])
Insert cell
csv_data_objects = Object.assign((d3.csvParse(await FileAttachment("india_data@1.csv").text(), d3.autoType)).map(({shapeID, number_of_named_languages, main_language, main_language_population, pop_total}) => ({shapeID: shapeID, number_of_named_languages: +number_of_named_languages, main_language: main_language, main_language_population: +main_language_population, pop_total: +pop_total, main_language_share: +main_language_population/+pop_total})))
Insert cell
main_language_share = Array.from(csv_data.values(), d => d[1])
Insert cell
viewof bins = Inputs.range([0, 20], {step: 1, label: "Bins"})
Insert cell
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "main_language_share", thresholds: bins})),
Plot.ruleY([0])
]
})
Insert cell
data = Object.assign(new Map(csv_data), {title: "Share of the Population Who Speak the State's Main Language"})
Insert cell
Insert cell
Insert cell
Red = [d3.color("#fee5d9"), d3.color("#fcae91"), d3.color("#fb6a4a"), d3.color("#de2d26"), d3.color("#a50f15")]
Insert cell
color = d3.scaleQuantile()
.domain(main_language_share)
.range(Red)
Insert cell
Insert cell
nullcolor = d3.scaleOrdinal()
.domain([NaN])
.range(d3.color("black"))
Insert cell
Insert cell
width = 1200
Insert cell
height = 600
Insert cell
margin = 20
Insert cell
//Rotate the map sets the longitude of origin for our UTM Zone 15N projection.
projection = d3.geoMercator().fitSize([width, height], india_states)
//d3 reference for projections: https://github.com/d3/d3-geo/blob/master/README.md

//use the following url for specific projection settings: https://github.com/veltman/d3-stateplane
//Use this code to set up the map projection (if different than geographic projection)

//projection = d3.geoAlbers().fitExtent([[margin, margin], [width - margin, height - margin]], counties)

//projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
Insert cell
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection)
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