Parse electricAccountsData.csv

100%

Parse electricAccountsData.csv

✓ Published1🌍 Public

Last edited Sep 29, 2021

Created on Sep 7, 2021

Forked from Loading and Parsing CSV Data

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.

AI-generated description

How does seasonal electric consumption and cost compare? How much solar energy is being applied via net metering credits by month and by year?

This data is my home electric energy consumption from the web site of the team I manage at my day job. We currently have a bar graph visualization on the web site that shows energy consumption and cost and I would like to use what I am learning in this class to create more effective visualizations. I've seen a graph of a circular stacked bar chart for more effective seasonal comparisons which I think would be a more effective visualization.

The data set is about 25 records short of 100 rows. National Grid only renders data for two year back, and these three accounts are all my personal accounts; however, we have clients on the web site that have thousands of accounts. I can make up realistic data to complete 100 rows if needed.

Attributes that are interesting are:

accountNumber is categorical and the account number for the data in the rows
totalKwh is quantitative and the amount of electricity consumed for the month
utilityCharges is quantitative and the amount of the bill for the month in USD
readFromDate and readToDate are ordinal and identify the billing period
netMeterCredits are quantitative and the USD credit amount from solar generated electricity by the community solar project that we belong to.

Socioeconomic data extract from US Census 2019-2010 American Community Survey

MIT Licensed

Similar vizzes

Loading thumbnail…

Parsing CSV Data with D3

This visualization demonstrates how to parse CSV data using D3.js by fetching a remote file and displaying summary statistics. The page shows the dataset’s row count, column count, and file size in kilobytes within a large text element. It uses D3’s `d3.csv()` function to load and parse the CSV from a GitHub gist, then formats the data with `d3.csvFormat()` to calculate its size. The example also includes commented-out code using `fetch()`, `async`/`await`, and `d3.csvParse()` as an alternative parsing approach.

TTetiana Humeniuk

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying file size, row count, and column count in a large pre-formatted text element. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub-hosted CSV file containing NYC social media usage data, then formats the statistics with `d3.csvFormat()` to calculate kilobyte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse()` for manual parsing. The example concisely shows the core workflow of retrieving and inspecting tabular data in a browser environment.

KKarenNg

78% match

Loading thumbnail…

Loading and Parsing CSV Data

KKarenNg

78% match

Loading thumbnail…

Parsing CSV Data with d3

This example demonstrates how to load and parse a CSV file using D3, displaying the dataset’s size in kilobytes, row count, and column count in large text. It fetches a remote CSV of CSS named colors via `d3.csv`, then formats the parsed data with `d3.csvFormat` to compute its byte size. The page uses D3 v6 and also includes commented-out code showing an alternative approach with the Fetch API, `async/await`, and `d3.csvParse`.

DDavid

78% match

Loading thumbnail…

Loading and parsing CSV data wih D3

This example demonstrates how to load and parse CSV data using D3 v7. It displays the row count, column count, and file size in kilobytes as large text on the page. The code uses `d3.csv()` to fetch and parse a CSV file from a GitHub gist, then processes the resulting data array and columns. It also includes commented-out alternatives using `fetch()` with `async/await` and `d3.csvParse()` to illustrate older parsing approaches.

AAoibhinnRed

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v5, displaying the file size, row count, and column count in large text. It uses `d3.csv` to fetch and parse the dataset asynchronously via a promise, then formats a summary message with `d3.csvFormat` to calculate kilobyte size. The data source is a GitHub-hosted CSV containing CSS named colors. An alternate approach using the Fetch API with `async` and `await`, plus `d3.csvParse`, is included as commented-out code for comparison.

JJohn Patrick Banas

78% match

Loading thumbnail…

CSV Fetch and Parse

This example demonstrates a minimal workflow for fetching and parsing remote CSV data with D3. It shows the resulting dataset’s size in kilobytes, row count, and column count in large text on the page. The code uses `d3.csv` to load a CSV file from a GitHub gist and `d3.csvFormat` to measure its string length, while also logging the parsed array to the console. A commented-out alternative shows manual fetching via the Fetch API and parsing with `d3.csvParse`.

AAndres de la Garza

77% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading a remote CSV file and parsing it with D3.js, displaying basic dataset statistics as large text. It uses `d3.csv` to fetch and parse the data from a GitHub Gist, then reports the approximate size of the formatted output in kilobytes, the number of rows, and the number of columns. The page also includes commented-out code showing an alternative approach using the `fetch` API with `async`/`await` and `d3.csvParse` for manual text parsing, but the active path relies on D3's built-in CSV handling.

Aadante111

77% match