Skip to main content
Log in
A

AlpineStranger

@AlpineStranger·11 public vizzes

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays worldwide economic classifications by country, with a color legend that doubles as an interactive filter. Clicking a legend item dims all countries except those matching the selected category, while hovering over the map highlights individual nations. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project geographic features from the World Atlas TopoJSON dataset, with d3.scaleOrdinal and schemeSpectral mapping economic groups to colors. The legend implements click handlers for filtering, while d3.zoom enables panning and zooming. The black background and SVG rendering complete the presentation.

Sep 9, 2023
Loading thumbnail…

D3 base module starter

This example demonstrates a minimal modular setup for D3 v7, rendering a static text message to an SVG canvas that fills the browser viewport. The code uses `d3.select` to append an SVG element sized to `window.innerWidth` and `window.innerHeight`, then applies a custom reusable module via `svg.call(mod)`. The module, defined in a separate file, exposes a `val1` setter and appends a text element with the provided string. It illustrates a clean, component-based pattern for organizing D3 code without any data binding or interaction.

Jan 16, 2023
Loading thumbnail…

Fork of Religions of Largest 20 Countries

This interactive stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, with data from the Pew Research Global Religious Landscape. The code uses D3.js (version 3.5.5) with the `d3.layout.stack` and `d3.nest` APIs to create the stacked layers, while axes and legends are built with `d3.svg.axis` and `d3.legend.color`. Hovering over any bar displays a tooltip via the `d3-tip` library showing the country, religion, and population count. The legend is also interactive: hovering over a religion name highlights that religion’s bars across all countries by rendering a semi-transparent overlay and a foreground layer of subset bars.

Oct 31, 2022
Loading thumbnail…

D3 linear slider

This example shows a draggable linear slider rendered as an SVG triangle handle that moves along an axis. Dragging the handle updates a numeric value between 34 and 100, logged to the console via a callback. The slider is built using D3 v7's `scaleLinear` for positioning, `axisBottom` for tick marks, and `drag` for user interaction. The handle is drawn with `symbol` and `symbolTriangle`, while `slideScale.invert` converts the dragged position back into the data domain.

Oct 29, 2022
Loading thumbnail…

D3 range selecter

This example shows an interactive range selector built with D3 v7, displayed as a horizontal slider with two triangular drag handles positioned over an axis. Users adjust the left and right handles to select a numeric interval between a minimum of 34 and a maximum of 100, with the current range logged to the console on release. The visualization renders in SVG and uses d3.scaleLinear, d3.axisBottom, d3.drag, and d3.symbolTriangle to manage the scale, ticks, and handle movement. The handles are constrained so they cannot cross, and their positions are recalculated using scale inversion.

Oct 29, 2022
Loading thumbnail…

Sol LeWitt Reproduction (D3)

This example reproduces a Sol LeWitt-style wall drawing using D3.js, generating a grid of black vertical and horizontal lines across the full browser window. The code computes line positions from fixed gaps between margins, creating 18 vertical and 9 horizontal lines with red strokes on the vertical set. It renders as SVG via D3 selections and the `join()` method, using `d3.range`-like loops and data arrays built from `window.innerWidth` and `innerHeight`. No external dataset is loaded; the drawing is purely generative.

Oct 28, 2022
Loading thumbnail…

Scatter

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length for each sample. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render the axes and circles. The SVG is dynamically sized to the window, and the plot is encapsulated in a custom `scatterPlot` function with configurable margins, radius, and accessor functions. The code also includes commented-out code for cycling through different variables, and a custom Share Tech font styles the text.

Oct 27, 2022
Loading thumbnail…

Sol LeWitt Reproduction

A grid of black vertical and horizontal lines fills the browser window. The piece reproduces a Sol LeWitt drawing by generating evenly spaced lines based on the window’s dimensions. The core HTML5 SVG API is used directly, creating line elements via `document.createElementNS` and setting their coordinates with `setAttribute`. Vertical lines are spaced at one eighteenth of the usable width, while horizontal lines are spaced at one ninth of the height.

Oct 27, 2022
Loading thumbnail…

D3 Table

This example renders the Iris Dataset as a clean HTML table using D3.js v6. The code builds the table dynamically with `d3.select`, `.append`, and `.join` to create table headers and rows from CSV data loaded via `d3.csv`. Numeric columns are parsed with a custom row function, and the table is styled via external CSS. Though a scatter plot module is imported, the active visualization focuses solely on the tabular presentation.

Oct 20, 2022
Loading thumbnail…

Test

This example demonstrates the use of inline SVG shapes within a minimal HTML page, set against a black background with hidden overflow. The visualization relies on standard HTML and SVG elements without additional JavaScript libraries or data processing. The page contains no visible rendering logic or dynamic behavior, serving primarily as a static scaffold for SVG content. The included iframe links to an external YouTube video, which is unrelated to the displayed graphic. The code does not use D3, Canvas, Three.js, or any other visualization API; it only defines basic document structure and styling.

Oct 19, 2022
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

Oct 16, 2022