M

mbergevoet

@mbergevoet·20 public vizzes

Loading thumbnail…

Force Layout Eye Color

This example visualizes the distribution of eye colors in a dataset, with each circle representing a category such as blue, brown, or hazel. The circles start at the center and are pushed apart by a force simulation, settling into a non-overlapping cluster. The visualization uses d3.forceSimulation with center, charge, and collide forces to position the nodes, and renders them as SVG circles with a tooltip that displays the eye color on hover. The data appears to be manually defined in the code rather than loaded from an external source.

Loading thumbnail…

Alt Eye Color

A scatter plot visualizes the distribution of eye colors among a dataset of cars, drawing from the UCI Auto MPG repository. Each circle's radius encodes the count of a specific color, from blue and brown to more unusual variants like gold and white. The visualization uses D3's force-directed simulation, specifically `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceCollide` to arrange overlapping circles into a clustered layout. The `join` operation in a `ticked` function updates circle positions and radii dynamically within the SVG canvas.

Loading thumbnail…

New code structure

This interactive map visualizes where parking facilities are located relative to city centers across the Netherlands, with buttons to filter parking spots for Amsterdam, Den Haag, Rotterdam, and Utrecht. The visualization uses d3.geoMercator and d3.geoPath to project Dutch township boundaries from TopoJSON, while parking locations are fetched from the RDW Open Data API, cleaned, and drawn as blue circles around a red city center marker. The code relies on d3.select, d3.json, d3.zoom, and TopoJSON's feature extraction, with SVG rendering and transition-based animations for zoom resets.

Loading thumbnail…

D3 Map Nederland

This map of the Netherlands displays all Dutch municipalities as interactive regions. It uses the D3.js library with a Mercator projection for geographic plotting and the topojson library to parse the GeoJSON data. Each region is rendered as an SVG path element, and users can hover over a region to see its name and ID number via a tooltip.

Loading thumbnail…

D3 Map Nederland

This example displays an interactive map of Dutch municipalities, coloring each region in light blue with black outlines and highlighting areas in solid blue on hover. The visualization loads geographic data from a TopoJSON file and renders it as SVG paths using D3 v5 with a Mercator projection. It employs d3.json to fetch the data, d3.geoPath with geoMercator for drawing shapes, and includes d3-zoom.v2 for potential panning and scaling capabilities. The hover effect is implemented through CSS, and each municipality includes a tooltip showing its name and ID.

Loading thumbnail…

New filter and transform with gist from cities

This example shows parking areas distributed across the Netherlands, overlaid with the 25 largest cities. Users can zoom and pan the map, with buttons to reset the view or highlight specific area managers, though the filtering logic is incomplete. The visualization uses D3 v6 with a Mercator projection and d3.geoPath to render Dutch municipal boundaries from TopoJSON, while fetching parking-geometry data from the RDW open-data API and city coordinates from a GitHub gist. Circles are plotted using cleaned longitude–latitude pairs, with hover effects on the township paths.

Loading thumbnail…

New filter and transform

This example visualizes parking areas across the Netherlands on a map. It displays the data as small circles positioned using longitude and latitude coordinates, with a zoom feature via `d3.zoom` and a reset button. The map is rendered with SVG paths generated from TopoJSON data using `d3.geoPath` and a Mercator projection. The code filters the dataset by area manager ID, allowing users to switch between different managers' parking territories. Data is fetched from the RDW Open Data API, and city coordinates are retrieved from the HERE Geocoding API using `d3.json`.

Loading thumbnail…

Alternate version with checkboxes

This visualization plots parking areas across the Netherlands on a zoomable, pannable SVG map using d3.geoMercator and d3.geoPath. It loads geographic data from the RDW open dataset, cleans coordinates with custom parsing logic, and renders municipalities from a TopoJSON file. Checkboxes for three area managers (363, 518, 2448) trigger an updateAreaManager function that recolors and enlarges their associated points to red. A reset button restores the default zoom using d3.zoom and a transition.

Loading thumbnail…

Parking rate barchart

This bar chart visualizes parking rates across different area managers by comparing the calculated fare per step size. The chart uses a horizontal layout with rectangles scaled proportionally to the rate values, while country names are displayed on the y-axis. Data is fetched from two RDW API endpoints and combined asynchronously. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG elements.

