msygnowski

@msygnowski·4 public vizzes

React Hooks Bowl of Fruit

A static bowl of five apples demonstrates React Hooks for state management in a D3-based SVG visualization. The `FruitBowl` component maps fruit data to circles positioned along a row, using `scaleOrdinal` color and radius scales to differentiate apple from lemon. Clicking a fruit updates the `selectedFruit` state, highlighting the chosen circle with a black stroke. The example uses React's `useState` hook, D3's `range` for data generation, and renders purely via SVG, with no animation or transitions active in the final code.

Sep 4, 2019

Loading thumbnail…

Victory!

A bar chart displays population figures for ten countries, with the United States and China appearing prominently in the dataset. The visualization loads comma-separated values from a local CSV file using the `d3.csv` function, which parses the population column into numeric values. React's `useEffect` hook triggers the asynchronous data loading, and the `VictoryBar` component from Victory Charts renders the chart. The interface includes a button element, though its click handler is left empty in the current implementation.

Sep 2, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup where the text content of a page is dynamically updated. It shows how to integrate ES6 modules with D3’s `select` method to set the text of an HTML element, displaying a custom greeting message in a large, styled layout. The visualization relies on D3 v5 for DOM manipulation, imported via `select`, alongside a local `myMessage.js` module that exports the string. A CSS file applies the Ubuntu font and a dark blue background with centered, oversized typography.

Sep 2, 2019

Loading thumbnail…

Hello VizHub

This example displays the first car make from a static dataset in a large, styled headline. The code loads a small inline JSON array of five cars from the `cars.js` file, parses it with `JSON.parse`, and uses `document.getElementById` to set the text content of a div. The page imports D3 v5 via a CDN for potential use, though the current interaction relies solely on vanilla JavaScript. The styling uses an Ubuntu font, a dark blue background, and white text for high contrast.

Aug 13, 2019