Skip to main content
SimilarExport ZIP
100%

NYC Water Quality Complaints

✓ Published0🌍 Public
KKewei-Liu
Last edited Apr 27, 2018
Created on Apr 27, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

Water Consumption In New York City

The visualization displays New York City’s water consumption across years, mapping population against total daily water use, with each circle’s size encoding per-capita gallons per day. It shows how consumption metrics change over time while allowing interactive inspection via hover tooltips that reveal exact values for year, population, and water usage. Built with D3 v4, it uses `d3.scaleLinear` for axes and radius, `d3.axisBottom` for the time axis, and underscore templates for tooltip content. Data comes from NYC OpenData, rendered as SVG circles with mouseover events.

FFasani
73% match
Loading thumbnail…

Water Consumption NY

The visualization shows how New York City’s water consumption changed over time, comparing total millions of gallons per day against per-capita gallons per person per day. It uses D3 v3 to render an SVG scatterplot where each circle represents a year, with hover tooltips and a sort-then-animate transition that reveals the chronological order. The x-axis and y-axis are drawn using `d3.svg.axis`, while the data is loaded from a CSV file and mapped through linear scales. The circles animate from large gray markers to smaller dark ones, highlighting the downward trend in both metrics from 1979 to 2009.

JJournathan
73% match
Loading thumbnail…

Water Consumption In New York City v2

This visualization plots New York City’s annual water consumption data as a scatterplot, with each circle representing a year. The x-axis shows the year, while the y-axis maps population, and the circle radius encodes average gallons of water used per person per day. Hovering over a circle reveals a tooltip with the year, per-capita usage, total million gallons per day, and population. The chart uses D3 v4 with SVG rendering, scales for positioning and radius, and a template for the tooltip. Data comes from the NYC OpenData portal.

FFasani
73% 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
73% match
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
73% match
Loading thumbnail…

Water Consumption NY

This visualization tracks New York City’s daily water consumption from 1979 to 2009, comparing total millions of gallons used against per-capita gallons. It uses D3.js v3 with SVG circles and transitions, animating the data points into a sorted scatterplot along time-based axes. The chart relies on d3.csv, d3.svg.axis, and d3.scale.linear, with hover effects and animated reordering. The dataset, sourced from DATA.GOV via a Gist, is rendered on a light blue background with a clean, minimal aesthetic.

JJournathan
73% match
Loading thumbnail…

Water Consumption NY

This horizontal bar chart shows New York City’s annual water consumption from 1979 to 2009, with each bar representing a year’s average million gallons per day. It uses d3.csv to load the data, d3.scale.linear and d3.scale.ordinal for positioning, and d3.svg.axis for both axes. Rectangles render as SVG bars with hover tooltips via the title element, while the x-axis measures consumption and the y-axis lists years in descending order. The source is DATA.GOV, and the design emphasizes the overall decline in usage over time.

JJournathan
71% match