pSpots2 =
{
let i=0;
let j=0;
for (i=0;i<parkingSpots.features.length; i++)
{
if (parkingSpots.features[i].geometry != null)
{
parkingSpots.features[i].properties.LATITUDE = parkingSpots.features[i].geometry.coordinates[1];
parkingSpots.features[i].properties.LONGITUDE = parkingSpots.features[i].geometry.coordinates[0];
console.log(i,parkingSpots.features[i].geometry.coordinates,parkingSpots.features[i].properties.LATITUDE);
}
}
return parkingSpots;
}
projection1 = d3.geoMercator().fitExtent([[10, 10], [800 - 10, 600 - 10]], pSpots2)
// top left bottom right geometry
lonLatPoint = parkingSpots.features[0].geometry.coordinates;
projectedPoint = projection(lonLatPoint) // the geographic coordinates are transformed into map coordinates
embed ({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 500,
"height": 300,
"autosize": "none",
"signals": [
{
"name": "selected", "value": null,
"on": [
{"events": "symbol:mouseover", "update": "datum"},
{"events": "symbol:mouseout", "update": "null"}
]
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 200000,
//"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}],
//"translate": [-1950 , -150],
// "fit": {"signal": "data('map')"},
// "size": {"signal": "[800,600]"}
"center": [-120.14,49.9]
// -123.14
}
],
"data": {
"name": "parkingspots",
"values": pSpots2,
"format": {
"type": "json",
"feature": "testparking"
},
"transform": [
{
"type": "geopoint",
"projection": "projection",
"fields": ["LONGITUDE", "LATITUDE"]
}
],
},
"marks": [
{
"type": "circle",
"interactive": false,
"from": {"data": "parkingspots"},
"encode":
{
"enter":
{
"shape": "circle",
"size": {"value": 100},
"fill": {"value": "#639"}
}
}
}
]
})
vancouverMap2 = embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{"name": "map",
"url": "https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json",
"format": {"type": "json", "feature":"vanstreets"},
"transform": [
{
"type": "geopath",
"projection": "projection"
}
]
}],
"scales": [],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 200000,
//"translate": [-1950 , -150],
// "fit": {"signal": "data('map')"},
// "size": {"signal": "[800,600]"}
"center": [-120.14,49.9]
// -123.14
}
],
"marks": [
{
"type": "path",
"from": {"data": "map"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"path": {"field": "path"}
}
}
}]
})
pathGenerator = d3.geoPath().projection(projection)
vanProjection = d3.geoMercator().fitExtent([[10, 10], [800 - 10, 600 - 10]], vanStreets)
vanPathGenerator = d3.geoPath().projection(vanProjection)
streetsMap = {
let svg = d3.select(DOM.svg(800, 600))
// construct the path elements using the D3 data join
svg.selectAll('path')
// data() expects an Array, so make sure to pass the features entry of our FeatureCollection
.data(vanStreets.features)
// select all data items that are not represented on the map yet, and add them
.enter()
.append('path')
// assign attributes to those new elements
.attr('d', vanPathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '0.5')
// pass to Observable to draw this block
return svg.node()
}
widthScale = d3.scaleLinear()
.domain([0,5]) // input values will be between 0 and 5
.range([0.3,4]) // output values should be between 0.3 (for the lowest input) and 4 (for the highest)
widthScale(2)
streetsMapDynamic = {
let svg = d3.select(DOM.svg(width, height))
svg.selectAll('path')
.data(streets.features)
.enter()
.append('path')
.attr('d', viennaPathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
// use a callback function to calculate the stroke width based on the 'w' property
.attr('stroke-width', function(d) {
// access the 'w' property and use our scale to calculate the correct width
return widthScale(d.properties.w);
})
return svg.node()
}
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.
