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