VP Iteration on First Visual

100%

VP Iteration on First Visual

✓ Published0🌍 Public

Last edited Feb 7, 2024

Created on Feb 7, 2024

This D3.js visualization displays New York City water consumption and population data from 1979 to 2022. It plots two lines over time: one black line for water consumption (in millions) and one red line for population, each scaled to its own y-axis using `d3.scaleLinear`. The SVG chart is rendered with `d3.line` for the paths, `d3.axisLeft` and axis label helpers from `@curran/axis-labels`, and a light gray inner rectangle background. Data originates from the NYC Open Data water consumption dataset.

AI-generated description

A simple scatter plot with D3 showing the Water Consumption in the City of New York Dataset. The X-axis shows the time scale from 1979 to 2022, while the the two lines differ from the Y-Axis. The black line shows the water consumption (in millions) by year, while the red line shows the population in New York City by year.

MIT Licensed

Similar vizzes

Loading thumbnail…

VP First Visual

This scatter plot shows the relationship between New York City’s water consumption and its population over time, using data from the NYC Open Data portal. Each point pairs annual consumption with population figures, plotted on linear scales with labeled axes. The visualization uses D3’s `scaleLinear` for positioning, `axisLeft` for the y-axis, and SVG circles with adjustable radius and opacity. A gray inner rectangle frames the plotting area, while the chart resizes responsively via `observeResize`, and axes and labels come from shared helper functions.

VVansh Patel

91% match

Loading thumbnail…

VP First Visual With Water Droplets

This animated scatter plot visualizes New York City water consumption and population data from the City of New York dataset, with each data point rendered as a water droplet shape using SVG path commands. The droplets drop into place sequentially via `transition().delay()`, scaling from zero to full size. A linear gradient fills each droplet with a water-like blue, while a background pattern displays a rain cloud image. Hovering a droplet reveals its year, consumption, population, and per-capita values through an HTML tooltip. The visualization uses D3 scales, axes, and custom SVG patterns to convey the relationship between consumption and population over time.

VVansh Patel

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

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

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

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

80% match

Loading thumbnail…

VP Dataset 1 (NYC Water Consumption)

This example displays the first record of New York City water consumption data from the NYC Open Data portal, showing fields like population, consumption in millions of gallons per day, and per-capita usage. The code parses the CSV file, converts numeric strings to numbers, and renders the first data object as formatted JSON text inside an HTML pre element. It uses JavaScript with the `JSON.stringify` method to display the structured data directly in the container.

VVansh Patel

79% match

Loading thumbnail…

MODULE1: Data Selection

The visualization tracks New York City’s annual water consumption from 1979 to 2009, contrasting total daily use in million gallons with per-capita gallons. It shows a clear downward trend in both metrics over three decades. The code uses D3.js with `d3.csv` to parse the gist-sourced CSV, then renders a dual-line chart via SVG paths and scales (`d3.scaleLinear`, `d3.line`). Hovering triggers a tooltip with `d3.mouse` and `transition.attrTween` for smooth updates, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The raw data is loaded directly from the linked `Water_Consumption_In_The_New_York_City.csv` file.

JJournathan

78% match