campuswithCallboothsNYPD = {
const container = yield htl.html`<div style="height: 950px"></div>`;
const map = L.map(container).setView([40.80794694447276, -73.96214143872722], 16);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var phoneIcon = L.icon({
iconUrl: "https://cdn0.iconfinder.com/data/icons/map-locations-and-tourism/512/47-512.png",
//iconUrl: FileAttachment("telephone.png").url(),
iconSize: [21.12, 24.42], // size of the icon
iconAnchor: [16, 37], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -30] // point from which the popup should open relative to the iconAnchor
});
var gaurdIcon = L.icon({
iconUrl: "https://static.thenounproject.com/png/63811-200.png",
//iconUrl: FileAttachment("telephone.png").url(),
iconSize: [32, 37], // size of the icon
iconAnchor: [16, 37], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -50] // point from which the popup should open relative to the iconAnchor
});
L.geoJSON(columbia_university, {
onEachFeature: function(feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
}).addTo(map);
L.geoJSON(columbia_call_boxes, {
onEachFeature: function(feature, layer) {
L.marker([feature.geometry.coordinates[1],feature.geometry.coordinates[0]], {icon: phoneIcon}).addTo(map).bindTooltip('call box');
}
})
const crimeLayer = L.layerGroup().addTo(map);
$: if (options2) {
crimeLayer.clearLayers(); // Clear previous layers
// Filter Clery crime data
const filteredCleryData = data.filter(d => options2.includes(d.filterCat));
let finalFilteredCleryData = filteredCleryData; // Presume no time filter needed initially
// Filter Campus crime data
let filteredCampusCrimes = campusCrimes.filter(d => options2.includes(d.filterCat));
let finalFilteredCampusCrimes = filteredCampusCrimes; // Presume no time filter needed initially
// Apply time filter only if both startTime and endTime are set
if (startTime != null && endTime != null) {
finalFilteredCleryData = filteredCleryData.filter(d => {
const crimeTime = getHourFromTimeString(d.TIME);
return crimeTime >= startTime && crimeTime <= endTime;
});
finalFilteredCampusCrimes = filteredCampusCrimes.filter(d => {
const crimeTime = getHourFromTimeString(d.CMPLNT_FR_TM);
return crimeTime >= startTime && crimeTime <= endTime;
});
}
finalFilteredCleryData.forEach(d => {if (!isNaN(d.LATITUDE) && !isNaN(d.LONGITUDE)) {
const color = colorScheme(d.filterCat);
const polygon = L.polygon([
[d.LATITUDE - 0.0001, d.LONGITUDE],
[d.LATITUDE, d.LONGITUDE - 0.000077],
[d.LATITUDE, d.LONGITUDE + 0.000077]
], {
fillColor: color,
color: color,
weight: 1,
opacity: 1,
fillOpacity: 1
}).addTo(crimeLayer);
L.circle([d.LATITUDE + 0.00001, d.LONGITUDE], {
radius: 6.52,
fillColor: color,
color: color,
weight: 1,
opacity: 1,
fillOpacity: 1
}).addTo(crimeLayer).bindPopup(`<strong>Description:</strong> ${d.DESCRIPTION}`).bindTooltip(`<strong><u>Clery Crime:</u></strong> ${d.CRIME}<br> <strong>Date:</strong> ${d.TIME.substring(0, d.TIME.indexOf(" "))}<br><strong>Time:</strong> ${d.TIME.substring(d.TIME.indexOf(" "), d.TIME.length)}`);
}
});
finalFilteredCampusCrimes.forEach(d => {if (!isNaN(d.Latitude) && !isNaN(d.Longitude)) {
const color = colorScheme(d.filterCat);
L.rectangle([
[parseFloat(d.Latitude) - 0.0000385, parseFloat(d.Longitude) - 0.0000385],
[parseFloat(d.Latitude) + 0.0000385, parseFloat(d.Longitude) + 0.0000385]
], {
fillColor: color,
color: color,
weight: 1,
opacity: 1,
fillOpacity: 1
}).addTo(crimeLayer).bindTooltip(`<strong><u>NYPD Crime:</u></strong> ${d.OFNS_DESC}<br><strong>Date:</strong> ${d.CMPLNT_FR_DT}<br><strong>Time:</strong> ${d.CMPLNT_FR_TM}`);
}
});
}
return container;
}
campusCrimes[1].CMPLNT_FR_TM
workbook = FileAttachment("RouteSample.xlsx").xlsx()
workbook.sheetNames
routeSample = workbook.sheet(0, {
headers: false,
// range: "A1:J10"
})
WorseRoute.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
CleryNewCats.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.
import {Legend, Swatches} from "@d3/color-legend"
groupedCrimes = crimes.map(function(crime) {
if (crime === "Attempted Robbery") {
return "Robbery";
} else if (crime === "Motorcycle Theft") {
return "Motor Vehicle Theft";
} else if (crime === "Burglary Pattern") {
return "Burglary";
} else {
return crime;
}
});
adjustedColorList = colorList.filter((color, index) => index !== 1 && index !== 11);
colorList = ["#4e79a7","#f28e2c","#e15759","#76b7b2","#59a14f","#edc949","#af7aa1","#ff9da7","#9c755f","#bab0ab", "#d16f9b", "#6f6dc7"];
colorScheme = d3.scaleOrdinal(crimes, adjustedColorList);
columbia_university = FileAttachment("Columbia_University.geojson").json()
smallCrimeData = FileAttachment("ManhattanCrimesSmall.csv").csv()
cityCrimeData = FileAttachment("ManhattanCrimes.csv").csv()
campusCrimes = FileAttachment("ManhattanCrimesCampusRegion@1.csv").csv()
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.
