StacyLeson

@Sleson·2 public vizzes

React and D3 read CSV file

This example shows how to load and parse a CSV file using D3 within a React application, displaying the data in a simple SVG-based visualization. The code imports React hooks and D3 v5, using `d3.csv` to read data files containing GDP and population statistics from the World Development Indicators. Two separate heatmap instances are created, each with its own container and SVG element, demonstrating how the same visualization component can manage independent datasets. The approach relies on React's state management alongside D3's data-join and SVG manipulation methods to render the results.

Feb 5, 2020

Loading thumbnail…

Bowl of fruit

This example shows a dynamic visualization of a bowl of fruit, where apples and lemons are represented as colored circles that animate in response to data changes. The visualization demonstrates data joins and transitions using D3 v5 within a React framework, rendering to SVG with animation. The code uses `d3.scaleOrdinal` to map fruit types to colors and sizes, `selection.enter()`, `merge()`, and `exit()` to manage elements, and `.transition().duration(1000)` to animate position and radius changes. Users can click the SVG to double the displayed data values, while timers trigger the removal of fruits and type changes.

Jan 31, 2020