Skip to main content
SimilarExport ZIP
100%

Scatterplot - Events in Amsterdam

✓ Published0🌍 Public
LLaurens
Last edited Sep 17, 2019
Created on Sep 4, 2019
Forked from Customizing Axes

This scatterplot visualizes event locations across Amsterdam on latitude and longitude axes, with circles colored by category such as museums, parks, and beaches. Hovering over a circle reveals the event name in a tooltip and updates a preview image from the data. A legend allows filtering by category, while zooming adjusts the dot size. The visualization uses D3 v5 with SVG rendering, an ordinal color scale from `d3.schemePaired`, and d3.zoom for interaction, loading data from a JSON file containing multilingual event descriptions.

AI-generated description

Event sites in Amsterdam plotted on lat and long axes

Hover over a circle to see the name of the event site. Hover over categories to filter.

Todo

  • Port to D3V5
  • Clean up code
  • Modularize code
  • Fix axes on zooming behaviour
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot displays population counts for six Dutch cities, with country names on the y-axis and population on the x-axis. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-scale, `d3.scalePoint` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` for the axes. The code loads data from a CSV file using `d3.csv` and applies custom number formatting with `d3.format`. Styled circles represent each data point, with axis labels and a title added to the chart.

NNathan Neelis
73% match
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.

JJordy Fronik
72% match
Loading thumbnail…

Sized Points on a Map

This map of Amsterdam displays the locations of universities and colleges, shown as small yellow circles, layered over the city’s neighborhoods, which are colored by district. A tooltip appears on hover, and clicking a school highlights it while fading the others. The visualization uses D3 v5 with a Mercator projection (`d3.geoMercator`) and path generation (`d3.geoPath`) to render TopoJSON neighborhood boundaries. City data comes from a local JSON file, and interactions like zoom and tooltips are implemented with D3’s zoom and event handlers.

Kkylebot0
72% match
Loading thumbnail…

Scatter

A scatterplot displays eye-tracking fixation points over a map of Antwerp, with each red dot representing a fixation location from participant data. The visualization uses an SVG rendering approach where D3 v5’s `csv` loads the dataset, and `scaleLinear` with `extent` maps the mapped fixation X and Y coordinates to screen positions. Circles are appended via `selectAll`, with a fixed radius of 10 and 0.1 opacity, revealing clusters of visual attention across the image.

Ssoundaryasure
72% match
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.

Mmbergevoet
71% match
Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin
70% match
Loading thumbnail…

Scatterplot V1

A scatterplot displays the number of museum objects per geographic origin, with each circle positioned by a linear scale for amount and a point scale for origin. The visualization is rendered as SVG using d3.v5, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Data is fetched as JSON from a SPARQL endpoint at Network Digital Heritage, then mapped into an array for rendering. Circles are styled with a tomato fill and partial opacity.

NNick
70% match
Loading thumbnail…

Scatterplot V1

A scatterplot displays the number of museum objects per geographic origin, with each circle positioned by a linear scale for amount and a point scale for origin. The visualization is rendered as SVG using d3.v5, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Data is fetched as JSON from a SPARQL endpoint at Network Digital Heritage, then mapped into an array for rendering. Circles are styled with a tomato fill and partial opacity.

NNick
70% match