graduatedSymbols = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//adding basemap of united states, by using topojason.feature() that read the features of the basemap's objects from the defined basepolygones.
//adding attributes for the basemap: filling color and projection
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.States_1930_WGS84))
.attr("fill", "#e7e2e2")
.attr("d", path_basemap);
//adding features of the basemap (states) and defining attributes (filling color, stroke color and shape, projection)
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.States_1930_WGS84, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-linejoin", "round")
.attr("d", path_basemap);
//adding the point feature and joining visual variables (graduate circles) based on the square root of the values.
svg.append("g")
.selectAll("circle")
.data(points.features
.map(d => (d.value = Math.sqrt(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)
//joining the name (id) of each feature with the values to show on the map
.text(d => `${d.properties[idName]} : ${format(d.properties[attributeName])}`);
return svg.node();
}
height = 610
width = 975
path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
projection = d3.geoAlbers()
// formatting the numbers
format = d3.format(".2s")
radius = d3.scaleThreshold()
.domain(naturalbreaks)
.range(radiusArray)
sizeArrayForLegend = Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2))
radiusArray = [4, 6.5, 8, 10.5, 14]
circleLabels = ["< 161.59", "241.57","322.35","444.69","616.95"]
colors = d3.scaleThreshold()
.domain(naturalbreaks)
.range(BuPu)
BuPu = ["#edf8fb", "#b3cde3", "#8c96c6", "#88419d", "#810f7c"]
naturalbreaks = simple.ckmeans(attribute, 5).map(v => v.pop())
d3.max(attribute)
attribute = Array.from(points.features, d=>Math.sqrt(d.properties[attributeName]))
attributeName = "FamilySize5"
idName = "STATENAM"
//import the point data (geojson)
points = FileAttachment("States_Points.geojson").json()
//import the polygon base map data
basepolygons = FileAttachment("States_1930_WGS84.json").json()
topojson = require("topojson-client@3")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.