isaachowen

@isaachowen·18 public vizzes

Cars Scatter Plot

This scatter plot displays daily working temperatures in San Francisco over time, with temperature on the y-axis and date on the x-axis. Red circles mark each data point. The visualization uses D3 v5 to load the CSV dataset, map dates and temperature values to scales via `scaleTime` and `scaleLinear`, and render axes with `axisBottom` and `axisLeft`. Grid lines and axis labels are positioned manually, with the chart drawn as SVG elements inside a 960×500 pixel canvas.

Aug 18, 2019

Loading thumbnail…

How to D3 Force Directed Layout Graph

This example demonstrates a simple force-directed network graph with three nodes connected by three links, using Game of Thrones houses as node labels. The visualization renders circles and lines in SVG and relies on `d3.forceSimulation` to compute the layout, with `linkDistance(300)` set to space the nodes apart. Node positions update on each tick event, while `force.drag` enables interactive dragging. The code builds nodes and links from a hardcoded array of source-target pairs, stored as plain JavaScript objects, and styles the elements via CSS classes.

Aug 11, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the data source. The visualization customizes both axes by removing domain lines, adding gridlines on the x-axis through `tickSize`, and formatting population values with `d3.format`. The code uses d3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG elements, with a title and axis label included.

Aug 11, 2019

Loading thumbnail…

How to D3 Force Directed Layout Graph

This example demonstrates a force-directed layout graph using D3.js (v5). Nodes and links are rendered as SVG elements, with the graph's structure implied by the bundled JavaScript. The code uses D3’s built-in force simulation (d3.forceSimulation) to position the connected nodes naturally, while the stylesheet defines the visual appearance of the nodes as grey circles and the links as grey lines. The data is not explicitly shown, but the layout emerges from the simulated forces between connected nodes.

Aug 11, 2019

Loading thumbnail…

Fruitbowl V2 nesting

This example demonstrates a nested data visualization using D3 v5, where a row of fruit circles—apples and lemons—is rendered and animated within an SVG. The fruitBowl component uses `selection.enter()` and `.merge()` to handle groups, circles, and text elements, with `scaleOrdinal` mapping fruit types to colors and radii. A scripted sequence changes the fruit array over time, triggering re-renders that show the exit, update, and enter transitions, such as removing a fruit or changing an apple to a lemon. The animation is driven by setTimeout calls that manipulate the `fruits` state and invoke the render function.

Aug 11, 2019

Loading thumbnail…

Fruitbowl V2 transitions

Rows of apples and lemons animate as fruit is eaten or replaced in this SVG chart. The example demonstrates D3's data join with a key function, using `selection.enter`, `merge`, and `exit` to manage updates. Transitions smoothly shift circle positions and radii over one second. Data arrays are modified via `setTimeout`, triggering re-renders with `d3.scaleOrdinal` mapping fruit types to colors and sizes.

Aug 11, 2019

Loading thumbnail…

Empty blank template

An empty SVG canvas displays a blank 960-by-500 visualization template. The page loads D3.js version 5.9.7 from a CDN and confirms the library is available by logging it to the browser console. The SVG element is pre-defined in the HTML, with no data or visual elements rendered yet. Styling is applied through an external stylesheet, providing a starting point for building custom charts or graphs.

