fresh block

100%

✓ Published0🌍 Public

Last edited Aug 13, 2019

Created on Aug 13, 2019

This example loads a CSV file of US mass shooting statistics using `d3.csv` and groups the data by year with a JavaScript `reduce` operation, printing the resulting structure to the console. It demonstrates a purely data-processing workflow, with no visual rendering. The code relies on D3 v4 for CSV parsing and uses standard array methods to reshape the tabular input into a year-keyed object.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example demonstrates a minimal data-loading and parsing workflow using D3 v5. It reads a CSV file, filters out the first three lines of metadata, and parses the remaining rows into a JavaScript array of objects. The code uses `d3.text` to fetch the file and `d3.csvParse` to convert the cleaned string into structured data. A console log then prints the parsed result, but no visualization or chart is rendered; the focus is purely on data ingestion and preprocessing. The source is a local `data.csv` file, and the approach highlights D3’s utility for handling tabular data before any graphical encoding begins.

GGerardoFurtado

78% match

Loading thumbnail…

fresh block

This example loads a live dataset from the UN OCHA Pooled Fund API via `d3.csv` and logs the parsed rows to the browser console. It demonstrates the basic pattern of fetching external CSV data and inspecting its structure, but the page itself renders no visual output—only a static heading. The code relies on the standard D3 v5 fetch-and-parse pipeline, showing how to retrieve tabular data asynchronously and handle the returned promise with `.then()`. The example serves as a minimal starter template for debugging data before building a chart.

GGerardoFurtado

75% match

Loading thumbnail…

Loading and Parsing CSV Data on "US Police Shootings"

This example displays summary statistics for a CSV dataset of US police shootings, showing the file size in kilobytes, row count, and column count in large text. It loads the data using `d3.csv` from d3.v5, then reports `data.length` and `data.columns.length` after parsing. The code also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`, highlighting different parsing approaches. The data comes from a gist hosted on GitHub.

Llintonylin

73% match

Loading thumbnail…

fresh block

This example demonstrates loading two separate CSV files with D3 v5 and logging their contents to the browser console. It shows how to use promises with `d3.csv` to sequentially load multiple datasets, with each file’s data converted to JSON objects and printed for inspection. The page itself renders no visual output, serving purely as a test harness for asynchronous data fetching. It relies on the native Fetch API via the promise-polyfill and D3’s CSV parsing, and includes a minimal HTML structure with a heading and script. The data sources are `file1.csv` and `file2.csv`, each containing simple numeric columns.

GGerardoFurtado

72% match

Loading thumbnail…

fresh block

A line chart displays daily crime counts across a 31-day period, with points connected by a single path. The visualization uses D3 v4 with `d3.scale.linear` for both axes, `d3.svg.axis` for ticks, and `d3.svg.line` to generate the path. Data from `numbers3.csv` is loaded via `d3.csv`, with day and crimes values parsed as numbers. An SVG canvas of 600x270 pixels, excluding margins, renders the axes and line, showing a fluctuating trend peaking around day 16 and dipping near day 25.

GGoomble

71% match

Loading thumbnail…

fresh block

This example shows a small dataset of timestamped numeric values being loaded and parsed from an external JSON file. It demonstrates a robust data-cleaning technique where the raw text is first altered to replace any unquoted `-Infinity` values with quoted strings, then parsed with a custom reviver function that converts those strings back into JavaScript’s native `-Infinity` number. The visualization itself is minimal—the code only logs the resulting parsed array to the console, with no visual elements drawn. It relies on D3 v5’s `d3.text` method to fetch the file and `JSON.parse` with a reviver callback to handle edge-case numeric literals. The data originates from a gist, with the structure showing two parallel numeric columns per timestamp.

GGerardoFurtado

71% match

Loading thumbnail…

fresh block

This example displays an interactive bar chart for a single year of data, rendered inside a responsive container. The visualization is generated by a custom D3 chart script that loads a dataset and encodes values as horizontal bars. The code uses `d3.select`, `d3.scaleBand`, and `d3.axisLeft` to construct the chart, while the page itself is styled with a centered, max-width layout. The visualization is initialized by including an external JavaScript file from a gist, which references data for the year 2018. The example demonstrates a straightforward, embeddable chart built with D3.js, with no additional interaction or animation beyond basic rendering.

GGerardoFurtado

70% match

Loading thumbnail…

fresh block

This example demonstrates how to load and inspect two separate CSV files using Promises in D3 v5. The code uses `d3.csv` to fetch `file1.csv` and `file2.csv`, then combines them with `Promise.all` to log the parsed data as JSON objects to the browser console. It explicitly shows the structure of each row, revealing fields like `foo`, `bar`, and `baz` with numeric values. The page itself displays only a static heading, while all observable behavior occurs in the console, making the data-loading pipeline the core focus.

GGerardoFurtado

70% match