KediBabasi

@KediBabasi·3 public vizzes

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile performance data, mapping acceleration and horsepower for individual car models, with tooltips revealing model names. The visualization is built programmatically using the Vega-Lite API, which constructs specifications rendered through Vega and Vega-Lite. Data is loaded from a CSV file using D3’s `csv` method, while the chart’s size adapts to the viewport. Appearance is customized via a configuration object, and the Vega Tooltip handler provides interactive hover details.

Mar 22, 2021

Loading thumbnail…

React D3

This example demonstrates how D3's data-loading utilities can be integrated with React’s state management. It fetches a CSV file of CSS named colors from a GitHub gist using D3’s `csv` function, then displays a summary message in a React component. The message, generated by a custom module, reports the data’s formatted size in kilobytes, row count, and column count. The visualization is rendered as SVG through React, using D3 v5 and React 16.9, with the output displayed as plain text inside a `<pre>` element.

Mar 18, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of CSS named colors, displaying the dataset’s file size, row count, and column count as large text. Using D3 v5, it calls `d3.csv()` to fetch and parse the remote CSV, then applies `d3.csvFormat()` to measure the data’s size. The page also includes commented-out alternatives using `fetch()` with async/await and `d3.csvParse()` to highlight different parsing approaches. The visualization is purely textual, with no charts or graphs.

Feb 26, 2021