Skip to main content
SimilarExport ZIP
100%

projet_1

✓ Published0🌍 Public
EEssohanamKouyou
Last edited Jan 5, 2018
Created on Jan 5, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/qsorel/'>qsorel</a>'s block: <a href='http://bl.ocks.org/qsorel/24cc5bb4ec6e921eea43075f70e686a8'>projet_1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

projet_1

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.

EEssohanamKouyou
89% match
Loading thumbnail…

Foot Traffic

This visualization maps estimated foot traffic across Manhattan, with each neighborhood polygon colored on a gradient from light to dark blue to indicate relative pedestrian volume. The map is rendered as an SVG using D3 v3, with a Mercator projection and topojson for geographic data. Color intensity reflects the average foot traffic rating per polygon, and a color bar provides a legend. The code uses `d3.json` and `d3.csv` to load the geographic and traffic data, then applies a linear color scale to fill each polygon.

MMelanieFreed
69% match
Loading thumbnail…

FIT5147 S1 2022 - DVP Project

This example presents a geographic visualization of data related to butterfly observations and crime routes in Victoria. It displays circles on a map representing locations, with circle radius and color (red or green) indicating butterfly counts, while blue lines depict routes with stroke width proportional to usage. The visualization uses D3.js v4 to load JSON data and render SVG elements, with interactive tooltips that appear on mouseover events. The tooltip provides detailed information about each location or route, including names, counts, and region identifiers.

XXzou0011
68% 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
68% match
Loading thumbnail…

FIT5147 S1 2022 - Programming Exercise 3: D3

The map shows butterfly survey locations and travel routes across Royal Park, Melbourne, overlaid on simplified boundary polygons with the Melbourne Zoo highlighted. It uses D3 v4 with d3.json to load GeoJSON boundary, location, and route data, and d3.geoIdentity with fitExtent to project the map, while d3.geoPath renders the boundary shapes. Markers and lines are drawn as SVG elements, and a tooltip container is included but not yet populated with interactivity. The data is adapted from the City of Melbourne’s 2017 butterfly biodiversity survey.

WWendyZW
68% match
Loading thumbnail…

1120所有堆叠图（右转-过街）

This stacked bar chart visualizes traffic flow across 27 lanes at an intersection, showing counts of pedestrians, non-motorized vehicles, and motor vehicles. The SVG rendering uses `d3.stack()` to create stacked segments for each lane category, with `d3.scaleBand` positioning the bars and `d3.scaleOrdinal` assigning colors from `schemeSet3`. A tooltip appears on mouseover, displaying the percentage each category contributes to the lane’s total. The data is embedded directly in the code, and the visualization includes axis labels and a custom legend.

Vvivianaaai@qq.com
67% 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
66% match
Loading thumbnail…

1116东南基础设施堆叠图

This visualization presents a stacked bar chart of pedestrian, non-motorized vehicle, and motor vehicle counts for a single lane (laneid 0), using a naive dataset embedded in the code. The chart uses D3 v6 to stack the three categorical keys via `d3.stack`, scales them with `d3.scaleLinear` and `d3.scaleBand`, and colors each segment with `d3.schemeSet3`. An HTML legend is built with D3 selections, and axes are rendered with `d3.axisLeft` and `d3.axisBottom`. The SVG rendering includes margins and a main group for coordinate placement.

Vvivianaaai@qq.com
66% match