Skip to content

Instantly share code, notes, and snippets.

View jgaffuri's full-sized avatar

Julien Gaffuri jgaffuri

View GitHub Profile
@jgaffuri
jgaffuri / README.md
Created May 2, 2020 17:15 — forked from gisminister/README.md
Markercluster pie charts

The map shows traffic accidents recorded in Oslo, Norway, for the year 2013.

The Leaflet Markercluster plugin is wonderful. Since the markerclusters are divIcons you can put whatever you want inside them using the iconCreateFunction. I wanted my clusters to reveal more information than just the marker count and figured a pie chart would do the job. So I told the iconCreateFunction to do some D3 magic and this is the result.

The example is a bit more complicated than necessary due to how my dataset is structured. But if you take a look at the defineClusterIcon() function you'll see that I use d3.nest() to build a dataset for the pie chart based on a given property from all the cluster's children. Then I pass this dataset over to the bakeThePie() function together with instructions on how to style the chart. The function returns svg markup which in turn is placed inside the divIcon.

Feel free to suggest improvements.

@jgaffuri
jgaffuri / Template_for_Indoor_Orienteering_OO_MAPPER.omap
Created May 1, 2020 07:38
Template for Indoor Orienteering OO MAPPER (by Valdis Janovs)
<?xml version="1.0" encoding="UTF-8"?>
<map xmlns="http://openorienteering.org/apps/mapper/xml/v2" version="7">
<notes></notes>
<georeferencing scale="100"><projected_crs id="Local"/></georeferencing>
<colors count="38">
<color priority="0" name="Purple" c="0.200" m="1.000" y="0.000" k="0.000" opacity="1.000"><spotcolors><namedcolor>PURPLE</namedcolor></spotcolors><cmyk method="custom"/><rgb method="cmyk" r="0.800" g="0.000" b="1.000"/></color>
<color priority="1" name="Purple 50%" c="0.100" m="0.500" y="0.000" k="0.000" opacity="1.000"><spotcolors><component factor="0.5" spotcolor="0"/></spotcolors><cmyk method="spotcolor"/><rgb method="spotcolor" r="0.900" g="0.500" b="1.000"/></color>
<color priority="2" name="Purple 30%" c="0.000" m="0.300" y="0.000" k="0.000" opacity="1.000"><spotcolors><component factor="0.3" spotcolor="0"/></spotcolors><cmyk method="custom"/><rgb method="cmyk" r="1.000" g="0.700" b="1.000"/></color>
<color priority="3" name="Red" c="0.000" m="1.000" y="1.000" k="0.000" opacity="1.000">
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
nuts3 val
LU000 100
AT111 465
HR035 345
PL515 269
UKK15 519
@jgaffuri
jgaffuri / .block
Last active December 24, 2019 09:54
Coastal margin with CSS stroke-width
license: EUPL-1.2
height: 800
scrolling: no
border: no
redirect: https://observablehq.com/@jgaffuri/coastal-margin-with-css-stroke-width
@jgaffuri
jgaffuri / .block
Last active December 24, 2019 08:19
Coastal margin with JSTS buffer 2
license: EUPL-1.2
height: 800
scrolling: no
border: no
@jgaffuri
jgaffuri / .block
Last active December 24, 2019 09:19
Coastal margin with JSTS buffer 1
license: EUPL-1.2
height: 800
scrolling: no
border: no
@jgaffuri
jgaffuri / .block
Last active January 11, 2021 11:48
NUTS download
license: EUPL-1.2
height: 330
border: no
@jgaffuri
jgaffuri / .block
Last active January 9, 2020 20:53
NUTS 3 urban-rural typology
license: EUPL-1.1
height: 780
scrolling: no
border: no
@jgaffuri
jgaffuri / .block
Last active January 9, 2020 20:52
Population change in Europe
license: EUPL-1.1
height: 780
scrolling: no
border: no