AlexCamp2112

@AlexCamp2112·2 public vizzes

Charts Web Component

This React web component renders a horizontal bar chart where a blue rectangle represents each data category, with the bar’s width proportional to its score value. The code defines the bars through D3’s `svg.selectAll`, `enter()`, and `.append("rect")` operations, while explicitly using `x`, `y`, `d3.scaleBand`, `d3.scaleLinear` (implied by the x/y domains) and `d3.axisBottom` for the time-scaled axes. The example includes commented-out D3 code for loading CSV data via `d3.csv`, though the active implementation relies on hard-coded data passed to React’s `ReactDOM.render`.

Jul 26, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

Eighteen variations of a smiley face appear in a grid, each generated with randomized values for stroke width, eye position and radius, and mouth dimensions. The visualization demonstrates how React components compose reusable SVG elements—BackgroundCircle, Eyes, and Mouth—within a FaceContainer. D3’s arc generator creates the mouth path, while the d3.range function produces the array for mapping faces. Every face is rendered as a separate SVG group, showing the interplay between React’s declarative structure and D3’s geometric utilities.

Jul 22, 2021