Adaman32

@Adaman32·5 public vizzes

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse data from an external JSON API, specifically the NOAA solar-cycle prediction feed, using `d3.json` within a React framework. The page displays the parsed data in the browser console, though a commented-out alternative using `fetch`, `async`/`await`, and `d3.csvParse` shows how to compute and render file size, row count, and column count into an HTML `<pre>` element. The code runs with D3 v5 and includes commented variations highlighting different asynchronous patterns, such as a callback-based “pyramid of doom” approach.

Feb 2, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates two approaches to loading remote data in a browser using D3 v5 and React. It fetches JSON from NOAA’s estimated planetary K-index service, logging the parsed array to the console via `d3.json().then()`. An alternate, commented-out path shows using `fetch` with `async`/`await`, parsing CSV text with `d3.csvParse`, and displaying file size, row count, and column count in a large `<pre>` element. The code highlights modern promise-based data loading versus older callback patterns.

Feb 2, 2022

Loading thumbnail…

Fork of Testing D3

This visualization compares students' self-reported collaboration skills (on a 0–10 scale) across different academic majors. It uses a horizontal bar chart with bars colored by major, allowing viewers to see how collaboration levels vary across disciplines. The chart is built with React, using D3's `scaleBand` and `scaleLinear` for axes and `scaleOrdinal` for the color scale. Hovering over the color legend filters the bars to show only the selected major. Data comes from a CSV file of student survey responses.

Jan 23, 2022

Loading thumbnail…

Testing D3

This visualization displays survey responses from students, showing each participant’s self-assessed collaboration skill as a horizontal bar chart. The bars are sorted in descending order by collaboration score, with aliases displayed along the vertical axis. Built with React and D3 v7, the example uses `d3.csv` to load data from a CSV file, and `scaleBand` and `scaleLinear` to map aliases and collaboration values to screen coordinates. The SVG rendering updates dynamically as the data loads, with a loading message shown initially.

Jan 21, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a static smiley face built with React and D3.js v5, rendered as SVG. The face consists of a yellow background circle, two black eyes positioned symmetrically, and a smile created using the D3 `arc()` generator with specified inner and outer radii. All shapes are defined as React components that receive numeric props for dimensions and positioning. The drawing is centered within an SVG viewport using a group transform, with the face’s radius derived from the viewport height minus stroke width.

Jan 20, 2022