Notebooks 2.0 is here.
Week 12 - Interaction and Animation: D3 Transitions, Behaviors, and BrushingWeek 10 - Intro to D3.js: Making a ChartParsing API ResponsesWeek 5a - Web APIsWeek 4a - Exploring Data with Vega-LiteWeek 3 - Data Management with ZebrasWeek 3a - Data ManagementWeek 2b - Advanced JavascriptWeek 2a - Introduction to Javascript Part2Week 1b - Introduction to JavascriptWeek 1a - Introduction to HTML and JavascriptWeek 0 - Introduction to Observable
Week 11 - Intro to D3.js: Mapping Data with D3
//import {chart} from "@mbostock/d3-choropleth"
import {chart as choropleth} from "@chagel/d3-choropleth"
choropleth
bosNeighborhoods = d3.json('https://gist.githubusercontent.com/jdev42092/5c285c4a3608eb9f9864f5da27db4e49/raw/a1c33b1432ca2948f14f656cc14c7c7335f78d95/boston_neighborhoods.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();
}
bosProjection = d3.geoAlbers()
.scale( 190000 )
.rotate( [71.057,0] )
.center( [0, 42.313] )
.translate( [width/2,height/2] );
// Create GeoPath function that uses built-in D3 functionality to turn
// lat/lon coordinates into screen coordinates
bos_geoPath = d3.geoPath()
.projection( bosProjection );
// your code here
mybosProjection = d3.geoEquirectangular()
.scale( 190000 )
.rotate( [71.057,0] )
.center( [0, 42.313] )
.translate( [width/2,height/2] );
mybos_geoPath = d3.geoPath()
.projection( mybosProjection );
{
// 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( bosNeighborhoods.features )
.enter()
.append( "path" ) // before we used lines, now we are using a path allows path
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", mybos_geoPath );
return svg.node();
}
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 rodents = svg.append( "g" );
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll( "path" )
.data( bosNeighborhoods.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );
rodents.selectAll( "path" )
.data( rodentData.features )
.enter()
.append( "path" )
.attr( "fill", "#900" )
.attr( "stroke", "#999" )
.attr( "d", bos_geoPath );
return svg.node();
}
// tried to switch order of code
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let rodents = svg.append( "g" ); // christine
let g = svg.append( "g" );
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
rodents.selectAll( "path" )
.data( rodentData.features )
.enter()
.append( "path" )
.attr( "fill", "#900" )
.attr( "stroke", "#999" )
.attr( "d", bos_geoPath );
g.selectAll( "path" )
.data( bosNeighborhoods.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );
return svg.node();
}
// 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( bosNeighborhoods.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );
rodents.selectAll( "path" )
.data( rodentData.features )
.enter()
.append( "path" )
.attr( "fill", "steelblue" )
.attr( "stroke", "none" )
.attr( "opacity", 0.5)
.attr( "d", bos_geoPath )
.attr("class", "incident")
.on("mouseover", d => d3.select("#label").text(d.properties.LOCATION_STREET_NAME)) // how to mouseover
.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")
// .on("mouseover", d => d3.attr("fill", "red"));
}
function handleMouseOut(d, i) {
// Use D3 to select element, change color back to normal
d3.select(this).attr(
'fill', "steelblue");
// .on("mouseout", d => d3.select("#label").text(d.properties.LOCATION_STREET_NAME))
}
}
// 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" );
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll( "path" )
.data( bosNeighborhoods.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );
rodents.selectAll( "path" )
.data( rodentData.features )
.enter()
.append( "path" )
.attr( "fill", "steelblue" )
.attr( "stroke", "none" )
.attr( "opacity", 0.5)
.attr( "d", bos_geoPath )
.attr("class", "incident")
.on("mouseover", handleMouseOver) // how to mouseover
.on("mouseout", handleMouseOut)
.on("click", d => d3.select("#my_label").text(d.properties.Source))
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.counties).features) // Bind TopoJSON data elements
// pass through what objects you want to use -- in this case we are doing county lines
.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.
