pixel flipper, data sifter. trying to see what I can while I'm here
map = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;background-color:#000">
${tile().map(d => {
let w2 = width/2
let h2 = height/2
const buildings = svg`<g fill="#000">`;
const water = svg`<path stroke="#64b5f6" fill="none" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">`;
const waterfill = svg`<path stroke="#64b5f6" fill="#64b5f6" stroke-width="1.5">`;
// const land = svg`<path fill="none" stroke="green" stroke-width="0.5">`;
console.log(d)
fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=${key}&foo=bar`)
.then(response => response.json())
.then(data => {
// console.log(data)
if(data.water.features.length) { console.log(data.water.features) }
//buildings.setAttribute("d", path(data.buildings))
d3.select(buildings).selectAll("path.building").data(data.buildings.features)
.enter().append("path").classed("building", true)
.attr("d", path)
.attr("fill", function(d) {
let c = path.centroid(d)
let dist2 = (w2 - c[0])*(w2 - c[0]) + (h2 - c[1])*(h2 - c[1])
return colorScale(dist2)
})
water.setAttribute("d", path({
type: "FeatureCollection",
features: data.water.features//.filter(d => d.properties.kind != "fountain")
.filter(d => d.properties.boundary)
}));
waterfill.setAttribute("d", path({
type: "FeatureCollection",
features: data.water.features.filter(d =>
(d.properties.kind == "water"
&& d.properties.area > 500000)
// || d.properties.name.indexOf("Harbor") >= 0
)
}));
// land.setAttribute("d", path({
// type: "FeatureCollection",
// features: data.earth.features //.filter(d => d.properties.boundary)
// }));
});
return svg`${buildings}${water}${waterfill}`;
})}</svg>`
map2 = svg`<svg viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;background:none;">
${tile().map(d => {
let w2 = width/2
let h2 = height/2
const buildings = svg`<g fill="#000000">`;
const water = svg`<path stroke="#64b5f6" fill="none" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">`;
const waterfill = svg`<path stroke="#64b5f6" fill="#64b5f6" stroke-width="1.5">`;
// const land = svg`<path fill="none" stroke="green" stroke-width="0.5">`;
console.log(d)
fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=${key}&foo=bar`)
.then(response => response.json())
.then(data => {
// console.log(data)
if(data.water.features.length) { console.log(data.water.features) }
//buildings.setAttribute("d", path(data.buildings))
d3.select(buildings).selectAll("path.building").data(data.buildings.features)
.enter().append("path").classed("building", true)
.attr("d", path)
// .attr("fill", function(d) {
// let c = path.centroid(d)
// let dist2 = (w2 - c[0])*(w2 - c[0]) + (h2 - c[1])*(h2 - c[1])
// return colorScale(dist2)
// })
// water.setAttribute("d", path({
// type: "FeatureCollection",
// features: data.water.features//.filter(d => d.properties.kind != "fountain")
// .filter(d => d.properties.boundary)
// }));
// waterfill.setAttribute("d", path({
// type: "FeatureCollection",
// features: data.water.features.filter(d =>
// (d.properties.kind == "water"
// && d.properties.area > 500000)
// // || d.properties.name.indexOf("Harbor") >= 0
// )
// }));
// land.setAttribute("d", path({
// type: "FeatureCollection",
// features: data.earth.features //.filter(d => d.properties.boundary)
// }));
});
return svg`${buildings}${water}${waterfill}`;
})}</svg>`
frame = 10
colorScale = function(d) {
let s = d3.scaleLinear()
.domain([1, 14])
.range([1,0])
let l = Math.log(d)
let sl = s(l);
return d3.interpolatePlasma(0.2 + (sl + Math.sin(frame/5 * Math.PI/2)) / 2 )
}
zoomLevel = 21
projection = d3.geoMercator()
.center([-87.6535176, 41.8960457])
.scale((1 << zoomLevel) / (2 * Math.PI))
.translate([width * 0.45, height * 0.4])
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
// .zoomDelta(2)
key = "mqCr-mIPQ3yUmbxehWdYIA" // Sign up for an API key: https://www.nextzen.org
path = d3.geoPath(projection)
width = 1050
height = 1500
d3 = require("d3-geo@1", "d3-tile@0.0", "d3-scale-chromatic@1", "d3@5")
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.
