d3 = require("d3@6")
chart = {
const width = 1706.67, height = 960;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], areas);
var geopaths = svg.append("g").attr("id", "paths");
var spots = svg.selectAll("circle")
var polyline = svg.selectAll("polyline").enter().append("polyline")
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(areas.features).enter().append("path").attr('class', 'outlines')
.attr("d", path1)
.style("fill", "seashell")
.style("fill-opacity", "1")
.style("stroke-width", '.3')
.style("stroke", "black")
.style('stroke-opacity','1')
var path2 = d3.geoPath().projection(projection);
geopaths.selectAll("path2")
.data(buildings.features).enter().append("path").attr('class', 'outlines')
.attr("d", path2)
.style("fill", "peachpuff")
.style("fill-opacity", "1")
.style("stroke", "none")
var path3 = d3.geoPath().projection(projection);
geopaths.selectAll("path3")
.data(buildings.features).enter().append("path").attr('class', 'outlines')
.attr("d", path3)
.style("fill", "peachpuff")
.style("fill-opacity", "1")
.style("stroke", "none")
svg.append("text")
.attr('x','1100').attr('y','100')
.style('font-family','roboto+slab')
.style('font-size','32px')
.style('font-weight','bold')
.style('fill','sienna')
.text('Case Study')
svg.append("text")
.attr('x','1100').attr('y','140')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('Proposal for new urban farms')
return svg.node();
}
Urban Farms.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
popDensity = {
const width = 1706.67, height = 960;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], fullmap);
var geopaths = svg.append("g").attr("id", "paths");
var spots = svg.selectAll("circle")
var polyline = svg.selectAll("polyline").enter().append("polyline")
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(combined.features).enter().append("path").attr('class', 'outlines')
.attr("d", path1)
.style("fill", "sienna")
.style("fill-opacity", function(d) {
var value = d.properties["Chicago Health Atlas Data_POP_2017-2021"];
if (value < 15000) return ".1";
else if (value < 30000) return ".2";
else if (value < 45000) return ".3";
else if (value < 60000) return ".4";
else if (value < 75000) return ".5";
else if (value < 90000) return ".6";
else if (value < 105000) return ".7";
else if (value < 120000) return ".8";
else if (value < 135000) return ".9";
else return "1";
})
.style("stroke-width", '.3')
.style("stroke", "black")
.style('stroke-opacity','1')
svg.append("text")
.attr('x','450').attr('y','800')
.style('font-family','roboto+slab')
.style('font-size','32px')
.style('font-weight','bold')
.style('fill','sienna')
.text('Demographics')
svg.append("text")
.attr('x','450').attr('y','840')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('Population Density')
return svg.node();
}
foodInsecurity1 = {
const width = 1706.67, height = 960;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], fullmap);
var geopaths = svg.append("g").attr("id", "paths");
var spots = svg.selectAll("circle")
var polyline = svg.selectAll("polyline").enter().append("polyline")
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(combined.features).enter().append("path").attr('class', 'outlines')
.attr("d", path1)
.style("fill", "sienna")
.style("fill-opacity", function(d) {
var value = d.properties["Chicago Health Atlas Data_FAI_2020"];
if (value < 5) return ".1";
else if (value < 10) return ".2";
else if (value < 15) return ".3";
else if (value < 20) return ".4";
else if (value < 25) return ".5";
else if (value < 30) return ".6";
else if (value < 35) return ".7";
else if (value < 40) return ".8";
else if (value < 45) return ".9";
else return "1";
})
.style("stroke-width", '.3')
.style("stroke", "black")
.style('stroke-opacity','1')
svg.append("text")
.attr('x','450').attr('y','800')
.style('font-family','roboto+slab')
.style('font-size','32px')
.style('font-weight','bold')
.style('fill','sienna')
.text('Food Insecurity')
svg.append("text")
.attr('x','450').attr('y','840')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('Percentage of the population')
svg.append("text")
.attr('x','450').attr('y','870')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('experiencing food insecurity')
svg.append("text")
.attr('x','450').attr('y','900')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('at some point')
return svg.node();
}
foodDesert = {
const width = 1706.67, height = 960;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], fullmap);
var geopaths = svg.append("g").attr("id", "paths");
var spots = svg.selectAll("circle")
var polyline = svg.selectAll("polyline").enter().append("polyline")
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(fullmap.features).enter().append("path").attr('class', 'outlines')
.attr("d", path1)
.style("fill", "seashell")
.style("fill-opacity", "1")
.style("stroke-width", '.3')
.style("stroke", "black")
.style('stroke-opacity','1')
var path2 = d3.geoPath().projection(projection);
geopaths.selectAll("path2")
.data(groceryStores.features).enter().append("path").attr('class', 'outlines')
.attr("d", path2)
.style("fill", "seagreen")
.style("fill-opacity", ".5")
var path3 = d3.geoPath().projection(projection);
geopaths.selectAll("path3")
.data(farmersMarkets.features).enter().append("path").attr('class', 'outlines')
.attr("d", path3)
.style("fill", "seagreen")
.style("fill-opacity", ".5")
var path4 = d3.geoPath().projection(projection);
geopaths.selectAll("path4")
.data(produceCarts.features).enter().append("path").attr('class', 'outlines')
.attr("d", path4)
.style("fill", "seagreen")
.style("fill-opacity", ".5")
svg.append("text")
.attr('x','450').attr('y','800')
.style('font-family','roboto+slab')
.style('font-size','32px')
.style('font-weight','bold')
.style('fill','sienna')
.text('Food Desert')
svg.append("text")
.attr('x','450').attr('y','840')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('Areas with minimal access to')
svg.append("text")
.attr('x','450').attr('y','870')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('healthy, nutritious food')
return svg.node();
}
Chicago Health Atlas Data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
chicagoHealthAtlasData
health_outlines = {
var features = []
var data = chicagoHealthAtlasData
var outlines = fullmap.features
for (let i = 0; i < data.length; i++) {
for (let n = 0; n < outlines.length; n++) {
if(data[i].GEOID==Number(outlines[n].properties.area_numbe)){
features.push({type:'Feature',properties:data[i],geometry:outlines[n].geometry})
}
}
}
return {type:"FeatureCollection",features:features}
}
healthDataMap = {
const width = 1706.67, height = 960;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
var projection = d3.geoMercator().fitSize([width, height], fullmap);
var geopaths = svg.append("g").attr("id", "paths");
var spots = svg.selectAll("circle")
var polyline = svg.selectAll("polyline").enter().append("polyline")
var path1 = d3.geoPath().projection(projection);
geopaths.selectAll("path1")
.data(health_outlines.features)
.enter()
.append("path")
.attr('class', 'outlines')
.attr("d", path1)
.style("fill", d => color(d.properties.EKR_2022))
.style("fill-opacity", '1')
.style("stroke-width", '.3')
.style("stroke", "black")
.style('stroke-opacity','1')
svg.append("text")
.attr('x','450').attr('y','800')
.style('font-family','roboto+slab')
.style('font-size','32px')
.style('font-weight','bold')
.style('fill','sienna')
.text('Food Insecurity')
svg.append("text")
.attr('x','450').attr('y','840')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('Percentage of the population')
svg.append("text")
.attr('x','450').attr('y','870')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('experiencing food insecurity')
svg.append("text")
.attr('x','450').attr('y','900')
.style('font-family','roboto+slab')
.style('font-size','24px')
.style('font-weight','regular')
.style('fill','sandybrown')
.text('at some point')
return svg.node();
}
color = d3.scaleQuantize([1, 100], d3.schemeGreens[9])
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
farmersMarkets = FileAttachment("Farmers Markets.geojson").json()
groceryStores = FileAttachment("Grocery Stores.geojson").json()
produceCarts = FileAttachment("Produce Carts.geojson").json()
buildings = FileAttachment("Buildings.geojson").json()
areas = FileAttachment("Community Areas.geojson").json()
fullmap = FileAttachment("Boundaries - Community Areas (current)@1.geojson").json()
combined = FileAttachment("Combined.geojson").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.
