Scatter

100%

✓ Published0🌍 Public

Last edited Nov 12, 2020

Created on Nov 5, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Exploring RDW data - Basic chart

This example shows the parking capacity of various Park & Ride, carpool, and paid street parking facilities in the Netherlands, using a bar chart where each bar’s height represents the number of parking spots. The visualization is built with D3 v6 and rendered as SVG, using `d3.scaleBand` and `d3.scaleLinear` to map descriptions and capacities, and `d3.axisBottom`/`d3.axisLeft` for the axes. Data is loaded from a local JSON file via `d3.json`, with an optional remote RDW API path, and bars are appended as SVG rectangles.

SSergio Eijben

78% match

Loading thumbnail…

Scatterplot Version 2

This example shows how an interactive scatterplot lets users explore relationships between variables in the classic 1970s automobile fuel-efficiency dataset. Through dropdown menus, users select which numeric columns (such as miles per gallon, horsepower, or weight) map to the X and Y axes, and optionally group points by model year or origin via a categorical legend. A slider and numeric input control circle size and opacity. Built with React and D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with animated transitions on SVG circles, plus a custom tooltip that appears on mouseover, displaying the values for the currently selected axes.

SSchmittYannic

78% match

Loading thumbnail…

RDW Data cleaning

This interactive dashboard visualizes the distribution of P+R parking capacities across Dutch cities, using data from the RDW open data portal. A bar chart shows the number of P+R locations per city, and clicking any bar generates a pie chart breaking down the parking capacity of each facility within that city. The visualization uses d3.scaleBand and d3.scaleLinear for the bar chart, while the pie chart is built with d3.arc and d3.pie. All graphics are rendered as SVG, with React managing the page structure.

Llars-ruijs

78% match

Loading thumbnail…

Exploring RDW data - Basic chart

This visualization uses D3 v6 to explore a selection of RDW parking data from the Dutch national parking registry. It displays a horizontal bar chart showing the capacity of various Park & Ride, carpool, and paid street parking locations, with bars colored Darkmagenta via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The example loads data either from a local JSON file or a remote API proxy, and renders the chart as SVG using D3 selections and margin conventions.

SSergio Eijben

77% match

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.

JJordy Fronik

77% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong

77% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which columns map to the X and Y axes using D3.js dropdown menus, with circles animating to new positions via `transition().duration()` on axis changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, with the React framework managing the bubble chart component. Data loading is handled through `d3.csv`, and the animated transitions show each circle moving to its updated coordinates over two seconds.

Vvassil-one

76% match

Loading thumbnail…

Interactive barChart TRYING NEW TRANSITIONS

This interactive bar chart shows the parking capacity of P+R facilities across cities in the Randstad region of the Netherlands. A checkbox aggregates data for cities with multiple parking areas, updating the chart with smooth transitions. Built with D3 v6, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map city names and capacities, with SVG rectangles animated via `transition()`. Data is fetched from a JSON endpoint and cleaned through custom transformation functions. Axes update dynamically when the filter is toggled, re-rendering bars and tick labels.

NNathan Neelis

76% match