Ariana

@ahibb·18 public vizzes

Working with Time

This example shows a line chart of temperature readings over the course of a week, using a smooth natural curve to connect the data points. The chart plots time on the x-axis with day-of-week labels and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the scales, `d3.line` with `curveNatural` for the path, and `timeFormat` for axis ticks. Data comes from a CSV of San Francisco sensor temperatures loaded via `d3.csv`.

Jul 30, 2021

Loading thumbnail…

Scatter Plot Tutorial

This scatter plot visualizes the iris dataset, mapping petal length on the x-axis and petal width on the y-axis for individual flowers. Built with React and D3 v5, it uses `scaleLinear` for axes, `extent` for domain calculation, and SVG circles for marks. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with data fetched asynchronously via `d3.csv`. Axes include formatted tick labels and rotated axis titles.

Jul 28, 2021

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries for 2020, using horizontal bars ordered by population. The visualization is built with React and rendered as an SVG, leveraging D3 v5’s `scaleBand` and `scaleLinear` for axis scaling and `format` for tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Custom components (`AxisBottom`, `AxisLeft`, `Marks`) structure the chart, with tooltips showing formatted population values on hover.

Jul 27, 2021

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The `useData` hook loads a CSV via `d3.csv`, slices the first 10 rows, and renders the bars as SVG `<rect>` elements within a React component tree, with separate components for the axes and marks.

Jul 23, 2021

Loading thumbnail…

Axes with D3 and React - Bar Chart

This bar chart displays the top 10 most populous countries in 2020 using D3 scales and React components. The code loads United Nations population data via `d3.csv`, slices the dataset, and renders SVG rectangles with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are manually drawn by mapping tick values from `xScale.ticks()` and `yScale.domain()`, with React handling state through `useState` and `useEffect`. The visualization demonstrates combining D3’s data-driven utilities with React’s declarative rendering for interactive web graphics.

Jul 21, 2021

Loading thumbnail…

Margin Convention Example with Bar Chart

The chart displays the top 10 most populous countries in 2020 as horizontal bars, with country names on the y-axis and population on the x-axis. The visualization uses a React component with React Hooks (`useState`, `useEffect`) to fetch and parse the United Nations World Population Prospects 2019 data via `d3.csv`. It applies the D3 margin convention with a `scaleBand` for the vertical axis and a `scaleLinear` for the horizontal axis, rendering SVG `<rect>` elements inside a transformed `<g>` group.

Jul 21, 2021

Loading thumbnail…

Bar Chart Rendering Data with React and D3

This example visualizes the top 10 most populous countries as horizontal bars, with each bar’s length proportional to its 2020 population estimate from the United Nations World Population Prospects. The React component manages state for the loaded data, while D3’s `scaleBand` positions countries along the y-axis and `scaleLinear` maps population values to bar widths on the x-axis. Data is fetched as CSV via `d3.csv`, and the chart renders as SVG `<rect>` elements within a React-rendered `<svg>` container.

Jul 21, 2021

Loading thumbnail…

Pie Chart Rendering Data with React and D3 - CSS Named Colors

This example uses React and D3 to render a pie chart of CSS named colors, with each slice colored by its corresponding hex value. D3’s `csv` loader fetches color data from a GitHub gist, while the `pie` and `arc` generators compute the slice angles and SVG paths. React manages the component state and renders the SVG, updating from a loading message to the visualization once data arrives. The chart displays all named colors as equal-weight slices radiating from the center, creating a full circular burst.

Jul 20, 2021

Loading thumbnail…

Rendering Data with React and D3 - CSS Named Colors

This example displays all CSS named colors as horizontal stripes, with each stripe's background color matching its RGB hex value from the dataset. It uses React hooks (`useState` and `useEffect`) to fetch the CSV data via D3's `csv` utility, then renders the color list as React `<div>` elements. The visualization demonstrates a straightforward React-D3 integration for loading and mapping external data into SVG-like DOM elements, with a "Loading..." fallback while the data is being fetched.

