Journathan

@Journathan·7 public vizzes

NY State Budget

This example visualizes New York State’s categorical aid budgets for Housing and Parks, Recreation, and Cultural Activities from 1980 to 2013 using two overlapping filled area charts rendered with SVG. The housing series appears in light blue, while the recreation series is drawn in semi-transparent black, allowing for visual comparison of budget fluctuations over time. The chart is generated with d3.v3, using time-scaled x-axis and linear y-axis, with tooltips omitted but hover styling prepared on circles. The design emphasizes trends and contrasts between the two funding categories across the 34-year span.

Apr 26, 2015

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.

Apr 19, 2015

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.

Apr 19, 2015

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.

Apr 9, 2015

Loading thumbnail…

Water Consumption NY

This bar chart shows New York City’s daily water consumption from 1979 to 2009, with each bar’s width representing millions of gallons used per day. Sorted in descending order by year, the chart highlights a general decline in consumption over time. The visualization uses d3.v3 with SVG rendering, loading data from a CSV file via `d3.csv`. Bars are drawn as `rect` elements, with widths scaled directly from the numeric values and hover effects using CSS `fill-opacity` and a white fill. The data source is the provided CSV, which includes both total consumption and per-capita figures.

Apr 2, 2015

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates how to load a CSV file containing New York City water consumption data and log it to the browser console using D3.js v3. The page features a static, decorative SVG illustration of a water-themed icon alongside the heading "Water Consumption In New York City." The core functionality relies on the `d3.csv` method to asynchronously fetch and parse the external CSV file into an array of JavaScript objects. No chart is rendered from the data; instead, the visualization focuses on showcasing the data-loading process, with the console serving as the output for the parsed dataset.

Mar 28, 2015

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.

Mar 21, 2015