Work

100%

✓ Published0🌍 Public

Last edited Feb 6, 2018

Created on Feb 6, 2018

A geographic map of bike-share stations in Lyon overlays a pie chart showing the proportion of a day spent in sky, sunny, or shady conditions. The visualization uses Mapbox.js for the basemap and D3.js for the pie chart, SVG rendering, and a color legend. Station data from a GeoJSON-like file includes real-time availability, while the pie chart’s hardcoded proportions drive the graphic.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

An interactive map of bike-share stations in Lyon displays each station as a circle whose position is projected onto a Mapbox-backed Leaflet map using D3. Loading station data from a local JSON file, the visualization animates circle emergence and provides a previsions function that appends a separate bar chart, though its data binding is incomplete. The map layer uses D3 to append an SVG overlay, and hovering interactions are defined for tooltips, though the chart itself is not fully implemented.

CChmits

82% match

Loading thumbnail…

fresh block

A map of Lyon displays bike-sharing station locations as animated dots that grow on load, colored by availability status. The visualization pairs a Mapbox.js and Leaflet map with D3.js to project station coordinates onto an SVG overlay layer. Hovering over a dot opens a tooltip with station details, while the data also supports an accompanying bar chart of station metrics. Station information comes from a JSON file and updates via D3 transitions, with a d3-legend library included for potential map legends.

CChmits

82% match

Loading thumbnail…

fresh block

An interactive map visualizes the real-time availability of bikes and stands at Vélo'v stations in Lyon, France. The map renders station locations as circles on a Mapbox base layer, with a tooltip that appears on hover. The code uses the Mapbox.js API to display the map and D3.js to handle data binding and SVG rendering, including transitions that animate the circles' radius on load.

CChmits

80% match

Loading thumbnail…

fresh block

This visualization displays bicycle and docking station availability in Lyon, France. The data includes station locations from a JSON file and time-stamped availability counts from CSV files. The code uses D3.js (version 4) to render an SVG visualization. It loads the data files and creates an interactive display showing the dynamic changes in bike and slot availability over time.

MMarineRu

76% match

Loading thumbnail…

Many many many Points with D3 and leaflet

This visualization combines D3.js v4 and Leaflet to display a large set of points representing bike stations in Lyon. The map uses Leaflet's tile layer for the background and D3's `geoPath` and `geoTransform` to project GeoJSON station data onto the map as SVG points. Hovering over a station triggers its hover style, and the opacity of the points is determined by a station grouping property. The code loads station and trip data from JSON and CSV files, and re-renders the points on map movement.

CChmits

75% match

Loading thumbnail…

VisuVelov

VisuVelov visualizes the availability of bikes and docks at Lyon's Velo'v stations on a map. The visualization shows each station as a point, with its color or size likely representing the current number of available bikes or docks based on timestamped data. It uses D3.js v4 to render the map with SVG, combining geographic station coordinates from a JSON file with real-time availability data from CSV files. The map updates over time to show the dynamic state of the bike-sharing network.

MMarineRu

73% match

Loading thumbnail…

Stylised Scatter Chart with React & D3

A React-based scatter chart visualizes hourly Velib bike availability in Paris, aggregated from a remote CSV via `d3.csv` and `d3.rollups`. The SVG rendering uses `d3.scaleTime` for the x-axis (September 6–18, 2021) and `d3.scaleLinear` for the y-axis, with circles sized and positioned by bike counts. D3 generates tick marks, while React components (`AxisBottom`, `AxisTop`, `Marks`) handle layout, and a dropdown filters data options.

MManon ROMAIN

68% match

Loading thumbnail…

Stylised Bar Chart with React & D3

This stylized bar chart displays the total number of available bikes per hour, aggregated from a CSV file of Vélib’ station data. Built with React and D3 v7, the visualization loads the dataset via `d3.csv`, groups entries with `d3.rollups`, and sorts the results to highlight the top ten busiest hours. The code uses `d3.scaleBand` and `d3.scaleLinear` to position colored rectangles, with SVG axes and labels rendered through custom React components, all styled with the Poppins font.

MManon ROMAIN

68% match