Published
Edited
Apr 10, 2019
//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] )//longitude
.translate( [width/2,height/2] );//gives you how much you're opening the 'lens'.think like a camera
// Create GeoPath function that uses built-in D3 functionality to turn
// lat/lon coordinates into screen coordinates
bos_geoPath = d3.geoPath()
.projection( bosProjection );//redraw based on the projection you define.
// your code here
bosProjectionClass = d3.geoEquirectangular()
.scale( 190000 )
.rotate( [71.057,0] )
.center( [0, 42.313] )//longitude
.translate( [width/2,height/2] );//gives you how much you're opening the 'lens'.think like a camera
bos_geoPathClass = d3.geoPath()
.projection( bosProjectionClass );//redraw based on the projection you define.
{
// 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" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPathClass );
return svg.no;
}
{
// 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");//"g" help you group elements within a single level in HTML
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll( "path" )//different element type
.data( bosNeighborhoods.features )//binding the data using .features
.enter()
.append( "path" )
.attr( "fill", "orange" )//change the color
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );// can also sub out with the other projection: "bos_geoPathClass"
return svg.node();
}
rodentData = d3.json('https://gist.githubusercontent.com/jdev42092/ee94f6d469d7084e8dca4e8533817e0e/raw/7cfd6c34c974d3a86ff19c6180cfa22ee9ce3946/boston_rodents.json')//add rat data. the type of data is different
{
// 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" )//"path" is reading a projection. you use path to project
.attr( "fill", "#900" )
.attr( "stroke", "#999" )
.attr( "d", bos_geoPath );
return svg.node();
}
// 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" );//this order tells you the order to layer. if you switch order the point are covered up.
let rodents = 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" )//"path" is reading a projection. you use path to project
.attr( "fill", "purple" )
.attr( "stroke", "#999" )
.attr( "d", bos_geoPath )
.style("opacity", .4);//add opacity to the points.
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>
// `
html`
<h1>Rodent Incidents in Boston</h1>
<div id = "label"></div>` //add the empty text element.
{
// 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))//bind the event to the element
.on("mouseout", d => d3.select("#label").text("Empty Selection"));//return "empty selection" when you move your mouse off the item
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"
});
}
}
html `<div id = "label2"></div>` //add the empty text element.
// your code here
{
// 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"
); }
// 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("click", d => d3.select("#label2").text(d.properties.Source))//bind the event to the element
.on("mouseover", handleMouseOver)//return new color on mouse over
.on("mouseout", handleMouseOut);//return to orginal color once you mouse out of the function
return svg.node();
}
topojson = require("topojson-client@3")//it is more efficient because it knows that the line is shared. makes it a smaller file. it requires a differnt library which you import.
us = d3.json("https://unpkg.com/us-atlas@1/us/10m.json")//here the type is a topology. you have a bounding box "bbox/", transformation object, and a set of objects. it
//it is easy to nest geographies.
//topoJSON are missing the attribute file, but it does have an
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
.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.
