dldowning

@dldowning·13 public vizzes

Downing 5320 ice8 2.3

This example visualizes a social network of characters from *The Lord of the Rings* as an interactive force-directed graph. Nodes represent characters, colored red and labeled with names, while directed links show "Friend with" relationships derived from a local `data.json` file. Users can drag nodes to reposition them, with hover effects highlighting selected nodes. The visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to compute the animated layout, with SVG markers for arrowheads and drag handlers enabling interaction.

Apr 13, 2023

Loading thumbnail…

Downing 5320 ice8 2.2

This example displays a family tree for Elrond Half-elven, using a D3 tree layout to visualize hierarchical relationships. The diagram shows three generations with colored nodes and links that group characters by their narrative significance, such as blue for Arwen and red for her brothers. The data is hardcoded in a JavaScript object, and the visualization is rendered as an SVG using d3.hierarchy and d3.tree. Node sizes correspond to a "value" property, while "type" and "level" properties control stroke and fill colors. The code also styles connecting paths with stroke colors based on the child’s level.

Apr 13, 2023

Loading thumbnail…

Downing 5320 ice8 2.1

This example shows a family tree for Elrond Half-elven, using a tree layout with circular nodes whose sizes correspond to each individual’s value. It uses D3 v7’s `d3.tree` and `d3.hierarchy` to structure the data, then renders the hierarchy as an SVG with curved links and colored nodes. Node text labels are positioned based on whether the node has children, with styling driven by the data’s `level` and `type` properties.

Apr 13, 2023

Loading thumbnail…

Downing 5320 ice8 1.2

This map of the United States uses the geo-albers-usa-territories projection to display state boundaries from US Atlas TopoJSON data. Landmasses appear in purple fills, while interior borders are drawn as teal strokes, and graticule lines provide geographic reference. The visualization renders as SVG through React, combining d3.geoPath for projection and path generation with topojson.feature and topojson.mesh to extract land and interior geometries from the data.

Apr 13, 2023

Loading thumbnail…

Downing 5320 ice8 vizhub

This example displays a world map in a conic conformal projection, highlighting country boundaries and graticules against a stylistic color scheme. It uses D3’s `geoConicConformal`, `geoPath`, and `geoGraticule` to render the sphere, landmasses, and borders as SVG paths. The map is built with React, loading TopoJSON data from the World Atlas via `json` and `feature`/`mesh` functions, while a custom hook manages asynchronous data fetching. The visualization is presented in an 1080x720 SVG canvas.

Apr 13, 2023

Loading thumbnail…

Area Chart

This area chart compares poverty percentage and blacksmith percentage across fantasy worlds, using a steelblue filled area to suggest a possible trend between the two variables. The visualization sorts the data by blacksmith percentage before rendering, making the progression along the x-axis easier to follow. Built with React and D3 v5, the code uses `d3.csv`, `scaleLinear`, `d3.area`, `axisLeft`, and `axisBottom` to load, scale, and draw the SVG output. Data comes from a GitHub gist, and the example questions whether any relationship exists between the two metrics.

Mar 26, 2023

Loading thumbnail…

Line Chart

This line chart explores the relationship between poverty percentage and blacksmith percentage across fantasy worlds, using a line to connect data points sorted by blacksmith rate. The visualization shows no clear trend between the two variables. Built with React and D3 v5, the code uses `d3.csv` to load external data, `d3.scaleLinear` for axes, `d3.line` for the path generator, and `d3.axisBottom`/`d3.axisLeft` for tick marks. SVG rendering displays the steelblue line and labeled axes.

Mar 26, 2023

Loading thumbnail…

Pie Chart with Legend

This pie chart visualizes the population of fantasy worlds in millions, using a categorical color scale to distinguish each world. The chart renders an SVG with D3’s `pie` and `arc` generators, while `scaleOrdinal` and `schemeCategory10` assign colors. A legend on the right lists each world and its population, built with appended SVG rectangles and text labels. Data is loaded as CSV from a GitHub gist, formatted via a custom number formatter, and styled with red and blue headings in the HTML.

Mar 26, 2023

Loading thumbnail…

Iris Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, comparing sepal length against petal width. Each flower species is represented by a distinct D3 symbol, generated using `scaleOrdinal` and the `symbol` API, with axes rendered via `axisLeft` and `axisBottom`. The reusable chart pattern, defined in `scatterPlot.js`, is invoked with D3’s selection `.call()` method, and the SVG output resizes to the full window. The data is loaded asynchronously from a CSV URL using `d3.csv` and parsed into numeric fields before plotting.

Mar 26, 2023

Loading thumbnail…

Fork of Downing 5320 ice6: Rendering Marks and Channels (React + D3)

This scatter plot shows the relationship between body mass and flipper length for three penguin species, using colored circles to distinguish Adelie, Chinstrap, and Gentoo penguins. The visualization loads CSV data via d3.csv, scales the axes with d3.scaleLinear and d3.extent, then renders SVG circles with attributes set by d3.select and join. Axis labels and tick marks are generated using d3.axisLeft and d3.axisBottom, while the custom marker function maps species names to red, green, and blue fills.

Mar 12, 2023

Loading thumbnail…

Downing 5320 ice6: Rendering Marks and Channels (React + D3)

A horizontal bar chart displays the percentage of blacksmiths in six fictional fantasy worlds, using a dataset from a public CSV gist. The chart encodes the World value on the y-axis with an ordinal scale and the Blacksmiths percentage on the x-axis with a linear scale, rendering each data point as a rectangle. React manages the component state and lifecycle, while D3 v5 handles CSV parsing, scale construction, and axis generation, with the final visualization output as SVG.

Mar 12, 2023

Loading thumbnail…

Downing 5320 ICE4

This example demonstrates a simple, stylized webpage that presents a title, an animated rotating Earth image, and a link to a small CSV dataset. The page’s visual design is controlled through CSS, which sets a pink background, styled buttons, and colored text. The HTML structure relies on standard elements like divs, headings, and image tags, while the JavaScript file `Step3.js` is included to handle any interactive behavior. The data is static and stored in `ice5_data.csv`, and the rendering approach uses the browser’s native HTML and CSS capabilities without any external charting libraries.

Feb 28, 2023

Loading thumbnail…

Forking with this Face for Fun.js!

Two cartoon faces rendered side-by-side in SVG each animate their eyebrows upward and downward in a repeating two-second transition. Built with D3 v5, the example constructs each face from circles, rectangles, and arc paths, positioning elements via `svg.append` and `g.attr` transforms. Duplicated code blocks define a red face with a hat and collar, and a blue face with asymmetric pupils, showing fundamental DOM manipulation through D3 selections, `transition.duration`, and the `arc` generator for the nose and mouth shapes.

Feb 25, 2023