Linking a map to a timeline with d3

100%

Linking a map to a timeline with d3

✓ Published0🌍 Public

Last edited Jan 7, 2017

Created on Jan 7, 2017

A map of New York City displays sampled crime incidents as colored circles, with each color representing a crime type. A linked timeline below shows the frequency of these incidents over the year, and users can brush a time range on the timeline to filter the points displayed on the map. The visualization uses D3 v3 with a geographic projection (d3.geo.mercator) and path generator (d3.geo.path) to render borough boundaries, while the timeline uses an area chart and brushing. Data comes from a CSV file of sampled NYC crime records.

AI-generated description

forked from <a href='http://bl.ocks.org/williaster/'>williaster</a>'s block: <a href='http://bl.ocks.org/williaster/c66f80d5b95c4c48c4da'>Linking map data to an interactive timeline in d3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Linking a map to a timeline with d3

The visualization links a geographic map of New York City with a timeline to explore sampled crime data from 2013. It uses d3.v3's `d3.geo.mercator` projection and `d3.geo.path` to render borough boundaries as SVG paths, plotting each incident as a circle scaled by `d3.scale.sqrt` and colored by crime type. Selecting a time range on the timeline filters the map markers via a brush interaction. The map’s title, "NYC Crimes (select a time range)," clarifies the purpose. Data comes from a CSV file containing lat/lon and date fields, and the timeline encodes daily crime counts.

SSaminu

97% match

Loading thumbnail…

D3: NYC Crime Visualization

This interactive NYC crime visualization presents multiple coordinated views: a choropleth map of precincts, a pie chart of crime types, and bar charts showing age and race distributions. Users can click precincts or crime categories to filter across all views, with a reset button to restore the full dataset. The visualization uses D3 v6 with d3.geoMercator and d3.geoPath for the map projection, d3.arc for the pie chart, and d3.scaleBand for bar charts. Crime data is color-coded via a linear gradient legend and tooltip interactions.

Ooliverliuoo

81% match

Loading thumbnail…

NYC Crime

This interactive dashboard visualizes NYC crime data across multiple coordinated views. A map of NYC uses a D3 geoMercator projection and d3.geoPath to display precinct boundaries, with color intensity reflecting crime prevalence. Clicking a precinct updates a donut chart showing crime-type distribution and three bar charts breaking down offenses by victim age and race. Users can filter by crime type through the pie chart and reset all views with a button. The visualization uses D3 v6 with SVG rendering, animated transitions between states, and tooltips for additional detail.

YYuta555

79% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard visualizes NYC crime data as a linked map, pie chart, and bar charts. The map uses a `d3.geoMercator` projection with a `d3.geoPath` generator to render precinct boundaries, filled with a gradient legend. A pie chart using `d3.arc` breaks down crime types, while bar charts for age and race are built with `d3.scaleBand` and `d3.scaleLinear`. Users can click map regions or reset via a button, with linked views updating based on global indicators for precinct and crime type, all rendered as SVG with animation.

KKetaki789

79% match

Loading thumbnail…

Fork of NYC Crime

This interactive visualization presents NYC crime data through multiple linked views: a geographic map, a pie chart, and bar plots for age and race distributions. The map uses d3.geoMercator and d3.geoPath to render police precincts with a color gradient legend, while the pie chart breaks down crime types using d3.arc. Users can click precincts or crime categories to filter the entire dashboard, with a reset button to restore the default view. All charts update simultaneously through shared global state variables, and a tooltip provides additional details on hover. The visualization is built with D3 v6 and SVG, featuring animated transitions between states.

Nnikki81140

79% match

Loading thumbnail…

Fork of NYC Crime

This interactive dashboard presents New York City crime data through a synchronized map, pie chart, and bar plots. A choropleth map visualizes precinct-level data, while a donut chart breaks down crime types and bar charts show age and race demographics. Users can filter the visualization by clicking on map precincts or the reset button. The code uses D3.js v6 with `d3.geoMercator` projection, `d3.geoPath` for map rendering, and SVG for all graphics.

TTracyWangYQ

78% match

Loading thumbnail…

Fork of NYC Crime

This interactive visualization presents NYC crime data through a coordinated set of views: a geographically accurate map with a heatmap legend, a pie chart of crime types, and bar charts for age and race breakdowns. Users can click map precincts and toggle the reset button to filter all views dynamically. The map uses a Mercator projection with `d3.geoPath`, while pie and bar charts rely on D3 scales and arcs. Data is rendered as SVG with animated transitions, initialized from the `d3.v6` library.

FFouzia A.

78% match

Loading thumbnail…

Fork of NYC Crime

The visualization presents NYC crime data through a choropleth map that aggregates incidents by precinct, with linked subplots showing crime type distribution and breakdowns by age and race. Users can interact with the map and reset the view. The map uses D3’s `d3.geoMercator` projection and `d3.geoPath` for drawing precinct boundaries, while the pie chart and two bar charts are built with D3 scales and SVG groups. A legend and tooltip accompany the map.

Ttaiba-dv

78% match