R and JavaScript developer. Open to collaborations!
Public
Edited
May 28, 2023
viewof weaponSelect = Inputs.select(ukrCivharm.map(d => d.weapon_system).sort(),
{unique: true, label: "Weapon Type"})
map = {
const container = html`<div style="height:540px;">`;
yield container;
const map = L.map(container).setView([48.3794, 31.1656], 6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
mapIncidents.forEach(function (d) {
var marker = L.marker([d.latitude, d.longitude], {
icon: L.icon({
iconUrl: "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
}).addTo(map);
marker.bindPopup(d.date);
})
}
Plot.plot({
marks: [
Plot.barX(ukrCivharm, Plot.groupY({x: "count"},
{y: "type_of_area",
fill: "grey"}))
],
marginLeft: 100,
color:{
legend:true
}
})
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
mapIncidents = ukrCivharm.filter(d => d.weapon_system == weaponSelect)
ukrCivharm = {
// TODO change the file attachment to a fetch() call to get the latest json every time
// once everything else is finished and stable (if that's possible)
let ukrCivharm = await FileAttachment("ukr-civharm-2023-04-04.json").json();
ukrCivharm.forEach(function(d){ // handle various nested columns to make data analysis easier
d.type_of_area = d.filters[0];
d.type_of_area = Object.values(d.type_of_area)[1];
d.weapon_system = d.filters[1];
if(d.weapon_system == undefined){
d.weapon_system = "unknown";
} else d.weapon_system = Object.values(d.weapon_system)[1];
});
return ukrCivharm;
}
ukrCivharm.length
ukrCivharm
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
