Published
Edited
Jan 30, 2019
3 forks
20 stars
//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')
{
// 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 );
{
// 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_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();
}
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", "#900" )
.attr( "stroke", "#999" )
.attr( "d", bos_geoPath )
.attr("class", "incident")
.on("mouseover", d => d3.select("#label").text(d.properties.LOCATION_STREET_NAME))
.on("mouseout", d => d3.select("#label").text(""));
return svg.node();
}
// html`
// <style>
// .incident {
// fill : steelblue;
// stroke : none;
// opacity : 0.5;
// }
// #label {
// position: absolute;
// left: 10px;
// font-weight: 100;
// font-family: "Proxima Nova", "Montserrat", sans-serif;
// }
// .hover {
// fill: yellow;
// }
// </style>
// `
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
.enter().append("path")
.attr("d", path)
.style("fill", "white")
.style("stroke", "black");
return svg.node();
}
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.
