Fork of Graph to london

100%

Fork of Graph to london

✓ Published0🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

This example visualizes London Underground stations as an interactive scatterplot, with each station positioned by its longitude and latitude coordinates from a JSON dataset. The visualization includes zoom and pan abilities, longitude and latitude axes, and station labels. The code uses D3 v4 with d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for grid lines, and d3.zoom for user interaction. Stations are rendered as orange SVG circles on a white background, with a toggle button to switch to a map view.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

London

A scatterplot maps Airbnb listings across London by latitude and longitude, with each point colored from red to green based on a normalized attraction index. The React app loads CSV data and passes it to a D3 visualization that renders axes, labels, and circles. D3's `scaleLinear` and `extent` set the geographic scales, while a custom color interpolation blends hex values between minimum and maximum index values.

MMatt Hagger

74% match

Loading thumbnail…

WWSD #11: Mapbox-gl + d3 SVG overlay

This example shows London Overground stations as animated dots on a zoomable, pannable Mapbox-gl map. The visualization uses a Mapbox-gl base map with an SVG overlay manipulated by d3, where each station appears as a small circle that grows from radius 1 to 6 pixels on load. The d3 geo-mercator projection is recalculated on every map move or viewreset event, using the map’s center, zoom, and a hardcoded tile size of 512 to keep the dots aligned with the underlying geography. The station locations come from a TopoJSON file fetched via d3.json, and the code relies on the `topojson.feature` conversion to render the point features.

663anp3ca

73% match

Loading thumbnail…

Fork of London Air

This interactive scatter plot visualizes monthly air quality measurements from the London Datastore (January 2010–August 2018), showing pollutant levels over time. Users can select which pollutant to display on the y-axis via a dropdown menu, while the color legend encodes the month and a second legend distinguishes Roadside versus Background measurement types. Built with D3 v5, the visualization uses `scaleOrdinal`, `scaleTime`, and `scaleLinear` for encoding, with clickable legends, animated transitions, and interactive tooltips. The color legend supports filtering by clicking, and the stroke legend uses `transition.attrTween` for updates.

Aall-over-yet

73% match

Loading thumbnail…

London

This scatter plot maps Airbnb listings across London by latitude and longitude, coloring each point red or green to distinguish between non-superhosts and superhosts. The visualization uses D3’s `scaleLinear` for axis scaling and `selectAll` to render circles, with React managing the data loading and state. Axis labels and ticks are added via custom functions (`renderAxis`, `renderAxisLabels`), while the underlying dataset includes property attributes like price and room type for contextual analysis.

MMatt Hagger

73% match

Loading thumbnail…

Fork of Europe Map ICE8

This example renders a static map of Europe using D3.js and React, displaying geographic boundaries as SVG paths. The visualization employs a Mercator projection centered on latitude 13 and longitude 52, with paths generated via `d3.geoPath`. GeoJSON features are fetched from a remote URL and styled with grey strokes and white fills. The code references React 16.9.0, D3 v5, and TopoJSON, though it appears incomplete, as it mistakenly defines a `LondonProjection` and loads data from a CSV URL that may not provide valid GeoJSON.

GGogineni44

70% match

Loading thumbnail…

Gist 93888ff1e2e309348986d5e9496196c7

This example visualizes the locations of Dutch train stations, distinguishing intercity stations from regular ones through color-coded points. The map is built using D3.js, combining `d3.forceSimulation` with a custom force that projects coordinates onto a map layout, while station markers are rendered as circles. The visualization uses `d3.geoPath` to draw the geographic context, and the underlying data comes from a CSV file listing station names, coordinates, and intercity status. The rendering approach relies on Canvas, with the simulation handling the placement of labels and points to avoid overlap.

JJulesBlm

70% match

Loading thumbnail…

Fork of reusable D3 Scatter Plot

This interactive map of the United States plots ten major cities as red circles, scaled by their netflow values. A click on any city draws semi-transparent black lines connecting it to all other cities, visually comparing its position relative to the entire set. Built with React and D3, the visualization uses a geoAlbersUsa projection from `d3.geoPath` to render the states, while mouseover transitions animate circle size and color, and the `topojson` library converts US Atlas data for state boundaries.

GGan Gao

70% match

Loading thumbnail…

Fork of Multiple Line plot with Dropdown

This visualization presents monthly air quality measurements for London from January 2010 through August 2018, using data from the Kings College London Air Quality Dataset in the London Datastore. A dropdown menu lets users select which pollutant to plot on the y-axis, while colored lines show annual trends for each year. Built with D3 v5, the example uses `scaleTime`, `scaleLinear`, `nest`, and `line` to generate smooth curves, with a transition animation updating the chart when the selection changes. The chart includes a color legend and axis labels.

DDonald Bagwell

70% match