graduatedSymbols = {
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.contour))
.attr("fill", "#ccc")
.attr("d", path_basemap);
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.contour, (a, b) => a !== b))
.attr("fill", "#ccc")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width",0.3)
.attr("d", path_basemap);
svg.append("g")
.selectAll("circle")
.data(points.features
.map(d => (d.value = d.properties[attributeName], d))
.sort((a, b) => b.value - a.value))
.join("circle")
.attr("transform", d => `translate(${path_points.centroid(d)})`)
.attr("r", d => radius(d.value))
.attr("fill", d => colors(d.value))
.attr("fill-opacity", 1)
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.append("title")
.text(d => `${d.properties[idName]} : ${format(d.properties[attributeName])}`);
return svg.node();
}
/* There are obvious spatial disparity in Chicago community areas in terms of househould income. High income areas are mainly clustered in suburban areas and upper coastline areas. In the central area of Chicago are communities with relatively low household incomes. */
height = 800
width = 700
path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
projection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[80, 80], [width, height]], neighborhood_features);
neighborhood_features = topojson.feature(basepolygons, basepolygons.objects.contour)
format = d3.format(".2s")
//proportional symbols
//radius = d3.scaleSqrt([0, d3.max(attribute)], [0, 30])
radius = d3.scaleThreshold()
.domain(naturalbreaks)
.range(radiusArray)
sizeArrayForLegend = Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2))
radiusArray = [4, 9, 15, 22]
circleLabels = ["<28.3","78.54","153.94","254.46"]
colors = d3.scaleThreshold()
.domain(naturalbreaks)
.range(Bluecolor)
Bluecolor = ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"]
naturalbreaks = simple.ckmeans(attribute, 4).map(v => v.pop())
d3.max(attribute)
attribute = Array.from(points.features, d=>Math.sqrt(d.properties[attributeName]))
attribute1 = Array.from(points.features, d=>d.properties[attributeName])
attributeName = "MedInc1999"
idName = "community"
//import the point data (geojson)
points = FileAttachment("Chicagopoints.geojson").json()
//import the polygon base map data
basepolygons = FileAttachment("contour.json").json()
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.
