haroldle

@haroldle·13 public vizzes

8

This example presents a force-directed network graph where circular nodes, colored teal and labeled with text, are connected by light-gray links. The layout is computed using `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the graph centered. Node positions update on each simulation tick, adjusting the circle and label coordinates via `attr`. The data is loaded as JSON from a GitHub gist, and the visualization is rendered as an SVG inside a React-prepared HTML page using D3 v4.

Mar 29, 2023

Loading thumbnail…

Mamal Family Tree

This interactive phylogenetic tree visualizes the hierarchical relationships within the placental mammal family tree. Branching from a central Placentalia root, nodes represent taxonomic orders, with each level distinguished by a unique color applied to text, circles, and connecting paths. The D3.js v5 code constructs a tree layout using d3.tree, d3.hierarchy, and d3.linkHorizontal, while d3.json loads the embedded data. Node circles scale relative to a fixed value, and labels use Playfair Display font, drawing from a 2017 Scientific American article.

Mar 29, 2023

Loading thumbnail…

Experimenting

This example zooms in on Vietnam using a Mercator projection, filling the country’s outline in red against a blank background. It filters a world GeoJSON dataset by country name and renders the selected feature as a single SVG path. The code uses `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to handle projection and data conversion, with the geographic data pulled from a remote GitHub repository.

Mar 29, 2023

Loading thumbnail…

Map

This example displays a world map using a natural Earth projection, with countries filled in yellow and oceans depicted in blue. It relies on D3 v5’s `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the TopoJSON library’s `feature` method extracts country boundaries from the World Atlas dataset. The SVG rendering includes a spherical outline and country paths, with a simple black stroke applied to each nation.

Mar 29, 2023

Loading thumbnail…

Fork of Tree

Fork of Tree visualizes a genealogical hierarchy using a D3 node-link tree diagram with bezier-curved links. The tree layout is computed with `d3.tree()` and `d3.hierarchy`, rendering circles whose radius encodes the `value` attribute, with fill and stroke colors driven by `level` and `type` fields from the JSON data. Links are colored by the parent’s `level` property. The example uses the `topojson` library for potential geo-feature processing, though the primary visualization focuses on hierarchical data drawn as SVG elements.

Mar 29, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot of the Iris dataset, cycling through four different axes (petal width, sepal width, petal length, and sepal length) every two seconds to reveal different relationships between measurements. Data points use D3’s `scaleOrdinal` with `symbols` and `schemeCategory10` to give each iris species a distinct shape and color. The chart is built with a custom `scatterPlot` function that leverages `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `selection.join`, and is animated via `setInterval` updating the x-value accessor. The SVG renders full-window, and the dataset is loaded from a CSV using `d3.csv`.

Mar 12, 2023

Loading thumbnail…

Untitled

This example presents a pie chart visualizing the distribution of anime media types and their counts from a CSV dataset. The chart uses D3.js v7 to load and parse the data, then applies `d3.arc` and `d3.pie` to generate the wedges, with an ordinal color scale assigning distinct colors to each category. The SVG renders responsively using a viewBox and preserveAspectRatio, and the page includes a navigation bar linking to the dataset.

Mar 12, 2023

Loading thumbnail…

Untitled

This example shows a time-series area chart of FRED economic data, with dates parsed from a CSV file and mapped to a time scale on the x-axis while values map to a linear y-axis. The visualization uses D3 v7’s `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to generate the filled region, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The SVG is drawn inside a React-based HTML page, using a responsive `viewBox` and `preserveAspectRatio` for scaling.

Mar 12, 2023

Loading thumbnail…

Untitled

This example shows a line chart of FRED data over time, displaying a single series of values with a time-based x-axis and linear y-axis. The visualization is rendered as an SVG within a React framework, using D3 v7 to load CSV data, parse dates, and generate the axes and line path. The chart uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to map the data, while the CSV is fetched from a GitHub gist URL. The page also includes a navigational header with dataset and about links.

Mar 12, 2023

Loading thumbnail…

Untitled

This example displays a bar chart of anime titles plotted against their ratings, showing the top 15 entries from a CSV dataset. The chart uses D3.js v7 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and D3’s `d3.csv` to load the external data. The visualization is embedded in a React-styled HTML page with CSS styling for layout and typography.

Mar 10, 2023

Loading thumbnail…

Untitled

This example shows a scatter plot of penguin measurements, comparing flipper length on the x-axis against bill depth on the y-axis. Each point represents an individual penguin, colored by species (Adelie, Gentoo, Chinstrap) via a d3.scaleOrdinal mapping to red, green, and blue. The visualization loads data from a CSV file using d3.csv, applies linear scales (d3.scaleLinear) for both axes, and renders circles within an SVG element. Axis labels and rotated tick text are added using d3.axisBottom and d3.axisLeft.

Mar 10, 2023

Loading thumbnail…

Untitled

This example displays metadata about a CSV dataset, including file size, row and column counts, and the best and worst rated titles. It loads the data with d3.csv, processes it in JavaScript, and outputs the findings as text into a page element. The page uses a custom style.css for visual styling and is built with plain HTML, CSS, and D3.js v7.

Mar 1, 2023

Loading thumbnail…

Funny Face by TL

This example draws a cartoon face using D3.js version 5 and SVG. It renders a yellow circular head with green hat and ears, featuring eyebrows, white eyes with brown pupils and highlights, black eyelashes, and a red tongue within a pale mouth. The face also includes a moustache (implied) and is centered via a translated group. The code uses D3 selections and shape methods like `append`, `attr`, and `arc` to compose the illustration, with hardcoded pixel coordinates for precise placement.

Feb 22, 2023