d3 = require("d3@5")
topojson = require("topojson-client@3")
import {chart as choropleth} from "@chagel/d3-choropleth"
boston = d3.json('https://gist.githubusercontent.com/cesandoval/09b2e39263c748fbcb84b927cecc7c46/raw/ab71d3638efd2545ec99c2651c6f2ddcea9d2a07/boston.json')
boston311 = d3.csv('https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv')
width=900
height=600
bosProjection=d3.geoAlbers()
.scale(190000)
.rotate([71.057,0])
.center([0,42.313])
.translate([width/2,height/2])
bos_geoPath=d3.geoPath()
.projection(bosProjection)
color = d3.scaleQuantize()
.domain([0, 5])
.range(d3.schemePurples[9]);
colored_boston311={
const colorBy311={}
//boston311.forEach(d=>(colorBy311[d.Name]=+d.twitter))
boston311.forEach(d=>(colorBy311[d.Name]=color(Math.log(d.twitter))))
return colorBy311
}
{
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(boston, boston.objects.boston_neigh).features) // Bind TopoJSON data elements
.enter().append("path")
.attr("d", bos_geoPath)
.style("fill", d=>colored_boston311[d.properties.Name])
.style("stroke", "black")
.on("mouseover",
d=>tooltip
.style("visibility","visible")
.text(d.properties.Name)
)
.on("mousemove",
d => tooltip
.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+10)+"px")
.text(d.properties.Name+":"+(ratio[d.properties.Name]*100).toString()))
.on("mouseout",
d => tooltip.style("visibility", "hidden"));
;
svg.append("g")
.attr("transform", "translate(700,40)")
.call(legend);
return svg.node();
}
//Note: tooltip is added on the main figure above
tooltip = d3.select("body")
.append("div")
.style("background-color","white")
.style("padding","5px")
.style("position", "absolute")
.style("font-family", "'Open Sans', sans-serif")
.style("font-size", "12px")
.style("z-index", "10")
.style("visibility", "hidden")
.style("opacity", "0.6")
.style("fill","#ffffff")
ratio={
var sumBoston=0
boston311.forEach(d=>(sumBoston=sumBoston+parseInt(d.twitter)))
const rate={}
boston311.forEach(d=>rate[d.Name]=(d.twitter)/sumBoston)
return rate
}
data = Object.assign(new Map(await d3.csv("https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv", ({Name, twitter}) => [Name, (Math.log(twitter)).toFixed(1)])), {title: "Tweets per neighborhood(Log Scale)"})
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.
