Kainsli

@Kainsli·10 public vizzes

Scatterplot with menus

This interactive scatterplot displays relationships between attributes of cars from the UCI Auto MPG dataset, letting users choose which columns appear on the x- and y-axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scales, and d3.axisBottom and d3.axisLeft for axes. Each point transitions smoothly between selections using d3 transitions with staggered delays, while the SVG rendering includes gridlines and axis labels.

May 26, 2021

Loading thumbnail…

Choropleth Map

This choropleth map uses color to encode the economy classification of countries, sourced from world-atlas TSV data matched with TopoJSON geometries. D3’s `geoNaturalEarth1` projection and `geoPath` render country outlines as SVG paths, while a sequential spectral color scale (`schemeSpectral`) fills each territory. An interactive zoom control, built with D3’s `zoom` event, adjusts the projection transform, and a custom legend (from `colorLegend.js`) displays the ordinal scale’s categories with hover effects highlighting individual countries.

May 19, 2021

Loading thumbnail…

World Map Interaction

This example displays an interactive world map built with D3 v5 and TopoJSON, rendered as SVG. Users can pan and zoom the map using D3’s `zoom` behavior, which updates a group transform. The map draws countries from the world-atlas TopoJSON file using `geoPath` and the `geoNaturalEarth1` projection. Hovering over a country highlights it in red via the `:hover` CSS rule, while country names appear as tooltips using SVG `<title>` elements.

May 19, 2021

Loading thumbnail…

Basic World Map

This example uses a world-atlas dataset to display an orthographic projection of the Earth. It renders country boundaries as SVG paths with the d3.geoPath and d3.geoOrthographic functions, while adding a grey sphere as the background. The map loads geographic data from a remote JSON file and converts it using the topojson feature API.

May 19, 2021

Loading thumbnail…

Color and Size Legend

This example demonstrates two reusable D3 legend components: an ordinal color legend and a square-root size legend, rendered side-by-side in an SVG. The color legend maps five categorical domain values to a spectral color palette, with labeled circles spaced vertically, while the size legend encodes numeric ticks with scaled circle radii and translucent fills. Both use D3 v5 data joins (`selection.enter`, `.merge`) and scales (`scaleOrdinal`, `scaleSqrt`), and are invoked via the `.call()` method with custom props for radius, spacing, and text offset.

May 12, 2021

Loading thumbnail…

Basic Scatterplot

This scatterplot displays the relationship between car fuel efficiency (MPG) and weight using data from the UCI Auto MPG dataset, rendered as green semi-transparent circles on an SVG canvas. It shows how heavier vehicles tend to have lower miles per gallon. The visualization uses D3 v6 methods including `csv` for data loading, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` for grid-lined ticks. Margins, custom tick formatting, and axis labels are configured in JavaScript, with styling applied via CSS classes.

May 12, 2021

Loading thumbnail…

Basic Bar Chart

A basic bar chart visualizes the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The chart renders as SVG using d3.v6, employing scaleLinear and scaleBand for scaling, axisBottom and axisLeft for axes, and csv loading to parse the data. Population figures from the United Nations World Population Prospects 2017 are multiplied by 1000, and the bars are styled with a steelblue fill.

May 5, 2021

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data as proportional circles positioned on a world map. Each circle's area corresponds to a country's 2018 population, with hover tooltips revealing specific values. The map supports pan and zoom interactions. Built with D3 v5, it uses `geoNaturalEarth1` for the projection, `geoPath` for rendering country boundaries, and `scaleSqrt` for circle sizing. Population data comes from a CSV dataset merged with TopoJSON world atlas geometries. A size legend and color legend are generated using custom D3 modules.

Apr 3, 2021

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern in D3 with special cases for data changes. Using d3 v5, it renders a bowl of apples and lemons as SVG circles and text labels, with a custom fruitBowl function handling enter, update, and exit selections. The code uses d3.scaleOrdinal for color and radius mapping, and d3.select and d3.range to manage state. Over timed updates, fruits are removed, one apple is replaced by a lemon, and another apple is filtered out, showing how D3 transitions handle these scenarios.

Mar 28, 2021

Loading thumbnail…

Fork of Bowl of Fruit - Animated Transitions

This example demonstrates animated transitions for a fruit bowl visualization using D3 v5 and SVG. Circles represent apples and lemons, with color and radius scales mapping fruit types to visual properties. The code uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections with `transition().duration()` to animate circle positions, radii, and removal. A `setTimeout` sequence triggers changes: removing fruits, replacing an apple with a lemon, and filtering elements. Data is generated randomly via `Math.random()` for unique identifiers.

Mar 28, 2021