maartenzam

CartoDB/Leaflet map that adapts map dimensions (height) and zoom level based on map width. Open in new window and resize to view responsiveness.

maartenzam

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

maartenzam

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

maartenzam

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)

maartenzam

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).

maartenzam

A responsive scatterplot, showing prevalence and survival rates of different types of cancer for both sexes. Use the buttons to zoom in on the rare types of cancer.

More explication here, live here (Dutch).

maartenzam

{
  "$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,

maartenzam

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 800,
  "height": 400,
  "padding": 5,

  "signals": [
    {
      "name": "defined", "value": true,
      "bind": {"input": "checkbox"}

maartenzam

{
  "$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,

maartenzam

license: mit