projet_1

100%

✓ Published0🌍 Public

Last edited Jan 5, 2018

Created on Jan 5, 2018

This interactive map visualizes hourly pedestrian sensor data across a city, with the view switching between 24 time-steps via buttons. It uses a Google Maps base layer with a custom D3 overlay to render each sensor as a brown circle sized by pedestrian count, and labels each location. The code employs D3.js for data binding and scaling, Google Maps’ OverlayView for projection, and SVG for markers, with data loaded from two CSV files.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

projet_1

This visualization displays hourly pedestrian counts across Melbourne city center using a Google Map with D3.js overlays. Circle markers, sized proportionally to pedestrian volumes, appear at sensor locations, with each hour selectable via buttons below the map. The code uses Google Maps API for the basemap, D3 v4 for data binding and SVG rendering, and d3.scaleSqrt to map count values to circle radii. Data comes from November 2017 pedestrian sensor readings and a corresponding sensor location CSV file.

EEssohanamKouyou

89% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

70% match

Loading thumbnail…

Untitled

This example displays bar charts of pedestrian traffic counts in Seoul districts, with buttons to switch between views by day of the week, time period, and age group. The visualization uses d3.v3 with SVG rendering, loading CSV data via d3.csv and sorting bars by descending count. It applies d3.scale.linear for the x-axis and d3.scale.ordinal with rangeRoundBands for the categorical y-axis.

JJIN-wj

69% match

Loading thumbnail…

Class 10

This interactive map of Washington, D.C., overlays bike-sharing stations, hiking trails, and points of interest onto a zoomable Mercator projection. Users can hover over red station markers or green trail paths to see tooltips with addresses, bike counts, or trail lengths. Built with D3 v4, the example uses `d3.geoMercator` and `d3.geoPath` to render geographic features, while `d3.zoom` and `d3.tile` provide a smoothly scaling tile-based view. Data is loaded from three remote JSON files hosted on GitHub, and the interface supports mouse-based panning and zooming.

AAnaMal08

68% match

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu

67% match

Loading thumbnail…

proyecto Jerónimo

This example combines Mapbox GL with D3 to render a small set of geographic points from a CSV file (dots.csv) as circles on an interactive map. A custom circle selector component allows users to click and drag to define a circular region, highlighting all dots that fall within it by changing their fill color. The code uses D3's data join and transitions for animations, alongside Mapbox GL's map projection and viewreset/move events for re-rendering.

MMarcosHiramRojasSosa

67% match

Loading thumbnail…

Project prototype v1

This interactive dashboard displays CO₂ emissions over time as a scatter plot, with each point colored by country using `d3.scaleOrdinal` and `d3.schemeCategory10`. A button toggles between the scatter plot and a world map rendered from an external SVG file. The scatter plot uses `d3.scaleLinear` scales and axes from `d3.axisBottom` and `d3.axisLeft`, while the map loads via `fetch` and applies randomly generated colors to regions. Data comes from a CSV file loaded with `d3.csv`.

BBrian Hulbert

67% match

Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

KKelsey Xu

67% match