Cees Kaandorp

@ceeskaan·2 public vizzes

Rendering Data with React

This example renders a dataset of CSS named colors as a pie chart using React for the user interface and D3 for the data loading and shape generation. The visualization loads color names and their RGB hex values from a CSV file via `d3.csv`, then uses `d3.pie` and the `d3.arc` generator to compute and draw the pie slices as SVG paths. Each slice is filled with its corresponding hex value, resulting in a full circular spectrum of colors. The code demonstrates a hybrid approach where React manages state and rendering while D3 handles the data parsing and geometric calculations.

Mar 14, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3 v7, displaying the parsed dataset’s size, row count, and column count as large text. The code calls `d3.csv` to fetch the named colors dataset from a GitHub gist, then uses `d3.csvFormat` to calculate the data’s size in kilobytes. The results are injected into a `<pre>` element via plain JavaScript DOM manipulation, with minimal CSS styling for readability. The visualization focuses on data ingestion and summary rather than graphical rendering.

Mar 10, 2022