hailiwang@my.unt.edu

Fork of d3-x3d : 3D Bar Chart Example

3D Bar Chart Example

Fork of Simple Scatter Plot

Fork of Goals Scatter Plot with Responsive Axis

Fork of Flowers

This animation shows a stylized purple flower growing from a green stem inside a brown vase, with leaves framing the stem. Using D3 v7, the code draws each element as SVG shapes—circles for the twelve petals and center, rectangles for the stem and vase body, and paths for the leaves. Each circle transitions from a radius of zero to its full size over two seconds via D3's `transition()` and `.attr()` methods, creating a blooming effect against a blue background.

ICE-6: Rendering Marks and Channels with React & D3

This example shows the top 10 most populous countries in 2019 as horizontal bars, using React and D3 to render SVG marks and channels. The data is loaded from a CSV via `d3.csv`, then visualized with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are drawn manually with `xScale.ticks()`, while `rect` elements encode population values by length. The React component uses `useState` and `useEffect` to fetch and manage the data asynchronously.

Fork of ICE-5

This example demonstrates how to load and parse external data using D3 v7, displaying key statistics about a CSV dataset in a styled HTML page. It shows the file size in kilobytes, row count, and column count within a large, centered text element. The page also includes an embedded SVG cityscape illustration and custom CSS styling. The core functionality relies on `d3.csv` to fetch data from a GitHub Gist URL and `d3.csvFormat` to calculate the data length, with results rendered into the DOM via standard JavaScript text content assignment.

Hello D3

This example demonstrates the simplest possible way to display text using D3 version 7. It shows the phrase “Hello D3 version 7” centered on the page, with the body styled at a large font size. Using the `select` method from the D3 library, the code targets the `body` element and sets its text content directly, without requiring any data binding or SVG elements. The visualization relies entirely on D3’s DOM manipulation capabilities rather than chart or layout functions.

Hello D3

This example displays a static message, "Hello HTML!", centered on the page in large text. It uses plain JavaScript and CSS within a single HTML file, with no D3 library loaded. The styling applies a 13em font size and text alignment via the `.message` class, demonstrating a minimal setup for rendering text without any interactive or data-driven elements.