Peter Cordone

Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure, with each bar showing monthly kilowatt-hours segmented by account number. Built with D3.js v7, it uses `d3.stack()` to transform grouped data into stacked series, `scaleBand()` and `scaleLinear()` for axes, and `scaleOrdinal()` with `d3.schemeCategory10` for colors. The SVG rendering includes rotated axis labels, a title, and a legend, with tooltips implemented via SVG `<title>` elements showing per-account usage.

Feb 22, 2022

Radial Stacked Bar Chart With Brushing of Personal Electric Usage Data By Year for Account

A radial stacked bar chart visualizes monthly electric usage (total kWh) per account across multiple years, with each ring segment representing a year and each bar representing a month. A linked context bar chart shows yearly totals and includes a brush (d3.brushX) to filter the displayed date range. The code uses d3.scaleBand, d3.scaleRadial, d3.arc, and d3.stack to construct the visualization, with data loaded from a CSV file. SVG and canvas rendering are supported, and transitions animate updates when the brush or account menu changes.

Nov 12, 2021

Vega-Lite MFRED Hourly Kw vs Time Histogram

This visualization displays hourly electricity consumption in kilowatts over time, with individual aggregator groups colored distinctly and tooltips revealing their names. Built with the Vega-Lite API and D3, it transforms 15-minute CSV data from MFRED by grouping timestamps into hourly intervals and summing values across 26 aggregator channels. The bar chart uses `vl.markBar` with configurable axis styling and a dark color scheme, rendered as an SVG via Vega-Lite’s view engine.

Nov 9, 2021

MFRED Kw Histogram

This visualization displays a histogram of kW and kVAR measurements from the MFRED dataset, with individual aggregates (AG01 through AG26) distinguished by color. The bars are rendered using the vega-lite-api’s markBar with a black background and configured axes. The data is loaded via d3.csv from a GitHub-hosted CSV file, then grouped by hour using d3.group to compute totals. The chart uses D3 v5, Vega-Lite v4, and the vega-lite-api wrapper, with a custom tooltip handler for interactivity.

Nov 9, 2021

Vega-Lite MFRED Hourly Kw vs Time

This visualization plots hourly kilowatt readings from the MFRED dataset against time, with each of the 26 generator units (AG01 through AG26) colored distinctly by category. It uses the Vega-Lite API, registered with vega and vega-lite, to render point marks on an SVG canvas. The data is loaded via d3.csv, aggregated from 15-minute intervals into hourly totals using d3.group, and the chart auto-fits to the window size. Tooltips display the generator name on hover.

Vega-Lite MFRED Hourly Kw vs kVAR

This visualization plots hourly electrical power measurements from the MFRED dataset, comparing kilowatts (kW) against kilovolt-amperes reactive (kVAR) for multiple aggregated generator groups. Each point represents one hour of data, colored by generator group, with tooltips showing the group name. The code uses the Vega-Lite API with d3.v5 for data loading and grouping, converting 15-minute CSV data into hourly totals before rendering the scatter plot with configurable axis styling.

Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This stacked bar chart displays personal electricity consumption across three accounts in a three-family structure, using data from a two-year period. Users select an account from a menu, and the chart shows monthly usage totals stacked by billing year. The visualization is built with D3.js version 7.1.1, using components like `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The chart renders as SVG with transitions and includes interactive menu functionality driven by `dispatch` events.

Scatterplot of Personal Electric Consumption by Account

This scatterplot shows personal electricity consumption across three accounts at a three-family residence, plotting total kilowatt-hours against billing date over a two-year period. Each account is distinguished by color: red, blue, or green. The code loads CSV data from a GitHub gist and renders circles using D3 v6’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. It displays the data in an SVG canvas, with axes labeled ’Date’ and ’Usage kWh‘, and a title above the plot.

Vega-Lite MFRED Visualization KVAR vs KWh

This visualization plots kW against kVAR for each of 26 aggregate generators in the MFRED dataset, with points colored by generator ID to compare real versus reactive power output. It uses the Vega-Lite API with d3.v5 for data loading, transposing the CSV into per-generator records via `getData`. The chart applies custom axis and label styling from `config.js`, renders as an SVG through vega-tooltip, and displays 15-minute interval data across all generators.

Oct 29, 2021

Electric Bar Chart Radial Line Chart

This radial bar chart visualizes personal electric consumption across months and bill years, with each year’s usage represented as a colored ring segment around a circular time axis. A brushed bar chart below filters the displayed year range, while a dropdown menu selects between account numbers. The visualization uses D3 v7 with SVG for rendering, employing `d3.scaleTime`, `d3.scaleRadial`, `d3.lineRadial`, and `d3.brushX` for the interactive context chart. Data comes from a CSV file of electric account records, with usage measured in kilowatt-hours.

Oct 29, 2021

Electric Bar Chart Radial Brushing

This example visualizes monthly electric consumption for a selected utility account using a radial stacked bar chart. The circular chart displays monthly usage totals broken down by bill year, with a legend identifying the color-coded stack segments. A small context chart below provides a brushable timeline of yearly totals, allowing users to filter the radial chart’s date range by brushing across the stacked bars. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleRadial`, `d3.stack`, `d3.arc`, `d3.brushX`, and `d3.lineRadial`, while loading data from a CSV file hosted on GitHub.

