Jordy Fronik

@joordy·9 public vizzes

D3 Map Nederland

This example displays a zoomable map of Dutch municipalities using SVG paths colored light blue with dark outlines. Hovering highlights each region in blue, and a title tooltip reveals the municipality name and ID. The visualization uses D3 v5 with `d3.json` to load TopoJSON data, `d3.geoMercator` for projection, `d3.geoPath` for rendering, and `d3-zoom` for interaction. Data comes from the cartomap GitHub-hosted `gemeente_2020.topojson` file.

Nov 26, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth-style map of Dutch municipalities, rendered as SVG paths over a blue sphere. The map uses a Mercator projection centered on the Netherlands, with each municipality outlined and labeled with its official name via a tooltip. The code imports geoMercator, geoPath, and json from D3 v5, alongside topojson’s feature method, to load and convert a TopoJSON dataset of 2020 municipal boundaries from cartomap.github.io. Municipalities are appended as path elements, with their names shown on hover.

Nov 26, 2020

Loading thumbnail…

Scatter

This interactive scatterplot visualizes Dutch parking garage data from the RDW Open Data API, plotting car capacity and EV charger capacity against maximum vehicle height. Users can select different data columns from a dropdown menu to change the x-axis variable, triggering smooth animated transitions of the red circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct axes, while SVG circles transition between positions using D3's built-in transition system over a 3-second duration.

Nov 12, 2020

Loading thumbnail…

Tempature Area chart/

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG rendering uses D3 v6 to map timestamps to a time scale and temperature values to a linear scale, with a smooth curveBasis area fill. Axes are generated via axisBottom and axisLeft, including tick lines and labels for "Time" and "Temperature." The chart is built with scaleTime, scaleLinear, extent, and area, with data loaded from a CSV file and parsed into Date and numeric values.

Nov 3, 2020

Loading thumbnail…

Tempature Linechart/

This line chart shows one week of temperature in degrees Celsius in San Francisco, sourced from Data Canvas - Sense Your City. D3's `scaleTime` and `scaleLinear` map time and temperature values to the SVG canvas, with `axisBottom` and `axisLeft` generating the axes and gridlines. The data is loaded via `csv` and rendered as a smoothed path using `line` with `curveBasis`, drawn in hot pink with a 5-pixel stroke. The graph title and axis labels are added as SVG text elements.

Nov 3, 2020

Loading thumbnail…

Tempature scatterplot/

This scatterplot shows one week of temperature readings in San Francisco, with each circle representing a measurement plotted by time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v6’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and position the circles in an SVG. Data is loaded as CSV from Data Canvas - Sense Your City, with timestamps parsed as dates and temperatures converted to numbers. The chart includes labeled axes for time and temperature, plus a title.

Nov 3, 2020

Loading thumbnail…

Cars Scatterplot

A scatterplot of 1970s cars, plotting acceleration against weight, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data from the auto-mpg dataset, rendering as SVG within a React framework. Axes include tick marks and labels, with a title and axis titles added via SVG text elements.

Nov 3, 2020

Loading thumbnail…

Bar chart

This example displays a horizontal bar chart ranking the top 10 most populous countries, using population data loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders bars as SVG `rect` elements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting applied through `d3.format` to abbreviate numbers. The visualization is built with React, D3 v6, and SVG rendering.

Nov 3, 2020

Loading thumbnail…

Country scatterplot

This scatterplot displays the population of the top 10 most populous countries, with each circle’s horizontal position encoding population size and vertical position encoding country name. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for scales, and d3.axisLeft and d3.axisBottom for axes. Population values are multiplied by 1000 during preprocessing, and tick labels are formatted with d3.format to abbreviate large numbers. Rendered as SVG, the chart includes grid lines and styled circles with a steelblue fill.

Nov 3, 2020