Published
Edited
Jul 3, 2020
2 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = d3.csv(
'https://raw.githubusercontent.com/gpachera/gian_public/master/csv_leaflet.csv'
)
Insert cell
fdata = data.filter(d => d['n_reviews']!=0)
Insert cell
Insert cell
exampleOfData = [51.5, 0.12, 0.5]
Insert cell
Insert cell
normalize = d3
.scaleLinear()
.domain([0, d3.max(fdata.map(d => d['n_reviews']))])
.range([0, 100]) // increase this number to change final scale values
Insert cell
choleraPoints = fdata.map(d => {
return [
+d['lat'],
+d['long'],
+normalize(d['n_reviews'])
];
})
Insert cell
md`### Find the center of the map`
Insert cell
(d3.extent(fdata.map(d => +d['lat'])))
Insert cell
xCenter = d3.mean(d3.extent(fdata.map(d => +d['lat'])))
Insert cell
yCenter = d3.mean(d3.extent(fdata.map(d => +d['long'])))
Insert cell
choleraMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', {
style: `width:${width}px;height:${width / 1.6}px`
});

// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;

// Now we create a map object and add a layer to it.43,7874; 11,2499
let map = L.map(container).setView([43.7874, 11.2499], 9);
let osmLayer = L.tileLayer(
'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
{
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);

let choleraLayer = heatLayer(choleraPoints).addTo(map);
}
Insert cell
md`# Appendix`
Insert cell
html`<link href='${resolve(
'leaflet@1.2.0/dist/leaflet.css'
)}' rel='stylesheet' />`
Insert cell
L = require('leaflet@1.2.0')
Insert cell
heatLayer = (L, require('leaflet.heat').catch(() => L.heatLayer))
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more