Essay

100%

✓ Published0🌍 Public

Last edited Jul 30, 2018

Created on Jul 30, 2018

This visualization presents NYC 311 service request data from August 1–10, 2016, showing the most common complaint types, the number of complaints filed, and the agencies responsible for resolving them. A top-20 horizontal bar chart ranks complaint categories, a second top-10 bar chart ranks responsible agencies, and a glossary table provides agency acronyms with website links. Built with D3.js, the bar charts use d3.scaleBand and d3.scaleLinear, include sortable triggers for ascending or descending order with transition.attrTween, and display tooltips on hover.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

NYC 311 Calls by Responsible Agency

This visualization displays the volume of NYC 311 complaints assigned to each responsible agency, using horizontal bars whose lengths correspond to complaint counts. Users can reorder the bars by clicking buttons to sort the data ascending or descending by count. The chart is built with D3.js (v3), using a standard linear scale for bar widths and SVG for rendering. Animated transitions smoothly rearrange the bars on each sort, while a custom jQuery-based tooltip reveals the agency name and exact complaint count on hover.

QQnassiri

83% match

Loading thumbnail…

NYC 311 Calls by Complaint Type

A horizontal bar chart shows the volume of NYC 311 complaints by type, with each bar’s length proportional to the count and an approximate value label. The chart loads JSON data from `ComplaintType_Ungrouped.json` via `d3.json`, maps counts to pixel widths with a linear `d3.scale.linear`, and renders rows as SVG `rect` and `text` elements. Buttons trigger `sortAndUpdate`, which re-sorts the data by count and uses `transition.attrTween`-style delays and durations to animate bars into their new positions. A custom tooltip displays exact complaint and count on mouseover.

QQnassiri

81% match

Loading thumbnail…

NYC Water Quality Complaints

This interactive tree diagram visualizes NYC water quality complaints, organized hierarchically by borough, complaint reason, and time period. The node label shows each category’s name and complaint count, while the circle size encodes the complaint total. Users can click any node to collapse or expand its sub-branches, with smooth 750ms transitions animating the layout. Built with D3 v4, the visualization uses `d3.json` to load remote data and `d3.tree()` to compute the layout, rendering nodes as SVG circles and links as curved paths.

KKewei-Liu

73% match

Loading thumbnail…

311 Calls

A scatter plot titled "311 Data: Waste in The Mission" displays the relationship between time (on the x-axis) and service request IDs (on the y-axis) for waste-related 311 calls. Using D3 v5, the code loads a CSV dataset from VizHub, applies linear scales via `d3.scaleLinear`, and renders circles with a fixed radius. It constructs axes using `d3.axisLeft` and `d3.axisBottom` with grid lines, and displays the data as red, semi-transparent circles within an SVG canvas.

AAnna Callahan

68% match

Loading thumbnail…

Untitled

This interactive bar chart displays bias-motivated incidents in NYC for 2020 and 2021, with buttons toggling between the two years. The visualization uses D3.js v7 within an HTML page, rendering as an SVG. It fetches CSV data from a GitHub repository and animates bar height, position, and axis transitions over one-second durations using D3’s scaleBand, scaleLinear, and transition methods. The chart highlights changes in incident counts across bias categories.

RRona Xu

67% match

Loading thumbnail…

Fork of NYPD Complaints - Age of Officer

This example is a stacked bar chart of over 12,000 civilian complaints against NYC police officers, broken down by the officer’s age at the incident. Colored segments distinguish the type of complaint (e.g., force, discourtesy), with the total counts on the vertical axis. It renders using the Vega-Lite API and D3.js to fetch data from a CSV, map the fields, and configure the chart’s appearance, including the dark axis labels and tooltips. The dataset originates from ProPublica and the NYC Civilian Complaint Review Board.

EEmin

67% match

Loading thumbnail…

DV_Project_13

This dashboard displays Boston incident data through three interactive charts: a horizontal bar chart of the top ten offense types, an area chart showing incident distribution across the 24 hours of the day, and a pie chart of incidents by police district with percentage labels. Built with D3 v7, the code uses `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for the bar and area charts respectively, and `d3.area` with `curveMonotoneX` for the hourly trend. A responsive CSS grid arranges the chart cards, with data loaded from a remote CSV file.

GGOPI MUPPURI

67% match

Loading thumbnail…

NYC Crash Bar Chart with React & D3

This bar chart visualizes the number of vehicle collisions in New York City across the 24 hours of a day, breaking down each hour's total into stacked segments for injuries, deaths, and other crashes. The chart uses React to manage the SVG and window resizing, while D3's `scaleLinear`, `axisBottom`, and `stack` APIs handle the data scaling, axes, and stacked bar construction. Data is loaded from a local CSV file.

JJose Morales

67% match