owenking2710@gmail.com

@Zryxion·7 public vizzes

Lets make face with d3.js

This example draws a cheerful, cartoon-style face using SVG shapes created with D3.js v7. The face consists of a yellow circle for the head, two eyes, and a mouth built with the `arc` function. The visualization also includes an animation where the eyebrows move up and down repeatedly via chained `transition` calls, demonstrating how to animate SVG attributes over time. The code uses D3’s `select` and `append` methods to build the scene within a fixed 960×500 canvas.

Nov 14, 2023

Loading thumbnail…

Fork of Fork of Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales across platforms from 1970 to 2020, showing how each console's market share shifts over time. The visualization uses D3’s stack generator with the wiggle offset and inside-out order to create the layered streamgraph shape, with smoothed data via array-blur. Area labels are placed using the d3-area-label library, while color is assigned through an ordinal scale with HCL color space. The data comes from a CSV of video game sales, rendered as an SVG with axis ticks providing temporal context.

Nov 2, 2023

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, allowing users to choose which flower measurements to display on the X and Y axes via dropdown menus. The visualization uses D3 v6 with reusable chart and menu modules, applying `scaleLinear` for axes and transitioning circle positions with `transition().duration(1000)`. Points grow from zero radius on initial render, and updates are staggered with a delay. The data is loaded from a CSV file and rendered as SVG, with the menus built from a reusable `dispatch`-based component.

Sep 26, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four Iris dataset measurements, using petal width, sepal width, petal length, then sepal length as the x-axis. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The SVG elements are joined and updated every two seconds via `setInterval`, re-calling the reusable scatter plot function. The Iris dataset is loaded as CSV from a GitHub gist, with axes and circles rendered in the Share Tech font.

Sep 26, 2023

Loading thumbnail…

Customize axis

A horizontal bar chart displays the populations of China, India, and the United States, using a custom SVG axis. The chart loads data from a CSV file, converting population values to thousands. It uses d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a custom tick formatter that abbreviates large numbers. Grid lines extend across the plot, while the y-axis and domain lines are removed, leaving a clean, labeled visualization.

Sep 25, 2023

Loading thumbnail…

test d3

This example displays a horizontal bar chart of population data for three countries (China, India, and the United States) loaded from a local CSV file. The SVG rendering uses D3 v7’s modular API, including `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for tick marks. Rectangles are appended to the SVG group and sized according to the scaled population values, while the chart uses a steelblue fill and generous font sizing.

Sep 25, 2023

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript tutorial for generating a text-based car report from a JSON dataset. It shows a list of cars filtered by a maximum price, displaying each car's year, make, model, and price. The code uses JavaScript objects, arrays, and promises, with `JSON.parse` to load the car data, a `setTimeout` to simulate an asynchronous fetch via `getCars`, and the `filter`, `map`, and `join` array methods to transform the data into a formatted message, which is then rendered in the HTML `<pre>` element.

Sep 24, 2023