bobshen30

@bobshen30·2 public vizzes

Let's make a face with D3.js!

This example shows a smiley face created with D3.js, where circles are dynamically added to an SVG canvas based on an array of values passed to an `updateVis` function. The circles change color—red for values under 30 and blue for values above—demonstrating data-driven styling. Using D3 v5’s `select`, `selectAll`, `data`, and `enter` methods, the code appends `<circle>` elements with attributes for radius, position, and fill. The included `q3.csv` file provides a year-based running total dataset, though it is not referenced in the JavaScript logic shown.

Jan 31, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row inside an SVG bowl, each colored red and sized identically. Clicking an apple highlights it with a black outline, updating the selected state via React’s `useState` hook. The `FruitBowl` component uses D3’s `scaleOrdinal` to map fruit types to fill colors and radii, while `onClick` handlers call `setSelectedFruit` to change the selection. The visualization demonstrates React state management combined with D3 scales for static, interactive SVG rendering.

Jan 31, 2020