Jul 20, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how React state and D3 can work together to asynchronously load and summarize a CSV dataset of CSS named colors. The app renders a text summary displaying the file size in kilobytes, row count, and column count once the data arrives. The code uses `d3.csv` inside a React `useEffect` hook to fetch the remote CSV, while `useState` manages the loading state. The final message is formatted using `d3.csvFormat` to calculate the data’s byte length, with ReactDOM rendering the result as SVG-adjacent text in a `<pre>` element.

Jul 20, 2021

Loading thumbnail…

Vega Lite Exploration

A bar chart displays the lengths of playlists from a personal Spotify account. The visualization uses the Vega-Lite API to construct the chart, with data loaded from a JSON file via `d3.json`. Each playlist's length is computed from its `tracks` array and encoded as the bar height, with the playlist name on the x-axis and the track count on the y-axis. The chart is configured with a custom axis style and rendered using an SVG renderer.

Jul 17, 2021

Loading thumbnail…

Line Chart with Vega Lite Tutorial

This line chart visualizes weekly temperature data for San Francisco, plotting temperature over time as a smooth, bold line. It uses the Vega-Lite API to define the mark and encode the x-axis with timestamps and the y-axis with temperature values, while the Vega-Lite library renders the chart as an SVG. The visualization also incorporates a custom configuration for axis styling and tooltips, with data loaded via D3’s `csv` function from a remote URL.

Jul 16, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle model year against miles per gallon. Each circle is colored by the vehicle’s region of origin, and hovering reveals the car model name via tooltips. The visualization is built programmatically using the Vega-Lite API, with Vega and Vega-Lite registered for rendering, and D3.js handles CSV data loading. Custom configuration adjusts axis ticks, font sizes, and dark text color for improved readability.

Jul 15, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file’s size, row count, and column count as large text. It uses the Fetch API to retrieve the raw text, then `d3.csvParse` to convert the CSV into an array of objects. The data source is a GitHub gist containing CSS named colors, and the resulting statistics are rendered into a `<pre>` element. The code relies on d3 v7 for parsing and standard browser `fetch` for asynchronous loading.

Jul 13, 2021

Loading thumbnail…

Mouse Follower - D3 Data Vis Course

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React state to track mouse coordinates and re-render the circle’s cx and cy attributes. It imports the `arc` function from D3 but does not apply it, relying instead on React’s `onMouseMove` handler and D3 v5 for SVG rendering. The page is built with React 16.9 and renders a single unfilled circle at the pointer’s location.

Jul 12, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A modular React component renders a yellow smiley face using SVG primitives within a 960×500 viewport. The face composition breaks down into discrete components: a yellow background circle with black stroke, two black eyes, and a mouth shaped by D3's `arc` generator with a fixed inner radius and a half-turn angular span. The `FaceContainer` handles the SVG wrapper and central translation. D3 v5 provides the arc geometry while React manages component state and rendering, with all face features parameterized through props like `eyeOffsetX`, `eyeRadius`, and `mouthRadius`.

Jul 8, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face with black-outlined circular eyes and a d3.arc-generated open mouth is rendered as SVG. The React component builds a single `<svg>` with a `<g>` transform for centering, using fixed numeric constants for eye offsets, eye radius, and mouth thickness. Blue-teardrop-shaped closed eyes are added via an SVG path element, positioned relative to the eye coordinates. D3 v5 provides the `arc` generator, while React 16.9 manages the DOM structure.

Jul 4, 2021

Loading thumbnail…

Smiley Face Part 1

This example renders a basic smiley face using React and D3 v7, drawing SVG shapes on a 960×500 canvas. It shows a yellow circle with a black stroke for the head, two black eye circles positioned symmetrically, and a smile created with the `arc` generator from D3. The arc uses inner and outer radii with start and end angles to form a mouth shape. All geometry is computed from center coordinates, radius, and offset variables, then transformed into place using an SVG group element.

Jun 30, 2021