D

deafMother

@deafMother·23 public vizzes

Loading thumbnail…

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.

Loading thumbnail…

Nest Trial

This example visualizes the daily price of a single asset over time, grouping the data by year to draw one line per year in a multi-series line chart. The chart uses D3 v5 with the `d3.nest()` API to group the data, `d3.line()` to generate the paths, and `d3.scaleOrdinal()` with distinct colors for each series. It animates axis updates via transitions, and the data is loaded from an external CSV file. The visualization is built with React and rendered as SVG, though the core logic is D3-driven.

Loading thumbnail…

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.

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization trends over time, with dropdown menus to select the metric (price_usd or market_cap) and coin type (bitcoin, ethereum, litecoin, ripple, or bitcoin_cash). The SVG chart animates transitions between datasets using `d3.transition()`, updating the line path, x-axis (time), and y-axis (linear scale) with a duration of 700ms. Data is loaded from `buildings.json` via `d3.json()`, with dates parsed using `d3.timeParse()`, and the y-axis labels are conditionally formatted (e.g., market cap shown in thousands with “k”).

Loading thumbnail…

Tooltip And Events Trial

This example demonstrates animated bar charts comparing monthly revenue and profit data from a JSON file. The visualization toggles between the two metrics every two seconds, with bars smoothly transitioning their heights and colors using D3 transitions. It implements interactive tooltips using d3-tip, triggered by mouseover and mouseout events. The SVG is rendered using D3 v5 within a React framework, featuring axes, labels, and a legend that updates dynamically based on the displayed metric.

Loading thumbnail…

Merge Trial

This example demonstrates animated bar charts comparing monthly revenue and profit data, toggling between the two metrics every two seconds. The visualization uses D3 v5’s data join with `merge` to smoothly transition bars when data updates, including entry and exit animations. Built with React, SVG, and D3 transitions, it reads from a local `buildings.json` file and uses scales, axes, and color-coded legends for revenue (red) and profit (green).

Loading thumbnail…

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.

Loading thumbnail…

Update Pattern Trial

A bar chart displays monthly revenue and profit data from a JSON file, toggling between the two metrics every two seconds. Built with React and D3 v5, the visualization uses a band scale for months and linear scales for values, with axis transitions via `d3.transition()`. The update pattern joins data to SVG rectangles, animating height, position, and fill color as bars swap between tomato (revenue) and green (profit), while newly entered bars grow from the baseline.

Loading thumbnail…

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.

Loading thumbnail…

Scales

This example visualizes the heights of five tall buildings as a bar chart, with building names on the x-axis and height in meters on the y-axis. It uses the D3.js v5 library within a React framework, rendering as an SVG. The code employs `d3.scaleBand` for positioning along the x-axis and `d3.scaleLinear` for mapping height values to both the y-axis position and bar height. Data is loaded from a local `buildings.json` file, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

General Update Pattern

This example demonstrates the general update pattern in D3 v5, rendering a bar chart of building heights from a JSON file. It begins by adding a static circle, then uses `selectAll("rect").data(data)` to bind the building data and render purple bars via the enter selection. The visualization shows how the enter selection appends new elements, while the code includes imports from a separate fruitBowl module within a React framework, though the visible functionality focuses on data joining and SVG shape creation.

Loading thumbnail…

General Update Pattern

This example demonstrates the D3 general update pattern with React, using a row of fruit shapes that change over time. It shows how data joins handle enter, update, and exit selections as apples are eaten and replaced by lemons. The code uses `selection.data()` with a key function, `.enter()`, `.merge()`, and `.exit()` to manage SVG groups, circles, and text elements. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `setTimeout` triggers state changes to the fruit array.

Loading thumbnail…

General Update Pattern

Fruit shapes move across an SVG as the underlying data array changes, demonstrating the D3 general update pattern with enter, update, and exit selections. The code uses `d3.scaleOrdinal` to map fruit types to colors and radii, while `transition().duration(1000)` animates positional and size changes. Timed mutations—removing fruits, shifting types, and dropping the first item—trigger re-renders through a `fruitBowl` function. D3 v5 and React manage the data flow, with `d3.select` handling SVG circle elements and key-based data joining for stable identity tracking.

