Skip to main content
Log in
C

Chubby Racoon

@RowinRuizendaal·5 public vizzes

Loading thumbnail…

HTML Starter

A bare HTML page demonstrates a static dataset of electric vehicle charging stations, displaying only the text "Hello HTML" in the body. The code includes a large JSON array of station objects with latitude, longitude, power, and availability data, but it is not rendered visually. The example uses plain CSS for styling and vanilla JavaScript to hold the dataset, highlighting the minimal setup required for an HTML starter template with no visualization libraries or charting APIs involved.

Nov 13, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It illustrates the customization of D3 axes, including a formatted tick label that converts values to billions and a custom axis label. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the bars and axes as SVG elements.

Nov 11, 2020
Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands highlights individual municipalities, rendered as SVG paths and colored dark with light strokes. The visualization uses `d3.geoPath` with a Mercator projection, and `d3.zoom` enables panning and zooming. Clicking a municipality triggers a smooth transition that fills the selected region in red and zooms in on its bounds. The geographic data comes from a TopoJSON file fetched from Cartomap, and the map animates using D3 transitions.

Nov 4, 2020
Loading thumbnail…

D3 Map Nederland

This interactive map of Dutch municipalities uses a Mercator projection and TopoJSON data from cartomap.github.io. Users can click on any municipality to zoom in and highlight it in red, with hover states turning regions orange. The visualization applies d3-zoom for pan and zoom interactions, d3.geoPath for geographic rendering, and SVG transitions for smooth animation.

Nov 3, 2020
Loading thumbnail…

D3 Map Nederland

A choropleth map of Dutch municipalities loads from a TopoJSON file and renders each region as an SVG path. Clicking a municipality highlights it in red and triggers a smooth, animated zoom using `d3.zoom` with a `geoMercator` projection and `geoPath`. Hovering changes the fill to orange. The zoom transition, defined with a duration and easing function, centers on the selected region, while the `zoom` event handler adjusts the group transform and stroke width.

Nov 3, 2020