TMorgan99

@TMorgan99·10 public vizzes

My - Tree 2

This visualization displays a hierarchical network of production relationships from a farming game’s building.csv dataset. Nodes represent ingredients and products, while links connect each product to its required resources. Using d3.forceSimulation with SVG rendering, the code constructs a directed graph where paths show dependency chains from basic ingredients like wheat and eggs up to finished goods. The layout leverages force-directed physics to organically position interconnected nodes, with curved links and labeled text styled by Playfair Display. D3 v5’s csv parsing and lodash support the data transformation into node-link structures.

Jan 21, 2020

Loading thumbnail…

My - Tree

This visualization shows recipes from a farm-building game as a network of connections between ingredients, products, and buildings. The code reads a CSV file with d3.csv and uses d3.forceSimulation with forceLink, forceManyBody, forceX, and forceY to position nodes, while d3.select and .attr render SVG circles and lines. Although the current script is incomplete and partially commented out, it lays out the foundation for a force-directed graph where each ingredient links to the products it is used in, as shown in the building.csv data file.

Jan 21, 2020

Loading thumbnail…

Untitled so far

This network diagram visualizes the character relationships from *Les Misérables*, using a node-link layout where characters are nodes and their interactions are links. The SVG rendering is created with D3.js v5, which likely uses a force-directed simulation to position nodes. The visualization highlights group membership through node colors and encodes connection strength through link properties, offering a structural overview of the novel's social web.

Jan 20, 2020

Loading thumbnail…

My Tree

This example shows a hierarchical tree visualization of world geography, with nested groupings for continents, regions, and individual countries. The tree layout is rendered as an SVG graphic using D3.js v5, with the tree structure defined in a static JSON data file. The code loads the data with `d3.csv` for a separate building dataset, though the visible tree comes from the hierarchical JSON structure, and the visualization is sized dynamically to fill the browser viewport.

Jan 17, 2020

Loading thumbnail…

Hayday Tree

This visualization presents a hierarchical tree of global regions and countries arranged in a tidy radial layout, with the World as the root and continents branching into subregions and nations. Interactivity comes from a zoom behavior that allows users to pan and scale the entire tree. The code uses D3 v5’s `tree` layout and `zoom` API, though the main data-loading and link-drawing logic is commented out, leaving a static gold circle as the only currently rendered visual element. The page loads `data.json` and applies Playfair Display typography.

Jan 16, 2020

Loading thumbnail…

Rooms

This bar chart shows the population sizes of various animal homes, such as a field, chicken coop, and cow pasture, using data from a CSV file. It displays the top 10 most populous locations, with each bar’s height mapped via `scaleLinear` and positioned using `scaleBand`. The code uses D3 v5 methods like `axisLeft` and `axisBottom` for customized axes, and loads data asynchronously with `csv`. The SVG rendering is styled with fixed rectangular fills and tick labels.

Jan 16, 2020

Loading thumbnail…

Making a Bar Chart

This example demonstrates the initial step of building a bar chart with D3, where the page loads a CSV file and logs its contents to the browser console. The SVG element remains empty, as the code only fetches and parses the data using `d3.csv` and selects the SVG with `d3.select`. The visualization shows no chart yet, serving as a foundation for subsequent data-binding and shape-rendering code. It uses D3 v5 and renders via SVG, with the data source specified as `data.csv`.

Jan 16, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository, displaying trends such as fuel efficiency versus vehicle weight. Users select which data columns to compare via dropdown menus, implemented using a custom `dropdownMenu` function built with D3's selection and merge APIs. Points render as semi-transparent circles using D3's `scaleLinear`, `axisLeft`, and `axisBottom`, with animated transitions that stagger each circle's appearance over two seconds.

Jan 15, 2020

Loading thumbnail…

Let's make a FACE with D3.js

An SVG face built from D3.js primitives—circles for the head and eyes, rectangles for brows, and an arc path for the mouth—appears on a teal background. The face is centered using SVG group transforms, with features positioned via computed coordinates. D3 transitions animate the eyes and mouth, moving them in a sequence of translate transformations over three-second durations. The styling comes from an external CSS file, while the D3 library (v5) handles both shape creation and the tweening of the SVG attributes.

Jan 13, 2020

Loading thumbnail…

Let's make a face with CSS and D3.js!

A smiling face rendered in SVG uses D3.js to construct its geometry, while CSS custom properties define all visual dimensions and positions. The face, eyes, eyebrows, and mouth are created by appending SVG shapes with D3's selection API. Eyebrow movement is prepared through commented-out D3 transition code, with offsets stored as CSS variables. The example demonstrates how D3 v5 DOM manipulation can combine with CSS variables for styling, though the animation logic remains incomplete.

Jan 13, 2020