Oct 29, 2021

Radial Line Chart Example

This radial line chart visualizes San Francisco daily temperature patterns across the calendar year, using data from the sfo-temperature.csv dataset. The chart displays four concentric radial areas, with the innermost band representing the average minimum and maximum temperatures (TAVG) in light steel blue, while the outer steel blue band shows the absolute minimum and maximum temperature ranges (TMIN, TMAX). The visualization uses d3.rollup to aggregate daily records into annual averages, d3.scaleUtc for angular positioning, and d3.lineRadial and d3.areaRadial for rendering the SVG paths with a closed linear curve.

Oct 26, 2021

Electric Bar Chart Account and Period Menu

Interactive menus in this D3.js visualization show household electricity consumption from a multi-account dataset displayed as a stacked bar chart. Users select an account from a dropdown menu, which filters the data by account number and updates the visualized two-year period. The chart uses d3.csv to load data and d3.stack, d3.scaleBand, and d3.scaleLinear to render stacked bars grouped by month, colored by bill year. Built as a reusable d3 component utilizing enter, update, and exit transitions with d3.transition for animated updates.

Oct 22, 2021

Simple Bar Chart

This simple bar chart displays nine data values as vertical green bars on an SVG canvas. Each bar responds to mouseover and mouseout events, smoothly transitioning its fill color to blue and back to green using D3 transitions. The visualization is built entirely with D3 v7 APIs, including `scaleBand`, `scaleLinear`, `selectAll`, and `join` to bind data and render rectangles. Axes are omitted, keeping the chart focused on the raw data values, which are also exposed as tooltips via appended `title` elements.

Oct 20, 2021

D3 Scatter Plot Business Formation Brushed

This D3 scatter plot visualizes US business formation by sector from 2004 to 2021, using red circles to highlight the manufacturing sector among black dots for all other sectors. It employs a brushable time-series interface with a small focus chart and a larger context panel, both rendered as SVG. The code loads data via `d3.csv`, aggregates values with `d3.flatRollup`, and scales axes using `d3.scaleTime` and `d3.scaleLinear`, while the `d3.brushX` component enables temporal selection.

Oct 20, 2021

D3 Scatter Plot Business Formation

This scatter plot visualizes US business formation by year and sector, with the manufacturing sector highlighted in red against all other sectors in black. Built with D3 v6, it uses `d3.csv` to load data from a GitHub Gist, then `d3.flatRollup` and `d3.sum` to aggregate monthly values by year and category. The visualization employs `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG circles for marks. Data spans from 2004 to 2021, showing periodic business formation trends across sectors.

Oct 19, 2021

Choropleth US Poverty 1980 to 2020

This interactive choropleth maps U.S. county-level poverty rates from 1980 to 2020, using color intensity to show geographic disparities over time. Built with D3 v7 and TopoJSON, it renders county polygons via `d3.geoPath` and applies a quantizing color scale with `d3.schemeBlues` to encode values. The visualization includes state borders for context and hover titles revealing county names and rates. Poverty data originates from the U.S. Census Bureau's historical tables, with geographic boundaries from a counties-albers-10m TopoJSON file.

Oct 19, 2021

Stacked Radial Bar Chart example.

This stacked radial bar chart displays the population distribution across seven age groups for each U.S. state, using concentric rings to encode values. The chart is rendered as SVG with D3 v7, using `d3.scaleBand` for angular positioning, `d3.scaleRadial` for radial distances, and `d3.stack` to create the layered segments. Color is assigned via `d3.scaleOrdinal`, with helpers for axis labels and a legend. Data comes from a CSV file with state-level census figures.

Oct 11, 2021

Fork of Scatter Plot For > 5 million Video Game Sales

A scatter plot displays video game sales across global, NA, EU, JP, and other regions, filtering to titles with over five million in global sales. Using D3 v6, it renders animated SVG circles that transition when users switch axes via dropdown menus built with a custom menu component. The reusable chart uses `selection.join` and `transition` from D3, with data loaded from a GitHub Gist CSV file.

Oct 6, 2021

Reusable Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three household accounts, broken down by billing month and bill year. Built as a reusable D3 component using `d3.stack`, `scaleBand`, and `scaleLinear`, it renders SVG bars with hover tooltips and a dropdown menu to filter by account. The chart also includes a legend, axis labels, and color encoding via `scaleOrdinal`, with data pulled from a CSV file.

Oct 6, 2021

Scatter Plot with Menus Electrical Data

A scatter plot displays electrical usage data for a single account, with dropdown menus to switch the X and Y axes between categorical fields like year and account. The visualization uses D3 v6 with reusable chart and menu components, leveraging `selection.join` for smooth enter-update-exit transitions and animated circle positioning over one second. Data loads from a CSV file, and axes scale linearly or by point depending on the selected variable type.

Oct 6, 2021

D3 Scatter Plot Socioeconomic

This scatter plot visualizes socioeconomic data from the US Census 2019-2010 American Community Survey, displaying employment counts by state and NAICS sector for 2019. The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load the data and `d3.scaleLinear` and `d3.scalePoint` for positioning. Points are plotted using the `Estimate` values for employed civilians, with `d3.axisLeft` and `d3.axisBottom` providing labeled axes. User interactions are not apparent, as the code focuses on static scatter plot generation.

Parse socioeconmic_data_states_2019-2010.csv

This example parses a US Census socioeconomic dataset covering states from 2010 to 2019, displaying basic file statistics such as size in kilobytes, row count, and column count. It shows how to load and inspect a CSV file using `d3.csv`, then formats the results into a text message rendered in a large `<pre>` element. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse` for comparison. The data source is a remote CSV file hosted on GitHub Gist, containing quantitative census attributes like employment, occupation, industry, and poverty rates.

