T

t0miwa22

@t0miwa22·16 public vizzes

Loading thumbnail…

Test

This example demonstrates a minimal SVG drawing composed of two black, unclosed paths. The first path traces a simple triangular outline with a horizontal base and a diagonal line, while the second path, translated along the x-axis, forms a smaller, angled line segment. The rendering is achieved directly within the HTML file using an inline SVG element and static path data. The code does not utilize any JavaScript libraries or dynamic data, relying solely on static SVG markup to produce the geometric figure.

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization presents a radar-style chart with colored ring segments, plotting categorized data points across four quadrants. The example uses D3 v5 to generate SVG elements, including linear gradients and arc paths for the central chart, with x and y axes scaled from -4 to 4. It loads car production data from a GitHub gist via `d3.csv`, and includes interactive slider and bubble sections alongside the main radar view. The code demonstrates custom arc generation and axis customization, removing tick marks to create a clean, circular display.

Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This visualization combines a central radar-style chart with interactive quadrant and bubble elements to display categorized risk data. The radar chart uses concentric circular rings generated with `d3.arc()` to create a radial grid, while D3 scales (`scaleLinear`) and axes position data points across four quadrants. The visualization loads external CSV data via the `csv` function from D3 v5, and additional JSON data (datapoints.json) provides text labels and circle assignments for each quadrant. The SVG-based layout divides the view into three sections—slider, chart, and text header—with color-coded gradients distinguishing quadrants.

Loading thumbnail…

Untitled

This example demonstrates how to begin using D3 version 6, focusing on basic SVG setup and marker definition. The code creates an SVG canvas and defines an arrow marker with a red path, using the `marker` element for reusable arrowheads. It selects the SVG element with `d3.select`. The example includes a YouTube tutorial link in the README, though the visible JavaScript only imports `select` from D3 and selects the existing SVG, showing minimal initialization steps without further interaction or data rendering.

Loading thumbnail…

Fork of Main Viz | Protype Dev

A prototype visualization displays a log-scaled vertical axis of Fire Weather Index (FWI) values against a categorical band axis, plotting three risk-area data points. The SVG chart uses d3.scaleBand, d3.scaleLog, and D3 axis components to render the pointer and arrow elements, with data drawn from a hardcoded array. A static arrow is appended as a separate SVG element. The layout divides the screen into three bordered columns for slider, chart, and bubble sections, though only the chart area is populated with visible elements.

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization presents a quadrant-based radar chart focused on risk areas related to health and wellbeing, with interactive SVG circles representing data points. The central chart uses D3 v5's arc generation and scaleLinear functions to create concentric ring structures with color-coded gradients. Data is loaded from an external CSV file containing car production statistics, while additional datapoints.json provides text labels and quadrant assignments. The interface includes a slider for pointer navigation and a bubble chart for supplementary display, all rendered through D3's SVG animation capabilities.

Loading thumbnail…

Fork of D3 base module starter

This example renders a minimal modular D3 chart using a pre-defined dataset of five axis-value pairs. The code initializes a linear scale with `d3.scaleLinear` and appends a radar chart group to an SVG, though the visualization itself is incomplete. A separate `module.js` file exports a reusable D3 module that appends a text element, with a setter method `my.val1` to control the displayed value. The HTML page loads D3 v7 from unpkg and uses a bundled `bundle.js` file to run the JavaScript.

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization displays a radar chart composed of concentric, donut-like rings with color-coded quadrants for health and wellbeing data. The SVG rendering uses D3 v5 scales and arc generators to construct the circular plot from CSV data loaded via `d3.csv`. The interface includes separate sections for controls, the central chart, and a bubble component. Quadrant-specific gradients (`linearGradient`) and hard-coded color palettes distinguish four risk areas within the radial layout.

Loading thumbnail…

investigating animation

An interactive solar system visualization allows users to click on a planet to reveal its atmospheric composition and temperature data. A central SVG diagram animates planets orbiting the sun using SVG `<animateMotion>` with `<mpath>` elements. Selecting a planet toggles the visibility of its corresponding D3.js pie chart and line chart, built with `d3.pie` and `d3.line`, displaying atmospheric gas shares and temperature against distance. The data is static and embedded in the script files.

Loading thumbnail…

Fork of Log Scale Investigation

This visualization displays car production data on a four-quadrant radial chart with concentric rings and color-coded gradients. It uses D3 v5 to load CSV data, generate SVG elements, and apply a log scale analysis through arc generation for each ring. The chart renders via SVG with viewBox, transforms, and CSS styling, including linear gradients for quadrant coloring and axis scales that are rendered without tick marks.

Loading thumbnail…

Fork of Radar viz

This visualization presents a quadrant-based radar chart displaying categorical data points, with a central circular burst design. It loads car production data from an external CSV file using D3 v5's `csv` function. The chart uses SVG rendering with a custom `d3.scaleLinear` for the x and y axes, and `d3.arc` generators to create concentric ring segments with color-coded gradients for each quadrant. The interface includes a slider and bubble area alongside the main radar visualization, with tooltips for additional context.

Loading thumbnail…

SoLewitt reproduction

This example reproduces a Sol LeWitt wall drawing as an interactive SVG artwork. It shows a colorful geometric composition built from horizontal and vertical bands that intersect to create a grid of layered rectangles. The visualization uses raw SVG elements manipulated through inline JavaScript, with no external libraries. The rendering is driven by a script that programmatically generates the shapes, though the code itself is minimal and does not rely on D3 or other data-visualization APIs. The piece serves as a direct homage to LeWitt’s instructional art, focusing on systematic placement and color variation rather than data mapping.

Loading thumbnail…

Pseudo Horizontal bar chart

The chart approximates a horizontal bar chart with three black bars of varying lengths and one green bar at the top, each paired with a large letter label on the left. It uses raw SVG elements, including `<rect>` for the bars and `<text>` for the label, with a fixed 960×500 viewBox. The rendering is static, relying on the Share Tech font from Google Fonts and inline CSS styling, with no JavaScript libraries or data-binding logic involved.

Loading thumbnail…

Pseudo bar chart

This pseudo bar chart presents four vertical bars using basic SVG shapes. Each bar is a simple `<rect>` element with fixed coordinates and dimensions, approximating a bar chart without any data binding or axes. The visualization is rendered using the SVG API directly within an HTML file, with the page styling removing margins and hiding overflow. The chart’s purpose is illustrative, showing how static rectangles can mimic a bar chart’s visual structure. It uses no JavaScript libraries or dynamic data processing, relying solely on the markup and CSS for its appearance.

Loading thumbnail…

Pseudo scatter plot

This pseudo scatter plot approximates a scatterplot using overlapping ellipses arranged diagonally across a white SVG canvas, with cluster density increasing toward the upper-right. The ellipses vary in count at each position, suggesting data point frequency rather than precise coordinates. The visualization is rendered directly in SVG, using hardcoded ellipse elements with fixed radii and coordinates. No JavaScript libraries or data-processing APIs are involved; the chart is purely static markup, with the SVG width and height set to 960 by 500 pixels. The repetition of identical ellipses at specific locations simulates a distribution pattern without actual data binding or interaction.

Loading thumbnail…

Fork of Tweak the Face: Clown Pumpkin

A clown pumpkin face rendered as an SVG uses radial gradients to color the orange pumpkin body and red nose, with black triangular eyes and an arc-shaped mouth. The visualization is built with React and D3 v7, using the `d3.arc()` constructor to generate the mouth path and declarative JSX for circles and polygons. The centered group translates all shapes to the middle of a 960x500 canvas, while gradient definitions in `<defs>` layer shading for depth.