Skip to main content
Log in
A

arths-glitch

@arths-glitch·21 public vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. The visualization displays multiple lines, one per city, with a color legend and a title. It uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with d3.curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes axes with tick marks and axis labels.

Jun 8, 2020
Loading thumbnail…

React Color Legend

An interactive scatter plot of the Iris dataset rendered in SVG using React and D3, comparing petal length against sepal width with points colored by species via `d3.scaleOrdinal`. A custom React color legend component displays the three species, and hovering over a legend entry fades non-matching points to 20% opacity while re-rendering only the selected species highlights on top. Axes are generated with `d3.scaleLinear`, `d3.extent`, and `d3.format`, with data loaded asynchronously through D3’s `csv` parser.

Jun 8, 2020
Loading thumbnail…

Scatter plot

This scatter plot uses a point scale for the y-axis and a linear scale for the x-axis to display top countries by population. D3 v5 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` are used to render the SVG circles and axes. The chart reads from a CSV file, though the example uses dummy school data in place of the expected population dataset. The y-axis is labeled with school names while the x-axis shows population values, with axis labels and ticks styled via CSS.

Jun 4, 2020
Loading thumbnail…

Interactive pie and bar

This example links a pie chart and a bar chart to explore export data by category and state. Hovering over a bar filters the pie chart and legend to show the composition for that state; leaving resets the view. The visualization uses D3 v3 with SVG and animated transitions, employing ordinal and linear scales alongside user-defined update functions to synchronize the charts.

Jun 4, 2020
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the income group of each country using a sequential color scale, with hover interactions highlighting individual nations. Built with D3.js (v5) and TopoJSON, it projects world geography via the Natural Earth projection and renders country boundaries as SVG paths. The color legend, generated with custom code, displays ordinal color swatches and labels. Data is sourced from the world-atlas package, merging TSV attributes with TopoJSON geometry.

Jun 3, 2020
Loading thumbnail…

Wine Equality

This interactive visualization explores relationships among chemical attributes of red wine samples from a CSV dataset. Users select numeric attributes and a categorical color mapping, with an adjustable opacity slider. The chart renders as an animated, draggable parallel coordinates plot using D3.js v5, where axis anchor points can be repositioned. Dynamic selection updates the visualization through D3's data joins and event handlers.

Jun 2, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples render as red circles in an SVG bowl, with yellow lemon circles appearing when an apple’s type changes. Hovering toggles a black stroke on the selected fruit, while timed updates remove and replace circles. The code uses `d3.scaleOrdinal` for colors, radii, and stroke states, with `selection.merge` and `transition.attr` animating enter, update, and exit circles. Data is generated randomly via `Math.random`, and interactions trigger `onClick` callbacks.

May 31, 2020
Loading thumbnail…

Fruitbowl V2 transitions

Five apples animate into a row, then shrink away one by one as fruits are eaten or replaced by a lemon. The example demonstrates shared transitions for both entering and exiting circles via `selection.merge` and `selection.exit`. Built with d3 v5, it uses `scaleOrdinal` for color and radius, `transition.attr` with a 1000ms duration, and data joins keyed by `d.id`.

May 31, 2020
Loading thumbnail…

Line chart

This line chart shows a week of temperature readings for San Francisco, plotting date and temperature as continuous variables with points connected by a smooth curved path. The visualization loads CSV data from a GitHub gist, parses dates and numeric values, and renders the chart using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and a d3.line generator with curveBasis. Custom CSS styles the maroon line, axis ticks, labels, and title within an SVG canvas.

May 31, 2020
Loading thumbnail…

2015 Seattle House Galaxy

The visualization renders approximately 7,000 rows of 2015 Seattle house price data as a three-dimensional scatter plot of glowing, color-coded sprites. Price, living square footage, and year built map to the x, y, and z axes, while floor count determines color. Built with D3 for data loading and scaling, and Three.js for WebGL rendering, it uses canvas-generated gradient sprites for high pixel density displays. Animated rotation is controlled via D3's zoom behavior, with a slow automatic pan.

May 30, 2020
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

A choropleth-style bubble map shows migrant deaths by location, with a linked time-series histogram below. Brushing the histogram filters the map circles in real time, revealing temporal patterns. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin` for monthly aggregation. City coordinates and death counts come from CSV data, while country boundaries use TopoJSON from World Atlas, rendered as SVG with graticules and polished styling.

