Some life added to hexagonal binning.
| license: mit | 
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "width": 600, | |
| "height": 400, | |
| "padding": 5, | |
| "signals": [ | |
| { "name": "x", "value": 75, | |
| "bind": {"input": "range", "min": 0, "max": 100, "step": 1} }, | |
| { "name": "y", "value": 75, | 
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "width": 800, | |
| "height": 400, | |
| "padding": 5, | |
| "signals": [ | |
| { | |
| "name": "defined", "value": true, | |
| "bind": {"input": "checkbox"} | 
| { | |
| "$schema": "https://vega.github.io/schema/vega/v3.0.json", | |
| "width": 600, | |
| "height": 400, | |
| "padding": 5, | |
| "signals": [ | |
| { "name": "x", "value": 200, | |
| "bind": {"input": "range", "min": 0, "max": 400, "step": 1} }, | |
| { "name": "y", "value": 25, | 
A choropleth map created in CartoDB.js linked to a D3.js strip plot. Open to view in full.
For now the link is only one way (hover/click on the map updates the strip plot). Data is also duplicated (it lives in CartoDB and in a csv).
Both map and plot are responsive and respond to resize. The map responsiveness comes from my block Responsive map with Cartodb/Leaflet.
Integretad live on tijd.be (Dutch) and on lecho.be (French).
My first experiment with Mapbox GL is a mock up of what astronauts in the ISS could see out of their window.
This map let's you fly over the latitude parallel of your choice. You can change
- the baselayer (hybrid, streest of satellite)
- the parallel you are flying over (pan left or right)
- the zoom (+ and - in upper right corner)
- rotation of view (the compass in the upper right corner)
Parallel but different interpolations for x (ease("sin")) and y (ease("back")) positions of circles. Creates a fountain or popcorn effect. Try more (~1000) circles for waterfall effect.
Inspiration: Concurrent transitions by @mbostock, Easing Checker
1000 circles bouncing of the edge in random direction. I don't think this works well on slow machines. Inspired by ease()-y as Math.PI by @alignedleft