Loading thumbnail…

Example Laurens

This example visualizes parking facility data from the RDW, showing the capacity of ten selected locations in the northern Netherlands. Bars represent each facility, with height indicating capacity, while facilities without capacity data are omitted. The visualization is built with D3 v6 and rendered as SVG, using `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling. Data is fetched remotely via a CORS proxy from the RDW API, with an option to load local test data instead.

Loading thumbnail…

Plotting points test

This visualization plots geographic points from Dutch parking data onto a map of municipalities. The code uses d3.geoMercator projection and d3.geoPath to render the map from TopoJSON data, while fetching point coordinates from an RDW Open Data API. Circles are drawn in red for each location, using projection to convert longitude and latitude into SVG coordinates. The map inherits municipal boundaries from the cartomap.github.io TopoJSON source with hover fill transitions.

Loading thumbnail…

Plotting points backup

This example displays parking location data as red dots on a map of Dutch municipalities, sourced from the RDW open data API. The map uses a Mercator projection with `d3.geoPath` to render the TopoJSON boundaries. Parking coordinates are extracted from the API’s geometry field, filtered, and plotted as small circles on the SVG. The visualization supports zooming via d3-zoom and includes interactive hover effects on the municipality paths.

Loading thumbnail…

Bowl of Fruit

A bowl of fruit visualizes a small dataset of fruits as colored circles, with apples in red and lemons in yellow. The example demonstrates enter, update, and exit selections in D3 v6, using `scaleOrdinal` for both color and radius. As the animation progresses, fruits are removed from the array and types change, triggering corresponding SVG circle updates via the `fruitBowl` module. The rendering relies on plain SVG elements and a React-based scaffold.

Loading thumbnail…

Smiley Face

This example draws a cheerful smiley face as a static SVG graphic, composed of a yellow circle, two elliptical eyes, rectangular eyebrows, and a curved mouth generated with the `d3.arc()` function. The figure is centered by translating a group element based on the SVG’s width and height. The right eyebrow animates by using D3’s `transition().duration()` to shift its vertical position, moving down and back up over two seconds.

Loading thumbnail…

Temperature San Fransico

This visualization shows the temperature in San Francisco over time, using a filled area chart to display the trend. The data is loaded from a CSV file and processed so that timestamps are parsed as dates and temperatures as numbers. The chart uses D3 v5’s `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with `axisBottom` and `axisLeft` to render grid lines and labels. The area is generated using `d3.area` with a `curveBasis` smoothing, and the SVG output includes axis labels and a title.

Loading thumbnail…

Parking Viz v1

This visualization shows parking rate data from the RDW open data API (endpoint `https://opendata.rdw.nl/resource/534e-5vdg.json`), fetched via JavaScript `fetch`. The code defines a `calcParkingRate` function to compute rates from fare parts but does not yet render any visual elements—the SVG remains empty. It uses D3 v6 selection (`select("svg")`) and destructured `arc` and `select` imports, with an HTML/CSS layout controlling page margins and overflow. The chart’s dimensions are parsed from SVG attributes for future drawing.

Loading thumbnail…

Cars Dot/Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower on the x-axis and weight on the y-axis. Each semi-transparent purple circle represents a car model, with overlapping points revealing density patterns. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load and render the data as SVG circles. Axis labels and a grid are drawn using `tickSize` and `tickPadding`, while the chart is positioned within margins via a translated group element.

Loading thumbnail…

Population Dotplot

This dotplot visualizes population sizes for ten countries as individual circles along a linear scale, with country names on the y-axis. The chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for y positioning, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV using `d3.csv`, with population values converted to numbers. The SVG rendering applies a steelblue fill and light gray gridlines, with tick labels formatted using D3’s `format` method.

Loading thumbnail…

Population Barchart

This horizontal barchart shows the population of the ten most populous countries, with values displayed in billions and sorted by descending population. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render an SVG. Bars are drawn as colored rectangles, with gridlines extending from the x-axis and country labels on the y-axis.

Loading thumbnail…

Map

This example displays a map of Dutch municipalities using an equirectangular-like natural Earth projection. It loads geospatial data from a public WFS endpoint using `d3.json` and renders each township as an SVG path with `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization simply draws the geographic boundaries without interactive features.