Skip to content

Instantly share code, notes, and snippets.

View gisminister's full-sized avatar

Bård Romstad gisminister

View GitHub Profile
@gisminister
gisminister / index.html
Created September 3, 2015 11:34
Forslag partibarometer
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--START PÅ EMBEDKODE HER, REDIGER GJERNE PÅ TEKSTEN-->
<!-- Du kan godt redigere teksten i headeren eller beskrivelsen -->
@gisminister
gisminister / index.html
Created August 21, 2015 10:05
Med responsive fonter
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Embedded chart</title>
<link href="https://r.acdn.no/s3files/castor/arena/0.5.127/css/design0.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">
@gisminister
gisminister / index.html
Created August 21, 2015 09:24
Denne er bedre mario...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Embedded chart</title>
<link href="https://r.acdn.no/s3files/castor/arena/0.5.127/css/design0.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">
@gisminister
gisminister / index.html
Created August 21, 2015 08:35
Prototype ny embedside
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Embedded chart</title>
<link href="https://doc.api.no/data/styleguide/build/styleguide/public/css/design0.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
@gisminister
gisminister / README.md
Last active January 18, 2024 00:08
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.