Nest Trial

Stack Trial

This visualization displays a stacked area chart showing how three groups contribute to a total value over time, with each group’s portion layered on top of the previous one. The data, loaded from a CSV file, is processed using `d3.nest()` to group entries by year, then `d3.stack()` to compute the stacked series. The chart uses `d3.scaleLinear` for both axes, an ordinal color scale for group differentiation, and `d3.area()` paths to render the filled regions. The visualization is built with D3 v4 and rendered as SVG within a React framework.

71% match

nests1

This visualization presents a filterable bar chart of data on individuals under custody, using a nested hierarchy to organize records by status and priority. The interactive page, built with React and rendered as SVG, loads JSON data from a GitHub Gist and processes it through the `d3.nest()` API to create the structured dataset. The code imports `nest`, `select`, and `remove` from D3 v5, with data cleaning and transformation handled by custom functions in `prepareData.js`, while the `d3.json` method fetches the remote source.

EEvan Misshula

69% match

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization over time, with dropdown menus allowing users to switch between metrics and coin types. The code uses D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path, with smooth transitions via `d3.transition`. Data is loaded from a local `buildings.json` file and parsed using `d3.timeParse`. A React framework is present, though the rendering and animation are handled directly through D3’s SVG and transition APIs.

Hhafsa2020

Trial

This example visualizes monthly revenue and profit from a JSON dataset as grouped bar charts, with revenue in tomato-colored bars and profit in green. It uses D3 v5 scales (scaleBand, scaleLinear) to position and size rectangles within an SVG. Axis labels and a legend are manually added. Data is loaded asynchronously and parsed from strings to numbers.

Area Chart Trial

This area chart animates daily revenue data from a CSV file, showing a sharp rise in late 2013 followed by volatility. Built with React and D3 v5, the SVG visualization uses `d3.area()` with `d3.scaleTime()` and `d3.scaleLinear()` to map dates and values, while axes are rendered via `d3.axisBottom()` and `d3.axisLeft()`. A 750ms transition updates the chart, and the area is filled with a light beige and stroked in green.

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Hhshs1115

Scatter Trial

This animated scatter plot compares monthly revenue and profit figures from a small JSON dataset. Two overlapping SVG circle groups represent the same months, with a toggle switching the y-axis between revenue and profit every two seconds. The visualization uses D3.js v5 scales, axes, and transitions with enter/exit animations as data points shrink or disappear. React serves as the framework, with SVG elements and animation handling via D3's transition API.

67% match