Houraa

@Houraa·2 public vizzes

Assignment1_Houra

This stacked bar chart displays the population distribution across three age groups (Under 5, 5 to 13, and 14 to 17 years) for eight U.S. states, with each bar sorted by total population and colored segments representing the age categories. The visualization uses d3.csv to load data from an external CSV file, d3.stack() to create the stacked series, and d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for positioning and color encoding. Interactive tooltips are implemented with mouseover and mousemove events, while axes and a legend are generated using d3.axisBottom, d3.axisLeft, and appended SVG elements.

Jan 31, 2022

Loading thumbnail…

Hello HTML

This example uses React with D3 v7 to render six identical smiley faces in a grid of SVG elements. Each face is composed of reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that generate a yellow circle with black stroke, two eyes, and a curved mouth using D3’s `arc()` function. The `range(6)` from D3 creates the array to map over, producing the repeated faces. The faces are centered using SVG `<g>` transforms, and the styling uses basic CSS properties like `fill`, `stroke`, and `stroke-width`.

Jan 28, 2022