Skip to content

Instantly share code, notes, and snippets.

View phvaillant's full-sized avatar

phvaillant

View GitHub Profile
@phvaillant
phvaillant / index.html
Created October 7, 2016 04:31
Path transition (time scale)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
@phvaillant
phvaillant / index.html
Last active October 10, 2016 05:07
Highlight neighborhood when hovering on names
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<style>
#mapid {
width: 80%;
height: 100%;
@phvaillant
phvaillant / L.Polyline.SnakeAnim.js
Last active October 11, 2016 02:48
Add markers and route from markers array
///// FIXME: Use path._rings instead of path._latlngs???
///// FIXME: Panic if this._map doesn't exist when called.
///// FIXME: Implement snakeOut()
///// FIXME: Implement layerGroup.snakeIn() / Out()
L.Polyline.include({
// Hi-res timestamp indicating when the last calculations for vertices and
// distance took place.
@phvaillant
phvaillant / L.Polyline.SnakeAnim.js
Created October 11, 2016 23:38
Show popups on snake path - leaflet
///// FIXME: Use path._rings instead of path._latlngs???
///// FIXME: Panic if this._map doesn't exist when called.
///// FIXME: Implement snakeOut()
///// FIXME: Implement layerGroup.snakeIn() / Out()
@phvaillant
phvaillant / index.html
Last active October 16, 2016 00:20
Trying to implement progress bar for groups of clusters
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0-rc.1.0/MarkerCluster.css" />
@phvaillant
phvaillant / concept-context.html
Last active January 25, 2019 14:38
<ods-dataset-context context="firstcontext,secondcontext" firstcontext-dataset="nobel-prize-laureates" firstcontext-domain="public" secondcontext-dataset="nobel-prize-laureates" secondcontext-domain="public">
<ods-chart align-month="true">
<ods-chart-query context="firstcontext" field-x="gender" maxpoints="0" sort="serie1-1">
<ods-chart-serie expression-y="id" chart-type="pie" function-y="COUNT" color="range-custom" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
<ods-chart align-month="true">
@phvaillant
phvaillant / concept-context-2.html
Created January 25, 2019 14:39
<ods-dataset-context context="onlyonecontext" onlyonecontext-dataset="nobel-prize-laureates" onlyonecontext-domain="public">
<ods-chart align-month="true">
<ods-chart-query context="onlyonecontext" field-x="gender" maxpoints="0" sort="serie1-1">
<ods-chart-serie expression-y="id" chart-type="pie" function-y="COUNT" color="range-custom" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
<ods-chart align-month="true">
@phvaillant
phvaillant / concept-css.html
Created January 25, 2019 14:43
<div style="background-color: lightblue;
font-size: 40px;
text-align: center;
width: 100%;
padding-top: 65px;height:200px;">
Big and centered text within a tall and wide coloured div
</div>
@phvaillant
phvaillant / concept-css-2.html
Created January 25, 2019 14:44
<div class="thebox blue">
Blue Box
</div>
<div class="thebox red">
Red Box
</div>
<div class="thebox green">
Green Box
@phvaillant
phvaillant / concept-css-2.css
Last active January 25, 2019 14:49
concept-css-2.css
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.red {
background-color: salmon;