windwardpassage

@windwardpassage·6 public vizzes

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips, while non-selected countries and legend items fade to low opacity. The visualization uses d3.geoNaturalEarth1 with d3.geoPath for projected SVG rendering, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, processed through topojson.feature. Clicking a legend item toggles filtering on that value.

Feb 9, 2020

Loading thumbnail…

Smiley with D3.js

Built with D3.js v3, this animated SVG example constructs a cheerful smiley face from basic geometric primitives. The code uses D3 selections and method chaining to append a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-generated mouth. A 2-second transition animates the eyebrow group’s vertical position, creating a subtle winking effect. The example also includes an unused Heatmap class definition, though the visualization itself focuses solely on the SVG composition.

Feb 7, 2020

Loading thumbnail…

Smiley with D3.js

This example demonstrates basic SVG rendering with D3.js by drawing a series of circles whose positions and colors update dynamically with changing data arrays. The code uses D3 selections and the `data()` join to append circle elements, mapping each value to a vertical position (`cy`) and a red or blue fill depending on whether the value exceeds 30. It highlights the enter selection pattern by calling `updateVis` twice with different datasets, showing how new circles are added incrementally. The visualization relies on D3 v3’s core selection API and standard SVG attributes within a 960x500 canvas.

Jan 31, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to map population values to a linear x-axis and country names to a categorical y-axis, with a custom tick formatter abbreviating large numbers with suffixes like "B." The chart is rendered as an SVG, with styled bars, axis labels, and a title, and the code relies on D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` utilities for data input and axis generation.

Jan 17, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates the rendering of primitive shapes—circles, rectangles, lines, and paths—using SVG elements with both inline presentation attributes and external CSS styling. The scene shows how default black fills appear on the first row, then explicit fill colors like red and green on the second, and a third group applies a light blue fill with a black stroke via a parent `<g>` element. CSS classes on the line and path elements set stroke colors, dash styles, and rounded line joins and caps. The SVG is embedded directly in HTML, with the CSS file defining page margins and shape-specific properties. The markup uses explicit coordinates and transforms to position the shapes.

Jan 17, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered with SVG demonstrates D3.js DOM manipulation. The code uses `d3.select` to build circles for eyes and a face, a `d3.arc` path for the mouth, and `transition().attr()` to animate rectangular eyebrows moving up and down over two seconds. The example highlights chained transitions and attribute updates on a fixed SVG canvas.

Jan 17, 2020