Parse electricAccountsData.csv

This example parses a CSV file containing household electric consumption data, showing the file size in kilobytes, row count, and column count. Using D3 v5, the code loads the dataset via the `d3.csv` method and formats it with `d3.csvFormat`. It also demonstrates alternative loading approaches commented out, including `fetch` with `async`/`await` and a nested promise chain. The data source is a remote GitHub Gist containing three electric accounts with attributes like total kilowatt-hours, utility charges, and net meter credits.

D3 Stacked Barchart Example

This example shows a stacked bar chart of three soil-condition subgroups across multiple species groups, with a categorical color scale and labeled axes. D3 v7 loads CSV data from an external GitHub repository and renders the chart as SVG. The code uses `d3.stack()` to compute cumulative bar segments, then draws the rectangles with `d3.scaleBand` and `d3.scaleLinear` for positioning. A dropdown-like legend is absent, but the color mapping and axis ticks clearly communicate the subgroup breakdown per species.

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

First Draft Electric Bar Chart

This bar chart visualizes monthly electricity usage across multiple utility accounts, with bars colored by account number and highlighted in orange on hover. The chart is rendered with SVG using D3.js v6, employing `scaleBand` and `scaleLinear` for axes and positioning. It reads data from a CSV file via `d3.csv` and includes interactivity through D3’s `.on("mouseover")` and `.on("mouseout")` event handlers. Axis labels are added manually, while a legend is positioned within the SVG group, and transitions animate the bar color changes on mouseout.

Sep 28, 2021

Concentric circles chart using SVGt

A concentric circles chart displays two nested circles centered at the origin, rendered as an SVG viewBox with a range of -100 to 100. The outer circle has a radius of 50 and a fill of rgb(0,122,176), while the inner circle has a radius of 10 and a fill of rgb(162,207,225). The example uses the SVG `<circle>` element directly within an inline `<svg>` tag, with no JavaScript libraries or external data sources involved. It demonstrates a minimal, static visualization of hierarchical proportions through simple geometric layering.

Pie chart using SVG

This example shows a simple pie chart with two segments: a large blue circle and a smaller, lighter blue wedge overlay. It renders entirely as static SVG markup, using a `<circle>` element for the base and a `<path>` arc for the wedge. The path draws with an `M` command, an `A` arc command, and a `rotate(-90)` transform to position the wedge. No JavaScript libraries or data binding are involved; the chart is hard-coded in the HTML.

Bar Chart Bar using SVG Path Command

A single bar from a bar chart is rendered as two adjacent SVG rectangles, one wide and one narrow, demonstrating how SVG primitives build chart elements. The code uses raw SVG `rect` elements within an `svg` viewBox, rather than a JavaScript library like D3. The bar is drawn with a solid blue fill and a thinner light-blue stripe, suggesting a highlighted segment or axis marker. This example shows the simplest possible SVG path-based construction for a bar, with no scales, axes, or data binding, serving as a minimal starting point for chart creation.

Triangle Chart using SVG Path Command

The triangle chart uses two SVG <path> elements to draw filled triangular forms. The first path, filled with a dark blue, traces a large triangle; the second, lighter blue path overlays a smaller, inset triangle. Both paths are defined using the SVG `d` attribute with relative (`l`) and absolute (`L`) line commands. The code is straightforward, with no external libraries, and uses the inline `<svg viewBox>` coordinate system to position shapes.

Icon Chart using SVG Path Command

This example shows a 10-by-10 grid of circles that form an icon chart, with the first five circles in the top row highlighted in a lighter blue to mark a distinct subset. The visualization is built entirely with SVG and JavaScript, creating each circle dynamically using `document.createElementNS` and setting `cx`, `cy`, `r`, and `fill` attributes directly. The data is hard-coded in nested loops, and the SVG is appended to the page body, demonstrating a minimal, manual approach to icon-based charting without external libraries.