The avatar for @info474
Spring 2020 Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Jun 5, 2020
1 fork
Importers
5
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
SeattleSafety.slice(9999, 10001)
Insert cell
Insert cell
Insert cell
map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const tile = d3
.tile()
.extent([[0, 0], [width, height]])
.tileSize(512)
.clampX(false);

const zoom = d3
.zoom()
.scaleExtent([1 << 8, 1 << 22])
.extent([[0, 0], [width, height]])
.on("zoom", () => zoomed(d3.event.transform));

let image = svg
.append("g")
.attr("pointer-events", "none")
.selectAll("image");

svg
.call(zoom)
.call(
zoom.transform,
d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12)
);

function zoomed(transform) {
const tiles = tile(transform);

image = image
.data(tiles, d => d)
.join("image")
.attr("xlink:href", d => url(...d3.tileWrap(d)))
.attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
.attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
.attr("width", tiles.scale)
.attr("height", tiles.scale);
}

return svg.node();
}
Insert cell
initialCenter = [-122.340700, 47.606925]
Insert cell
initialScale = 1 << 18
Insert cell
kingCountyTopojson = await d3.json(
'https://raw.githubusercontent.com/Ryshackleton/d3_maptime_III/master/public_webserver_files/data/king_county_census_tracts.json'
)
Insert cell
url = (x, y, z) =>
`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${
devicePixelRatio > 1 ? "@2x" : ""
}?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
disx = d3
.scaleLinear()
.domain([0, d3.max(District, d => d.value)])
.range([dismargin.left, width - dismargin.right])
Insert cell
Insert cell
disxAxis = g =>
g
.attr("transform", `translate(0,${dismargin.top})`)
.call(d3.axisTop(disx).ticks(width / 80, District.format))
.call(g => g.select(".domain").remove())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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