NicoA

@NicoA07·5 public vizzes

Test StreamGraph

This visualization shows the popularity of eight baby names (Amanda, Ashley, Betty, and others) over time using a streamgraph with stacked, layered areas. The React component wraps D3 v5 APIs including `stack`, `area`, `curveBasis`, `stackOffsetSilhouette`, and `stackOrderInsideOut`. It uses `scaleOrdinal` with the `schemeDark2` color palette and `scaleLinear` for axes. Hovering over a stream highlights that category and displays its name in a tooltip, while non-hovered streams fade to 20% opacity. The data comes from the provided CSV dataset containing yearly name counts.

Nov 4, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset with a scatter plot mapping sepal length to the x-axis and petal length to the y-axis. Dots are colored by species using a categorical color scale, with a legend positioned in the upper right. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `selection.join` for rendering. Axes and labels are added via custom modules, and data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Sep 23, 2023

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populous countries, using horizontal bars where length encodes the population value and the y-axis lists country names. The visualization is rendered as an SVG using D3 v7, with linear and band scales (`d3.scaleLinear`, `d3.scaleBand`) mapping the data. Axes are generated via `d3.axisLeft` and `d3.axisBottom`. Population data is loaded from a CSV file using `d3.csv`, with string values converted to numbers for scaling.

Sep 23, 2023

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using year 2018 estimates from the United Nations World Population Prospects. Circles are positioned along a linear population scale and a categorical country band scale, with the circle radius matching the bandwidth. The visualization uses d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft to render the SVG. Axis labels and a title are added through D3 selection methods, with tick formatting converting large numbers to abbreviated units.

Sep 23, 2023

Loading thumbnail…

Test HW1

This React and D3.js (v6) example presents a blank SVG canvas with a visible gray margin and an inner plotting area. The visualization demonstrates a clean, reusable layout template where the `VizContainer` component manages the SVG's size, margins, and coordinate transformations for child elements. The code uses React’s `ReactDOM.render` to mount the application, and the component accepts `width`, `height`, and `margin` props to define the drawing space. Currently, the chart area remains empty, awaiting user content.

Sep 19, 2023