md`# Example choropleth map of Turkey
İlköğretimde öğretmen başına düşen öğrenci sayısı, 2018. Veri: [TÜİK](http://www.tuik.gov.tr/Start.do)`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 410]);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, title: data.title, width: 260}));
svg.append("g")
.selectAll("path")
.data(topojson.feature(turkey, turkey.objects.collection).features)
.join("path")
.attr("fill", d => color(data.get(d.properties.name)))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name},${(data.get(d.properties.name))}`);
svg.append("path")
.datum(topojson.mesh(turkey, turkey.objects.collection, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
data = Object.assign(new Map(d3.csvParse(await FileAttachment("tps@1.csv").text(), ({id, pop}) => [id, +pop])), {title: "Öğretmen başına düşen öğrenci sayısı"})
color = d3.scaleQuantize([10, 24], d3.schemeReds[7])
projection = d3.geoMercator()
.scale(2000)
.center([38,38])
path = d3.geoPath().projection(projection);
format = d => `${d}%`
state = new Map(turkey.objects.collection.geometries.map(d => [d.properties,d.properties.name]))
turkey = FileAttachment("turkey.topojson").json()
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
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.
