Skip to main content
Log in
D

Dan Waters

@danwaters·15 public vizzes

Loading thumbnail…

ICE-8 Social Network

This interactive network visualization maps the social connections among eight individuals, each represented by a labeled circle. The graph is built using D3.js version 7 with SVG rendering. The code defines nodes and links as data structures and applies a force-directed layout using `d3.forceSimulation`, combining `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for centering. The visualization updates dynamically, showing the network’s evolving structure as the algorithm iterates, with labels positioned relative to each node’s final coordinates.

Apr 5, 2022
Loading thumbnail…

ICE-8 Family Tree v2

This visualization presents a family tree for the ICE-8 project, displaying a hierarchical chart of family members from Marion down to her descendants. The tree is constructed from tabular data of parent-child relationships using `d3.stratify()`, which converts the flat list into a hierarchy, and is then visualized with a custom `Tree` function that relies on D3 v7's `d3.tree` layout algorithm. The chart renders nodes with radius 5 and links styled as curves via `d3.linkHorizontal()`. Hover text reveals each node’s full ancestry path, while the links point to GitHub source locations, though these URLs are placeholders not actually resolving to real pages.

Apr 5, 2022
Loading thumbnail…

ICE-8 Tree

This interactive family tree visualizes a simple genealogical dataset with two named individuals. Built with D3 v7, it renders the hierarchy as an SVG with expandable and collapsible nodes, using animated transitions to reorganize the layout when branches are toggled. The code employs `d3.stratify()`, `d3.tree()`, and `d3.hierarchy()` to structure and position data, while `d3.select()` and `.transition()` handle the dynamic updates to nodes and links in response to clicks.

Apr 5, 2022
Loading thumbnail…

ICE-8 USA Country Map (Albers)

This example displays a map of the United States using an Albers USA projection, rendered as SVG paths. The map shows the country’s outline in light blue and state borders as dashed black lines, overlaid with a graticule grid of arcs. It uses D3 v7’s `geoAlbersUsa`, `geoPath`, and `geoGraticule` with TopoJSON data from the `us-atlas` states-10m file. The geographic features are generated via `topojson.feature` and `topojson.mesh`. The visualization demonstrates projection scaling, translation, and path rendering in a static format.

Apr 5, 2022
Loading thumbnail…

ICE-8 World Map 1

This example displays a world map using the Mercator projection, with countries rendered as green filled paths with dark borders. A dashed graticule grid overlays the map, and both layers are scaled down from the top. The visualization uses D3 v7’s `geoPath` and `geoMercator` projections, along with the `topojson` library’s `feature` function to parse geographic data from the `world-atlas` land-50m JSON dataset hosted on a CDN. The map is drawn as SVG paths.

Apr 5, 2022
Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes petal length measurements from the Iris dataset, separating the data into three colored series by species: red for setosa, green for versicolor, and blue for virginica. Each point is plotted by sample index along the x-axis and petal length on the y-axis. The example demonstrates a reusable LineChart function built with D3 scales, axes, and a line generator, rendering to SVG. Data is loaded asynchronously via d3.csv from a GitHub gist.

Mar 29, 2022
Loading thumbnail…

ICE-7 Area Chart

This visualization displays the petal length of individual iris flowers across sample indices, separated by species into a single area chart. The code uses the D3.js `AreaChart` function, which constructs an SVG with area and axes. Data is loaded from a CSV file asynchronously using `d3.csv`, with species determined by conditional logic. The chart renders with steel blue fill and custom labels via `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`.

Mar 29, 2022
Loading thumbnail…

ICE-7 Pie Chart

This example shows the distribution of three iris species in the classic Iris Dataset as a pie chart. It imports data from a CSV file, counts occurrences of each species, and renders the result using the reusable `PieChart` function. The chart uses D3’s `pie` layout and `arc` generator for SVG paths, with an ordinal color scale mapping species to red, green, and blue. A custom legend is appended with `svg.append`, and the page uses the Share Tech font.

Mar 29, 2022
Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot

A reusable scatter plot visualizes the Iris Dataset, with each point colored by species. The chart cycles through four different x-axis variables every two seconds, animating the axis transitions. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The implementation follows a reusable chart pattern, allowing the `scatterPlot` function to accept configurable accessors for data, dimensions, margins, and fill, with CSS styling for typography.

Mar 29, 2022
Loading thumbnail…

Bonus ICE scatter plot

This visualization displays the classic Iris dataset as an interactive 3D scatter plot, plotting sepal length, sepal width, and petal length along the three axes. Points are rendered as markers with semi-transparency and subtle grey outlines to help reveal overlapping clusters. The chart is built using Plotly’s JavaScript API via `Plotly.newPlot`, called from within a D3.js callback that loads the CSV data using `d3.csv`. The layout margins are set to zero, maximizing the plot area within the 800×800 pixel container.

Mar 12, 2022
Loading thumbnail…

Untitled

This interactive 3D bar chart visualizes the basic monthly cost of Netflix in the first ten countries, sorted in descending order. Each country is represented by a cube whose height encodes the subscription price, with labels showing the numeric value. The visualization uses the d3-3d library to render and rotate the cubes in SVG, and d3-drag enables mouse-based rotation of the scene. Data is loaded from a remote CSV file via the Fetch API and parsed with d3.csvParse.

Mar 12, 2022
Loading thumbnail…

ICE-6 Iris Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal length as a scatter plot of circles. The code uses D3 v7 to load the CSV data, parse numeric fields, and create linear scales for the axes. SVG is used for rendering, with axes and labels generated via `axisLeft` and `axisBottom`. The viewport dimensions determine the chart size, and margin-based spacing positions the axis labels and plot area, creating a clean, full-screen scatter plot.

Mar 8, 2022
Loading thumbnail…

ICE-6 Rendering Marks and Channels with React and D3

This example visualizes the top 10 most expensive Netflix Basic package prices by country using a horizontal bar chart. It renders with React and D3 v7 in SVG, loading CSV data from a GitHub gist, sorting it in descending order, and encoding cost values with bar width and a sequential color scale via `scaleLinear` and `scaleBand`. The chart includes custom axes and gridlines computed from `xScale.ticks()`, with colors defined in an array and applied through `rect` elements.

Mar 8, 2022
Loading thumbnail…

Netflix d3 vis for ICE-5

This example displays metadata about a Netflix dataset, including file size, row count, and column count, fetched from a CSV file hosted on GitHub. The page uses D3 v7’s `d3.csvParse` to parse the fetched text and updates the DOM with statistics. It also demonstrates basic D3 integration with HTML and JavaScript, using the Fetch API to retrieve the data and plain DOM manipulation to display the results, without any visual charts or graphs.

Feb 25, 2022
Loading thumbnail…

Fork of Smiley Face Part I

A yellow circle with a black stroke forms the face, featuring two black eyes with small white highlights and a thick, incomplete mouth arc. The code uses React to render an SVG, with the d3.arc() generator creating the mouth path from a specified start and end angle. The circle’s radius is set relative to the height, while eye offsets and radii are fixed values that position the facial features symmetrically around the center.

Feb 16, 2022