fresh block

modified for voronoi

This example visualizes SFPD incidents by neighborhood in 2016, combining both a bar chart of average incidents and a line chart showing incident trends over time. Each neighborhood’s bar and corresponding line are linked, with mouseover highlighting the active district and click filtering to show only that district’s line. The code uses d3.nest() to aggregate data by district, d3.scaleBand for the bars, d3.scaleTime for the date axis, and d3 transitions for interactive animations. The data is loaded from the SF Open Data JSON API, and the visualization renders with SVG.

88% match

fresh block

This visualization compares San Francisco dispatch call data across five neighborhoods using a series of radar charts. Each chart isolates a single region, plotting the count of calls by type—such as Alarm, Fire, and Non-life-threatening—on axes radiating from the center, with larger shapes indicating higher frequencies. The charts are rendered as SVG using the D3.js v3 library’s radar-chart module, with custom styling applied via CSS. The static charts are generated from hardcoded CSV data, with each neighborhood assigned a distinct color to aid comparison.

CCatherine-Yu

83% match

fresh block

A line chart displays daily crime counts across a 31-day period, with points connected by a single path. The visualization uses D3 v4 with `d3.scale.linear` for both axes, `d3.svg.axis` for ticks, and `d3.svg.line` to generate the path. Data from `numbers3.csv` is loaded via `d3.csv`, with day and crimes values parsed as numbers. An SVG canvas of 600x270 pixels, excluding margins, renders the axes and line, showing a fluctuating trend peaking around day 16 and dipping near day 25.

Fork of SF Arrests

This visualization maps the last week of arrests in San Francisco by neighborhood, showing each incident as a semi-transparent circle over a conic equal-area projection of the city. It uses D3 v5 with `d3.geoConicEqualArea`, `d3.geoPath`, and `d3.json` to load and render GeoJSON basemaps and streets alongside live SODA API query results filtered by date and resolution. Hovering highlights neighborhood outlines and displays tooltips. Data comes from the Police Department Incident Reports dataset.

Mmoslem-tg

SF Arrests

This example shows a static scatterplot of San Francisco arrest records, with each point representing an individual incident. The visualization uses a force-directed layout via `d3.forceSimulation` to position the points, which are rendered as SVG circles through `d3.select` and data joins. The data is loaded from a gist, and the chart arranges points without axes or geographic mapping, focusing on the clustering of arrests. The code relies on d3.v4 and SVG elements within a fixed 960×600 canvas.

fresh block

A horizontal bar chart displays the number of assault incidents by resolution type, with purple bars extending from a shared left axis. The visualization uses D3 v4’s `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, rendering SVG rectangles for each bar. Data from the CSV is loaded via `d3.csv`, and axes are drawn with `d3.axisBottom` and `d3.axisLeft`, including a grid of horizontal tick lines. The chart highlights that "NONE" is the most common resolution, while "EXCEPTIONAL CLEARANCE" and "UNFOUNDED" are the rarest.

Untitled

This interactive stacked bar chart visualizes fire and alarm response times across San Francisco neighborhoods from 2012 to 2019. A dropdown menu switches between years, and a checkbox toggles sorting by total average response time or alphabetical order. Built with D3 v5 in a React-free HTML page, it uses `d3.csv`, `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles and total-value labels. Axes transition smoothly via d3 transitions, while the data comes from a CSV file with `Group`, `Neighborhoods`, `Year`, and `Avg` columns.

Pphamiter253

fresh block

This horizontal stacked bar chart displays fire department staffing by district, breaking down personnel counts across seven roles such as TRUCK, ENGINE, and MEDIC. Built with d3.v4, it uses `d3.stack()` with `d3.stackOffsetNone` to compute layers, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. The SVG elements are colored via `d3.scaleOrdinal` with `d3.schemeCategory20`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with data loaded from a CSV file.