NYC 311 Calls by Complaint Type

100%

NYC 311 Calls by Complaint Type

✓ Published0🌍 Public

Last edited Jul 30, 2018

Created on Jul 30, 2018

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.

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

86% match

Loading thumbnail…

Essay

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.

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

75% 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

72% match

Loading thumbnail…

NYPD Complaints - Age of Officer

This stacked bar chart shows the number of civilian complaints against NYPD officers by officer age at the time of incident, with colors distinguishing complaint types. The visualization uses the vega-lite-api library, with D3’s `csv` loader to fetch data from a gist containing over 12,000 records originally sourced from ProPublica and New York City’s Civilian Complaint Review Board. The chart encodes age on the x-axis, complaint count on the y-axis, and complaint type via color. The code implements automatic sizing and tooltips through vega-tooltip, with a custom config adjusting axis ticks and label styling.

JJorge Emilio Zapata Godoy

72% match

Loading thumbnail…

NYPD Complaints - Age of Officer

This stacked bar chart shows the number of NYPD civilian complaints by officer age, with colors distinguishing complaint types via a legend. Built with the vega-lite-api and d3.v5, it loads a CSV of over 12,000 complaints from ProPublica. The visualization uses `vl.markBar()` with x-position for age, y-count for totals, and color encoding for complaint type, rendered through vega-lite’s SVG output.

RRudy Shayganfar

72% match

Loading thumbnail…

Fork of NYPD Complaints - Age of Officer

This stacked bar chart shows the number of civilian complaints against NYPD officers by officer age at the time of the incident, with each bar segment colored by complaint type. The visualization uses the vega-lite-api library to construct a bar mark with an x-axis encoding for the officer age field (`mos_age_incident`), a y-axis count, and color encoding for the complaint type (`fado_type`). Data comes from a CSV of over 12,000 complaints sourced from ProPublica, loaded via d3.csv, and rendered with vega and vega-lite, with custom axis styling from a config file.

Ffaqihisaninja

70% match

Loading thumbnail…

NYPD Complaints - Complainant and Officer Ethnicity

This stacked bar chart visualizes the number of complaints filed against NYPD officers, segmented by complainant ethnicity and colored by the officer's ethnicity. Built with the Vega-Lite API, it uses the `.markBar()` method to encode the complainant ethnicity on the x-axis, the count of complaints on the y-axis, and the officer ethnicity as the color channel. The visualization loads its data from a CSV file hosted on GitHub, originally sourced from ProPublica’s dataset of over 12,000 civilian complaints, and customizes axis styling via a config object for improved readability.

RRudy Shayganfar

69% match