Aug 11, 2019

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year up to 2015, with a smooth curved line and filled region emphasizing growth trends. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` to create the path. Axis labels and ticks are added via `axisBottom` and `axisLeft`, with population values formatted in billions. Data loads from a CSV file using D3’s `csv` method, parsing years as dates and populations as numbers before rendering.

Aug 10, 2019

Loading thumbnail…

Make fruit bowl update patterns with nesting

Apples and lemons rest in a bowl, and a sequence of timed mutations—removing fruit, changing an apple to a lemon, and filtering—drives the visualization. Nested `g` elements contain each fruit, with circles and labels animated via a `transition().duration(1000)` call that interpolates the radius. The example uses D3 v5’s `scaleOrdinal` for color and radius mapping, with SVG rendering for the bowl shape. All state changes are triggered by `setTimeout` in `index.js`.

Aug 6, 2019

Loading thumbnail…

Make fruit bowl update patterns

A row of apples animates through a sequence of update patterns: an apple is removed, another transforms into a lemon, and a third is filtered out. The demo shows enter, update, and exit selections handling state changes with smooth transitions. It uses D3 v5 with `scaleOrdinal` for color and radius, `data()` with a key function on random IDs, and chained `transition().duration()` calls to animate circle attributes. The rendering is SVG, driven by a timer-based `setTimeout` script.

Aug 6, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black stroke, white eyes, and an arc-shaped mouth animates through a series of transformations. The eyes, pupils, eyebrows, and mouth scale, rotate, and shift position in sequence using D3.js v5 transitions with `transition.duration`. The SVG is centered via a `g` element translated to the middle of a 960×500 canvas. The code imports `select` and `arc` from D3, using `arc()` to generate the mouth path and chained transitions to create the animated effects.

Aug 5, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, using circles positioned along a linear population scale and a point-based country axis. The visualization encodes each nation’s population with a circle’s horizontal placement, while vertical positioning separates countries for readability. The code leverages d3.csv for data loading, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom to render labeled axes. Population values from the data file are multiplied by 1,000 and formatted with d3.format, with the SVG output styled using CSS.

Jul 31, 2019

Loading thumbnail…

Line Chart

This line chart displays daily temperature variations in San Francisco over time, with a smoothed curved line connecting data points and labeled axes for date and temperature. The visualization uses D3 v5 to load CSV data, scales time and linear values with `scaleTime` and `scaleLinear`, and renders axes via `axisBottom` and `axisLeft`. A `line` generator with `curveBasis` creates the smooth path, while the SVG output includes a titled chart with gridlines and rotated axis labels.

Jul 31, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (mpg) and vehicle weight for a dataset of cars, with each point representing an individual car. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes with gridlines, and displays the data as semi-transparent red circles. The visualization loads data from a CSV file via d3.csv, parses numeric fields, and draws the chart using SVG. Axis labels and a title are added as text elements within the SVG.

Jul 31, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays the populations of the world’s ten most populous countries, using horizontal bars ordered from largest to smallest. The chart is rendered as an SVG using D3 v5, with a linear scale for population and a band scale for country names, plus axis ticks generated via `axisLeft` and `axisBottom`. Population values from the CSV, sourced from the 2018 estimate, are multiplied by 1,000 to reflect actual figures. The visualization relies on D3’s `scaleLinear`, `scaleBand`, `max`, and `csv` utilities.

Jul 18, 2019

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries as a tree diagram, using a horizontal layout where each node represents a country, region, or subregion. The visualization uses D3.js v5 with the `d3.tree` layout and `d3.hierarchy` functions to compute node positions and link paths, rendered as SVG with `d3.linkHorizontal`. Font sizes scale inversely with node depth, and zooming is enabled via `d3.zoom` and event transforms. The data is loaded from a JSON file containing nested country groupings.

Jul 16, 2019

Loading thumbnail…

Shapes with SVG and CSS

A single SVG canvas displays basic geometric shapes, including circles, rectangles, lines, and a path, colored with fills and strokes. The code uses plain SVG elements with CSS classes for styling, such as the `.lines` class for stroke properties, and applies a group transform for scaling and translation. The shapes are arranged in overlapping groups to demonstrate how SVG coordinates and CSS styling affect rendering, with no interactive behavior.

Jul 6, 2019

Loading thumbnail…

Cars Report

This example demonstrates a data-reporting workflow by fetching a JSON array of car records and generating a formatted text report. The page first displays "Loading..." while a simulated two-second asynchronous delay resolves the data via a Promise from `getCars`. The `generateReport` function filters cars by a maximum price and formats each matching entry using `formatCar`, which outputs year, make, model, and price. The final plain-text report is rendered inside an HTML `<pre>` element. The code relies on ES6 modules and native Promise syntax rather than external visualization libraries.

Jul 6, 2019