Big walls, cities, computing, and design.
Public
Edited
Feb 13, 2024
//import {chart} from "@mbostock/d3-choropleth"
import {chart as choropleth} from "@chagel/d3-choropleth"
choropleth
nycBoroughs = fetch(
"https://data.cityofnewyork.us/resource/7t3b-ywvw.geojson"
).then((response) => response.json())
width = 700;
height = 580;
{
// Create SVG
let svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append( "g" );
return svg.node();
}
nycProj = {
// Create a unit projection.
var projection = d3.geoAlbers().scale(1).translate([0, 0]);
// Create a path generator.
var path = d3.geoPath().projection(projection);
// Compute the bounds of a feature of interest, then derive scale & translate.
var b = path.bounds(nycBoroughs),
s =
0.95 /
Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [
(width - s * (b[1][0] + b[0][0])) / 2,
(height - s * (b[1][1] + b[0][1])) / 2
];
// Update the projection to use computed scale & translate.
return projection.scale(s).translate(t);
}
// Create GeoPath function that uses built-in D3 functionality to turn
// lat/lon coordinates into screen coordinates
nycGeoPath = d3.geoPath().projection(nycProj)
// your code here
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append("g");
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll("path")
.data(nycBoroughs.features)
.enter()
.append("path")
.attr("fill", "red")
.attr("stroke", "#333")
.attr("d", nycGeoPath);
return svg.node();
}
treeData = fetch("https://data.cityofnewyork.us/resource/uvpi-gqnh.json").then(
(response) => response.json()
)
treeGeoJSON = treeData.map((point) => {
return {
type: "Feature",
properties: point,
geometry: {
type: "Point",
coordinates: [parseFloat(point.longitude), parseFloat(point.latitude)]
}
};
})
rodentData = d3.json('https://gist.githubusercontent.com/jdev42092/ee94f6d469d7084e8dca4e8533817e0e/raw/7cfd6c34c974d3a86ff19c6180cfa22ee9ce3946/boston_rodents.json')
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append("g");
let trees = svg.append("g");
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll("path")
.data(nycBoroughs.features)
.enter()
.append("path")
.attr("fill", "#ccc")
.attr("stroke", "#333")
.attr("d", nycGeoPath);
trees
.selectAll("path")
.data(treeGeoJSON)
.enter()
.append("path")
.attr("fill", "#900")
.attr("stroke", "#999")
.attr("d", nycGeoPath);
return svg.node();
}
// your code here
// html`
// <style>
// .incident {
// fill : steelblue;
// stroke : none;
// opacity : 0.5;
// }
// </style>
// `
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append("g");
let rodents = svg.append("g");
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll("path")
.data(nycBoroughs.features)
.enter()
.append("path")
.attr("fill", "#ccc")
.attr("stroke", "#333")
.attr("d", nycGeoPath);
rodents
.selectAll("path")
.data(treeGeoJSON)
.enter()
.append("path")
.attr("fill", "steelblue")
.attr("stroke", "none")
.attr("opacity", 0.5)
.attr("d", nycGeoPath)
.attr("class", "tree")
.on("mouseover", (d) => d3.select("#label").text(d.properties.spc_common))
.on("mouseout", (d) => d3.select("#label").text("Empty Selection"));
return svg.node();
}
{
// Create Event Handlers for mouse
function handleMouseOver(d, i) { // Add interactivity
// Use D3 to select element, change color and size
d3.select(this)
.attr("fill", "orange");
}
function handleMouseOut(d, i) {
// Use D3 to select element, change color back to normal
d3.select(this).attr('fill', "steelblue")
}
}
// your code here
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append("g");
let rodents = svg.append("g");
// Create Event Handlers for mouse
function handleMouseOver(d, i) {
// Add interactivity
// Use D3 to select element, change color and size
d3.select(this).attr("fill", "orange");
}
function handleMouseOut(d, i) {
// Use D3 to select element, change color back to normal
d3.select(this).attr("fill", "steelblue");
}
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll("path")
.data(nycBoroughs.features)
.enter()
.append("path")
.attr("fill", "#ccc")
.attr("stroke", "#333")
.attr("d", nycGeoPath);
rodents
.selectAll("path")
.data(treeGeoJSON)
.enter()
.append("path")
.attr("fill", "steelblue")
.attr("stroke", "none")
.attr("opacity", 0.5)
.attr("d", nycGeoPath)
.attr("class", "incident")
.on("click", (d) => d3.select("#label").text(d.properties.spc_common))
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
// .on("mouseout", d => d3.select("#label").text("Empty Selection"));
return svg.node();
}
topojson = require("topojson-client@3")
us = d3.json("https://unpkg.com/us-atlas@1/us/10m.json")
path = d3.geoPath();
{
let width = 960;
let height = 600;
// Create SVG
let svg = d3.select(DOM.svg(width, height));
let g = svg.append("g");
// Bind TopoJSON data
g.selectAll("path")
.data(topojson.feature(us, us.objects.states).features) // Bind TopoJSON data elements
.enter().append("path")
.attr("d", path)
.style("fill", "white")
.style("stroke", "black");
return svg.node();
}
// your code here
unemployment = d3.tsv("https://gist.githubusercontent.com/jdev42092/9a314291805640a097e16e58248627eb/raw/365c199c5a173a0018608615b6823b5cdcaa6bae/unemployment.tsv", ({id, rate}) => ({county: id, rate : +rate}))
unemp_data = {
// Create empty object for holding dataset
const rateById = {};
// Create property for each ID, give it value from rate
unemployment.forEach(d => (rateById[d.county] = +d.rate));
return rateById;
}
color = d3.scaleQuantize()
.domain([1, 10])
.range(d3.schemePurples[9]);
{
let width = 960;
let height = 600;
// Create SVG
let svg = d3.select(DOM.svg(width, height));
let g = svg.append("g");
// Create empty object for holding dataset
const rateById = {};
// Create property for each ID, give it value from rate
unemployment.forEach(d => (rateById[d.county] = +d.rate));
// Bind TopoJSON data
g.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features) // Bind TopoJSON data elements
.enter().append("path")
.attr("d", path)
.style("fill", d => color(rateById[d.id])) // get rate value for property matching data ID
// pass rate value to color function, return color based on domain and range
.style("stroke", "black");
return svg.node();
}
{
let width = 960;
let height = 600;
// Create SVG
let svg = d3.select(DOM.svg(width, height));
let g = svg.append("g");
// Create empty object for holding dataset
const rateById = {};
// Create property for each ID, give it value from rate
unemployment.forEach(d => (rateById[d.county] = +d.rate));
// Bind TopoJSON data
g.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features) // Bind TopoJSON data elements
.enter().append("path")
.attr("d", path)
.style("fill", d => color(rateById[d.id]));
g.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
return svg.node();
}
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.
