Public
Edited
Mar 26
md`# experiment geo vis PROJECT`
vegaLite = require("vega-embed@6")
d3 = require("d3@6")
dataFile = FileAttachment("DataFileEUR.topojson").json()
dataFile2 = FileAttachment("europe.topojson").json()
CrimeMap1 = vegaLite({
width: 600,
height: 400,
data: {
values: dataFile,
format: {
type: "topojson",
feature: "DataFileEUR for GEOO copy"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
}
}
})
CrimeMap = vegaLite({ //plot data on a map (without zooming or panning)
vconcat: [
{
width: 600,
height: 400,
layer: [
{
data: {
values: dataFile,
format: {
type: "topojson",
feature: "DataFileEUR for GEOO copy" //name of object
}
},
projection: {
type: "mercator"
},
mark: "geoshape", //type of graph
encoding: {
fill: {
field: "properties.succ", //color - a property of obj is density
type: "quantitative",
title: "Successes",
//scale: {scheme: "greys"} //to convert to greyscale, remove for color
},
stroke: {value: "black"}, //adds stroke to map
tooltip: [
{field: "properties.country", title: "Country"},
{field: "properties.succ", title: "Country Successes"},
]
}
},
/*
{
data: {
values: vanCrime2
},
projection: {
type: "mercator"
},
mark: "circle",
transform: [
{filter: {selection: "brush"}}
],
encoding: {
longitude: {
field: "lng", //from dataset longtitude
type: "quantitative"
},
latitude: {
field: "lat", //from dataset latitude
type: "quantitative"
},
size: {value: 12},
color: {
scale: {
domain: ["Non-vehicular", "Vehicular"],
range: ['#ff0000', '#00aaff'] //2 different colors
},
field: "Offense Type",
title: "Offense Type",
type: "nominal",
},
tooltip: [
{field: "Offense Type", title: "Offense Type"},
{field: "Offense", title: "Offense"},
{field: "NEIGHBOURHOOD", title: "Neighbourhood"},
{field: "Date", title: "Date"}
]
}
}
*/
]
}
]
})
CrimeMap3 = vegaLite({
vconcat: [
{
width: 600,
height: 400,
layer: [
// Layer 1: European map (background)
{
data: {
values: dataFile,
format: {
type: "topojson",
feature: "DataFileEUR for GEOO copy" // name of object in the TopoJSON
}
},
projection: {
type: "mercator" // Mercator projection for geographical data
},
mark: "geoshape", // Shape of the geographical boundaries
encoding: {
fill: {
field: "properties.succ", // Color based on 'succ' property
type: "quantitative",
title: "Successes"
},
stroke: { value: "black" }, // Black border for each shape
tooltip: [
{ field: "properties.country", title: "Country" },
{ field: "properties.succ", title: "Country Successes" }
]
}
},
// Layer 2: Crime Data Points (on top of the map)
{
data: {
values: dataFile // Assuming your data points are in 'dataFile'
},
mark: {
type: "point",
filled: true,
size: 50 // Adjust point size as needed
},
encoding: {
longitude: { field: "longitude", type: "quantitative" },
latitude: { field: "latitude", type: "quantitative" },
color: { field: "crime_type", type: "nominal" }, // Color based on crime type
size: { field: "severity", type: "quantitative" }, // Adjust point size based on severity
tooltip: [
{ field: "crime_type", title: "Crime Type" },
{ field: "severity", title: "Severity" }
]
}
}
]
}
]
})
CrimeMap2 = vegaLite({ //plot data on a map (without zooming or panning)
vconcat: [
{
width: 600,
height: 400,
layer: [
{
data: {
values: dataFile,
format: {
type: "topojson",
feature: "DataFileEUR for GEOO copy" //name of object
}
},
projection: {
type: "mercator"
},
mark: "geoshape", //type of graph
encoding: {
fill: {
field: "properties.succ", //color - a property of obj is density
type: "quantitative",
title: "Successes",
//scale: {scheme: "greys"} //to convert to greyscale, remove for color
},
stroke: {value: "black"}, //adds stroke to map
tooltip: [
{field: "properties.country", title: "Country"},
{field: "properties.succ", title: "Country Successes"},
]
}
},
{
data: {
values: dataFile
},
projection: {
type: "mercator"
},
mark: "circle",
transform: [
//{filter: {selection: "brush"}}
],
encoding: {
longitude: {
field: "Y", //from dataset longtitude
type: "quantitative"
},
latitude: {
field: "X", //from dataset latitude
type: "quantitative"
},
size: {value: 12},
color: {
scale: {
domain: ["Non-vehicular", "Vehicular"],
range: ['#ff0000', '#00aaff'] //2 different colors
},
field: "Country",
title: "Offense Type",
type: "nominal",
},
tooltip: [
{field: "Offense Type", title: "Offense Type"},
{field: "Offense", title: "Offense"},
{field: "NEIGHBOURHOOD", title: "Neighbourhood"},
{field: "Date", title: "Date"}
]
}
}
]
}
]
})
vanCrime2 = {
let i=dataFile.features.length;
let j =0;
let k=0;
let temp = {};
let newCrime =[];
for(k=0; k<i;k++)
{
newCrime[k] = dataFile.features[k].properties;
}
return (newCrime);
}
L = require('leaflet@1.2.0')
html `<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
map = { //map that can zoom, pan, and click for tooltip (bindPopup)
let container = DOM.element('div', {style: `width:${width}px;height: ${width/1.6}px`});
yield container;
let map = L.map(container).setView([54, 15], 11.5); //set view in map to the longtitude and latitude of vancouver, then specify zoom lvl (11.5)
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright" >OpenStreetMap</a> contributors'
}).addTo(map); //tile layer
//add a layer to this map (can't owrk with topljason on leaflet, so use GeoJSON here)
let EurAreasLayer = L.geoJSON(data, { //data is VanAreas
weight: 2,
color: "#432"
}).bindPopup(function (layer) { //similar to tooltip
return layer.feature.properties.country;
}).addTo(map);
}
data = FileAttachment("EUR.geojson").json()
data
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.