May 30, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

May 29, 2020
Loading thumbnail…

Temperature in multiple cities

This interactive line chart depicts population changes for multiple regions over time, sourced from UN population estimates. Users can click or hover to select a specific year, triggering a vertical line that updates across all series. The visualization uses the D3.js library with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` for paths, and `scaleOrdinal` for color encoding. Data is processed from CSV files using `csv`, `timeParse`, and `range`, and a custom `colorLegend` function displays the categorical color scale.

May 28, 2020
Loading thumbnail…

Temperature in multiple cities

This interactive line chart depicts population changes for multiple regions over time, sourced from UN population estimates. Users can click or hover to select a specific year, triggering a vertical line that updates across all series. The visualization uses the D3.js library with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` for paths, and `scaleOrdinal` for color encoding. Data is processed from CSV files using `csv`, `timeParse`, and `range`, and a custom `colorLegend` function displays the categorical color scale.

May 28, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

May 28, 2020
Loading thumbnail…

Color and size legends

This example demonstrates two legends for mapping data to visual encodings. A color legend uses a d3.scaleOrdinal scale to map categorical fruit names to distinct colors, while a size legend uses a d3.scaleSqrt scale to map a numeric range to circle radii. The legends are custom reusable components, created with d3.selection and appended to an SVG canvas, with each tick rendered as a group containing a circle and a text label.

May 28, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples appear in a row and animate into a fruit bowl using D3 v5 selections. Mousing over each fruit toggles its selected state, which adds a black stroke around the circle. The example uses `d3.scaleOrdinal` for color, radius, and stroke mapping, and `selection.enter`, `merge`, `exit` with transitions. A `setTimeout` sequence then removes one fruit, changes another to a lemon, and filters out a third, demonstrating dynamic data updates with animated circle radii and positions.

May 23, 2020
Loading thumbnail…

Area chart

This area chart shows global population growth over time, with a smooth, curved line filled in maroon against a clean white background. The visualization uses D3 v5 to render an SVG, pulling data from a CSV file containing yearly population figures. The code employs `scaleTime` and `scaleLinear` for the axes, `area` with `curveBasis` for the shaded region, and `axisBottom` and `axisLeft` for gridlines and tick labels.

May 23, 2020
Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for the ten most populous countries, with bars extending left-to-right from a shared origin. The visualization uses D3 v5’s `scaleLinear` for bar widths and `scaleBand` for country labels along the y-axis. Data is loaded from a CSV file via `d3.csv`, and each population value is multiplied by 1,000 before rendering. The resulting SVG bars are appended using `selectAll` and `enter().append('rect')`, with fill colors left at their default black.

May 21, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a static bar chart of country populations, with the data displayed as a simple list in the console rather than rendered visually. The code uses D3 v5’s `select` to target an SVG element and the `csv` method to load `data.csv`, logging each parsed row to the browser’s developer tools. While the HTML contains a greeting and the SVG is mentioned, no bars or axes are drawn, and the chart itself is not yet implemented.

May 21, 2020
Loading thumbnail…

Untitled

This example renders a face using D3.js version 5 within a React framework, drawing a single mouth shape as an SVG path on a 3000×3000 canvas. The code uses the `d3.arc` API to generate the path geometry with an inner radius of 0, outer radius of 100, and angles from 0 to π, creating a semicircular arc. The SVG is selected via `d3.select`, and the path is appended and attributed with the computed arc data. The page also includes simple CSS for layout and a highlighted text style, though no additional visual elements are present.

May 21, 2020