Skip to main content
SimilarExport ZIP
100%

D3 data formats

✓ Published0🌍 Public
RRichMorin
Last edited Jun 13, 2012
Created on Jun 13, 2012

D3 data formats is a gallery of examples that demonstrates how D3 handles diverse dataset formats. It shows both tabular formats like CSV, with examples including stock prices, population demographics, and car specifications, and hierarchical or relational JSON structures like nested node trees and network graphs. The examples showcase D3's parsing methods for these formats, with various charts such as bar , parallel coordinate, and geographic visualizations.

AI-generated description

Similar vizzes

Loading thumbnail…

car examples D3

This example demonstrates how to begin using D3 version 6 by loading a small JSON dataset of car specifications and displaying the make of the first car in the dataset. The code parses a hardcoded JSON string with `JSON.parse` and uses standard DOM methods to set the text content of an HTML element, applying CSS styling for centered, large text. The page includes a linked YouTube tutorial and loads D3 from the official CDN, but the visualization itself relies solely on native JavaScript and DOM manipulation rather than D3-specific functions.

FForemost123
73% match
Loading thumbnail…

D3 nest examples

A collection of interactive tutorial examples demonstrates how to use the d3.nest() function to group, roll up, and sort tabular CSV data containing task management records. The page shows progressively more complex nesting operations, from single-key grouping by status to two-level hierarchies with custom sort orders and leaf-level sorting, while also demonstrating how rollup can compute counts and sums. Each example displays the JavaScript code alongside the resulting nested data structure in text areas.

GGerHobbelt
72% match
Loading thumbnail…

D3 Example

As more data loads, this D3 example builds a multi-day temperature line chart for San Francisco, one CSV file at a time. Each file holds a day of hourly readings, and the visualization re-renders as each new day is fetched, revealing the dataset’s daily cycles. The SVG line chart, based on a standalone example, shows the temperature curve extending across time with each incremental load, demonstrating how to stream and update data progressively in the browser.

CCurran Kelleher
72% match
Loading thumbnail…

D3 Parsing CSV Data

This example demonstrates how D3 can load and parse CSV data from a remote URL, then displays the dataset’s basic metrics—size in kilobytes, row count, and column count—as oversized text on a web page. It uses the `d3.csv` method to fetch and parse the file asynchronously, and also includes commented-out code showing alternative parsing with `d3.csvParse` on raw text. The data source is a gist-hosted file containing CSS named colors. The page’s minimal styling relies on a large `pre` element for output.

KKazSoftwareEngineer
72% match
Loading thumbnail…

D3 Examples - Bubble Chart, Line Chart, & Scatterplot Matrix

This example presents three distinct D3.js v7 visualizations side by side: a bubble chart, a line chart, and a scatterplot matrix, all derived from a CSV dataset that maps car makes to torque and miles-per-gallon values. The bubble chart uses force simulation for layout, with hover effects that increase opacity and stroke width, while a tooltip provides additional detail. The line chart and scatterplot matrix render the same data through separate script files, with each chart loaded into its own DOM container. All three rely on D3’s core API for scales, axes, and data binding from the external `stripechart.csv` file.

Ddodoi25
71% match
Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

SSubhamChhetri
71% match
Loading thumbnail…

D3 data transformation

This example demonstrates a simple data-loading and transformation workflow using D3. It fetches a CSV file containing the classic Iris dataset and uses `d3.csvParse` to convert the raw text into an array of objects, subsequently coercing the numeric measurement columns to numbers. The resulting parsed data is displayed as formatted JSON inside a `<pre>` element. The visualization uses a minimal state management pattern, with a `setState` callback triggering re-renders, and leverages D3’s `select` and `join` for DOM updates.

SSubhendu Karmakar
71% match
Loading thumbnail…

Parsing of Data with D3

This example demonstrates how to load and parse a CSV file using D3.js, displaying the dataset's size, row count, and column count. It fetches a CSV file containing lung disease data from a GitHub gist URL. The code uses the `d3.csv` function to fetch and parse the data, and `d3.csvFormat` to calculate its size in kilobytes. The resulting message is rendered in a prominent `<pre>` element, showing the parsed data's basic statistics.

Bbassansackey@gmail.com
71% match