data = {
const res = await require('https://api.mapbox.com/styles/v1/mel-anie/ckwqejdmk9yt614p4nr81a1pv?access_token=pk.eyJ1IjoibWVsLWFuaWUiLCJhIjoiY2tub3IxbWt0MGFtMjJvcDh5cjU3ZDFseSJ9.npem8MVd2oOJNABA0jzSAQ');
const source = await res.json()
const layers = source.layers.filter( layer => (layer.id.indexOf("road") !== -1 && layer.id.indexOf("rail") == -1) || layer.id.indexOf("tunnel") !== -1 || layer.id.indexOf("bridge") !== -1 || layer.id.indexOf("oneway") !== -1 || layer.id.indexOf("traffic") !== -1)
return layers
}
yScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, height])
xScale = d3.scaleLinear()
.domain([0, data.length ])
.range([50, width - 100])
{
const svg = d3.select(DOM.svg(width, height));
var node = svg.selectAll("g.node")
.data(data, function(d) { return d.id; })
var nodeEnter = node.enter()
.append("svg:g")
.attr("class", "node")
var defs = nodeEnter.append("defs");
defs.append('pattern')
.attr("id", function(d) { return "image"+ d.id;} )
.attr("width", 1)
.attr("height", 1)
.append("svg:image")
.attr("xlink:href", d => getUrl(d.id))
.attr("width", 100)
.attr("height", 100);
// nodeEnter.append("svg:rect")
// .attr("y", (d,i) => yScale(i))
// .attr("x", 10)
// .attr("width", 100)
// .attr("height", 100)
// .attr("fill",function(d) { return "url(#image"+ d.id +")" } )
nodeEnter.append("svg:rect")
.attr("y", (d,i) => yScale(i))
.attr("x", 10)
.attr("width", 40)
.attr("height", 30)
.attr("fill", d => getColor(d.id) )
nodeEnter
.append("text")
.attr("x", 60)
.attr("y", (d,i) => yScale(i) + 15)
.attr("fill", d => getTextColor(d.id) )
.style("font", "12px Helvetica")
.text(d => d.id)
return svg.node();
}
function getUrl(id) {
if (id.indexOf("traffic") !== -1) {
return "https://melanie.imfeld.info/Bilder/trafficlayer.png"
} else if (id.indexOf("arrow") !== -1) {
return "https://melanie.imfeld.info/Bilder/arrowlayer.png"
} else if (id.indexOf("road") !== -1 && id.indexOf("rail") == -1) {
return "https://melanie.imfeld.info/Bilder/roadlayer.png"
} else if (id.indexOf("tunnel") !== -1) {
return "https://melanie.imfeld.info/Bilder/tunnellayer.png"
} else if (id.indexOf("bridge") !== -1) {
return "https://melanie.imfeld.info/Bilder/bridgelayer.png"
}
}
function getColor(id) {
if (id.indexOf("traffic") !== -1 && id.indexOf("arrow") === -1) {
return "#FE9616"
} else if (id.indexOf("arrow") !== -1 || id.indexOf("level-crossing") !== -1) {
return "#C4C4C4"
} else if (id.indexOf("road") !== -1 && id.indexOf("rail") === -1) {
return "#F4F4F4"
} else if (id.indexOf("tunnel") !== -1) {
return "#F4F4F4"
} else if (id.indexOf("bridge") !== -1) {
return "#F4F4F4"
}
}
function getTextColor(id) {
if (id.indexOf("traffic") !== -1 && id.indexOf("arrow") === -1) {
return "#E58813"
} else {
return "#787878"
}
}
width = size * data.length
height = size * data.length
size = 20
soFetch
import { soFetch } from '@alecglassford/so-fetch'
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.
