PSET 7 / Yunhan Zheng

Published

Edited

Apr 18, 2019

// your code here

//load the geographic dataset

Boston = d3.json('https://gist.githubusercontent.com/cesandoval/09b2e39263c748fbcb84b927cecc7c46/raw/ab71d3638efd2545ec99c2651c6f2ddcea9d2a07/boston.json')

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));

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", "white")

.style("stroke", "black");

return svg.node();

}

boston_311=d3.csv("https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv")

newboston_311={

let pro_twi=[]

for (let i=0; i<boston_311.length; i++){

pro_twi[i]=(parseFloat(boston_311[i].twitter))/(parseFloat(boston_311[i]['tot_count ']))

}

return z.addCol("pro_twitter", pro_twi, boston_311)

}

Twitter_311 = {

// Create empty object for holding dataset

const twitterById = {};

// Create property for each ID, give it value from rate

boston_311.forEach(d => (twitterById[d.id] = +Math.log(d.twitter)));

return twitterById;

}

color = d3.scaleQuantize()

.domain([0, d3.max(Object.values(Twitter_311), d => +d)])

.range(d3.schemePurples[9]);

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

{

let width = 960;

let height = 600;

// Create SVG

let svg = d3.select(DOM.svg(width, height));

let g = svg.append("g")

.call(legend);

tooltip

// Create empty object for holding dataset

const twitterById = {};

const ProtwitterById = {};

// Create property for each ID, give it value from rate

boston_311.forEach(d => (twitterById[d.id] = +Math.log(d.twitter)));

newboston_311.forEach(d => (ProtwitterById[d.id] = d3.format("%")(d.pro_twitter)));

// 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 => color(twitterById[d.properties.OBJECTID])) // get rate value for property matching data ID

// pass rate value to color function, return color based on domain and range

.style("stroke", "white")

.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 + ":"+ ProtwitterById[d.properties.OBJECTID]))

.on("mouseout", d=>tooltip.style("visibility", "hidden"));

return svg.node();

}

legend = g => {

const x = d3.scaleLinear()

.domain(d3.extent(color.domain()))

.rangeRound([0, 260]);

g.selectAll("rect")

.data(color.range().map(d => color.invertExtent(d)))

.join("rect")

.attr("height", 8)

.attr("x", d => x(d[0]))

.attr("width", d => x(d[1]) - x(d[0]))

.attr("fill", d => color(d[0]));

g.append("text")

.attr("x", x.range()[0])

.attr("y", +40)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("font-weight", "bold")

.text("Twitters per neighborhood (log scale)");

g.call(d3.axisBottom(x)

.tickSize(13)

.tickFormat(d => d3.format(".3n")(d))

.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))

.select(".domain")

.remove();

}

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.

Learn more