fresh block

100%

✓ Published0🌍 Public

Last edited Feb 10, 2018

Created on Feb 10, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

96% 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

91% match

Loading thumbnail…

Work

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.

CChmits

82% 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

80% match

Loading thumbnail…

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

CChmits

76% match

Loading thumbnail…

fresh block

This example demonstrates a data-processing sketch for a bike-sharing dataset, computing a rough estimate of future bike availability at each station. The code loads station information from a `stations.json` file using `d3.json`, then iterates through the records to calculate a random correction factor based on the number of total and available bike stands. It outputs the intermediate values and the corrected estimate to the console, but does not render any visual marks on the SVG canvas. The SVG is created with `d3.select`, yet it only contains a static text prompt, as no actual visualization is produced.

CChmits

76% match

Loading thumbnail…

fresh block

This example shows a monthly time series as a simple line chart with circular markers for each data point, drawn using SVG. D3 v4 scales, a time parser, and a line generator map the dataset’s dates and values to positions. On mouseover, the code highlights the hovered circle in red, reveals its dashed vertical guide, and displays its numeric value with a font-size transition; mouseout reverses the effect. The data comes from a local JSON file, and all interactions rely on D3 selections and transitions.

AAminaSGitHub

70% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

70% match