Loading thumbnail…

World Population Area Chart

This area chart displays global population growth from 1915 to 2015, with a purple area curve and semi-transparent circles marking each year’s data point. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, an `area` generator with `curveBasis` for the smoothed path, and `axisBottom`/`axisLeft` with custom tick formatting. Data is loaded via D3’s `csv` from a VizHub dataset.

Loading thumbnail…

Temperature Area Chart

This example shows temperature readings from San Francisco over time using a smooth area chart. The SVG rendering uses the D3.js v5 library with `scaleTime` and `scaleLinear` to map data to positions. An `area` generator with `curveBasis` creates the filled path, while `axisBottom` and `axisLeft` draw labeled axes with grid lines. Data is loaded from a CSV file, with timestamps parsed and temperature values converted to numbers before rendering. Circles mark individual data points but are hidden via CSS.

Loading thumbnail…

MAKING BARS

A bar chart displays population counts for five countries using SVG rectangles. The visualization maps country names to a band scale and population values to a linear scale, with axes generated via `axisLeft` and `axisBottom`. Data loads from a CSV file using D3's `csv` method, and population values are multiplied by 1000 during preprocessing. The React framework wraps D3 v5, with bars styled in steelblue.

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings over time, with a smooth curved line and circular markers at each data point. The visualization uses D3’s `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data from a CSV of San Francisco temperatures is loaded via `csv` and parsed into dates and numbers. The SVG rendering includes gridlines, axis labels, and a title, with the line styled in steelblue.

Loading thumbnail…

Temperature Scatter Plot

This scatter plot visualizes temperature readings over time in San Francisco, with time on the x-axis and temperature on the y-axis. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to construct the chart, rendering purple semi-transparent circles as SVG elements. Data is loaded from a CSV file via `d3.csv` and converted to Date and numeric types. Grid lines are drawn via tick sizing, and axis labels are added as SVG text elements.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. Each circle represents a car, plotted using `d3.scaleLinear` with `d3.extent` for domain scaling and `d3.axisBottom` and `d3.axisLeft` for axes. The chart includes gridlines via tick sizes and axis labels, with formatting applied through `d3.format`. Data is loaded as CSV and rendered as an SVG in React with D3 v5.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes population data for five countries, with each circle’s horizontal position encoding population size and vertical position encoding country name. Built with React and D3 v5, the visualization uses `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom`/`axisLeft` for tick marks and grid lines. Data is loaded from a CSV file and rendered as SVG circles, with formatting applied to abbreviate large population numbers.

Loading thumbnail…

Custom Axis

This example visualizes country populations with a horizontal bar chart, using a custom axis that formats large numbers (e.g., converting gigabytes to billions) via D3’s `format` API. The bar lengths are scaled by `d3.scaleLinear`, while country names are positioned using `d3.scaleBand`. The chart is rendered as SVG with React, importing `csv`, `scaleLinear`, `scaleBand`, `max`, `axisLeft`, `axisBottom`, and `format` from D3 v5. Data comes from `data.csv`, with gridlines and axis labels styled through CSS.

Loading thumbnail…

MAKING BARS

This visualization renders a horizontal bar chart of country populations in SVG, using a linear scale for the population axis and a band scale for the country categories. The bars are drawn from CSV data, with populations converted from thousands to full values. The code employs D3 v5 functions such as `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, wrapped in a React framework, with styling applied via CSS.

Loading thumbnail…

HTML Starter

This example renders a purple, anthropomorphic face in an SVG canvas. D3 v5 selections populate the scene with circles for eyes and a nose, rectangles for eyebrows, and a path generated with the `arc()` generator for the mouth. The code uses `transition().duration` to animate the eyebrows with rotation transforms. Data is not loaded; the visualization is constructed entirely from hardcoded dimensions and coordinates.