Henri Lappalainen

@henrilappalainen·8 public vizzes

Star Wars vehicles comparison

A scatterplot compares Star Wars vehicles across three selectable attributes, mapping length, max speed, crew, passengers, cargo capacity, or cost to the x-axis, y-axis, and circle size. Users toggle between all vehicles or those under 20 meters via a checkbox. The SVG visualization uses d3.scaleLinear, d3.scaleSqrt, and d3.axisBottom/Left, with animated transitions on axis changes. Vehicle data comes from vehicles.json, filtered for numeric fields. Clickable column headers rebuild the axes and circles, while hover reveals vehicle names.

Aug 18, 2019

Loading thumbnail…

Amount of born and died people in Finland

This visualization shows the number of people born and died in Finland over time, with a hover interaction revealing the population, births, and deaths for a selected year. The chart uses a line graph with two colored paths representing births and deaths, alongside a legend and a data display panel. It is built with D3.js v5, using scales such as `scaleUtc` and `scaleLinear`, as well as `axisBottom` and `axisLeft`. The data is loaded from a CSV file, and rendering uses SVG with mouse events to update the display.

Aug 18, 2019

Loading thumbnail…

Planets test

This interactive visualization displays the distribution of fictional Star Wars planets from the SWAPI dataset, mapping their diameter and population values through a bubble chart. Each planet appears as a circle positioned along the axes, with the plot built using SVG rendering and D3’s `scaleLinear`, `scaleSqrt`, and `d3.pack` for hierarchical layout. The visualization also incorporates `d3.axisBottom` and `d3.axisLeft` for coordinate scales, while a custom size legend is generated via the `sizeLegend` function to indicate population scaling.

Aug 5, 2019

Loading thumbnail…

Comparing Star Wars planets

This scatterplot compares Star Wars planets by their diameter and population, with each planet’s diameter also determining the size of its circular mark. The visualization uses D3 v5’s `scaleLinear` for the x- and y-axes and `scaleSqrt` for the radius encoding, rendering the SVG with circles. A size legend encodes the diameter scale, and data are loaded from `planets.json`. Axis tick labels are formatted using D3’s `format` function.

Aug 5, 2019

Loading thumbnail…

New line chart

This chart visualizes Finnish population data, comparing the number of deaths and live births per year as smoothed line paths over time. A color legend distinguishes the two categories, with both lines rendered using an SVG path generated by D3’s `line` and `curveBasis` functions. The visualization uses `d3.scaleUtc` for the time axis, `scaleLinear` for the population counts, and `axisBottom`/`axisLeft` for gridlines and ticks. Data is loaded from a CSV file and scaled to thousands, with a title and axis labels included.

Aug 4, 2019

Loading thumbnail…

Vertical Bar Chart

This vertical bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates, with each bar representing a country’s population in millions. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG, with customized tick labels and rotated country names. Population data is loaded from a CSV file via `d3.csv` and formatted using `format('.2s')`. The visualization emphasizes D3 axis customization, including removed domain lines and angled text labels.

Aug 4, 2019

Loading thumbnail…

Scatter plot testing

This scatter plot visualizes the correlation between horsepower, miles per gallon (mpg), and engine displacement for cars from the UCI Machine Learning Repository’s Auto MPG data set. It shows each car as a circle, with the x-axis representing horsepower, the y-axis representing mpg, and the circle radius encoding displacement. The visualization uses D3 v5’s `scaleLinear`, `scaleSqrt`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as SVG circles with a custom size legend.

Aug 3, 2019

Loading thumbnail…

Comparing Star Wars starships

This interactive scatterplot compares Star Wars starships by cost, length, and crew, using the SWAPI dataset. Users can dynamically select which numeric attribute maps to the x-axis, y-axis, and circle size, with axes and legend labels updating accordingly. A checkbox filters out expensive capital ships, and a smooth D3 transition animates the repositioning of circles when a new column is selected. The visualization is built with D3 v5 and rendered as an SVG, featuring a size legend for the third variable.

Aug 1, 2019