Skip to main content
Log in
K

Kiernan Nesslar

@Dastair·9 public vizzes

Loading thumbnail…

Fork of dropdown test

This visualization combines a world map and a scatter plot to explore the geographic distribution and speaker counts of endangered languages. It features a dropdown menu to filter data by country, using d3.geoMercator and d3.geoPath to render the map, while the scatter plot uses a log scale and d3.brush for interactive selection. The code relies on d3.scaleBand, d3.scaleLog, and d3.scaleOrdinal to encode endangerment categories and speaker numbers, with data processed from imported files.

May 14, 2024
Loading thumbnail…

Fork of HTML Starter

This example visualizes endangered languages of the world as a scattermapbox plot, with points colored by endangerment level (vulnerable through extinct) and tooltips showing language names and speaker counts. It loads data from a remote CSV using d3.csv, then constructs a Plotly chart with the `scattermapbox` trace type and a `groupby` transform for categorical styling. The layout uses a dark Carto map style, zoom controls, and custom background colors, all rendered through Plotly's `newPlot` API.

May 14, 2024
Loading thumbnail…

dropdown test

This interactive visualization combines a world map with a scatter plot to explore language endangerment and speaker numbers. A dropdown menu filters the data by country or global view. Map points and scatter plot marks are rendered as SVG circles, colored by endangerment level using a sequential ordinal scale. The scatter plot uses a logarithmic y-axis for speaker counts and supports brushing to highlight matches across both views. Built with D3 v6 and React, it uses `d3.geoAugust` for map projection and `d3.scaleBand`/`d3.scaleLog` for axes.

May 14, 2024
Loading thumbnail…

Extinct Languages ScatterMap

Two linked D3.js v6 visualizations explore the global distribution and endangerment status of languages. A world map uses `d3.geoPath` with an equal-earth projection to plot each language as a point, colored by its degree of endangerment. A connected scatterplot uses a log scale for speaker counts, with a `d3.brush` selection that highlights matching language points on both charts simultaneously. The data comes from a CSV of language statistics joined with a GeoJSON world map.

May 13, 2024
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot displays relationships between birth rate, maternal mortality ratio, and fertility rate for countries, using color to encode fertility. Built with D3 v6, it reads CSV data from GitHub, creates an SVG canvas, and positions circles using linear scales for the axes. A color scale maps fertility values from orange to blue, and circles change appearance on hover, logging event data to the console.

May 5, 2024
Loading thumbnail…

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization presents global migrant deaths using a linked-view design, combining an interactive world map and a brushing histogram. A D3 `geoNaturalEarth1` projection renders country boundaries and graticules, while the map displays circles scaled proportionally to the number of dead and missing migrants. Dragging a brush across the time-based histogram filters the map in real-time, highlighting only deaths within the selected date range. Built with React and D3 v5, it uses `d3.scaleSqrt`, `d3.bin`, and `d3.brushX` for data processing and interaction. Data comes from the Missing Migrants Project, sourced as a CSV file.

May 2, 2024
Loading thumbnail…

Fork of Responsive Scatter Plot

This fork of a responsive scatter plot displays the relationship between birth rate and maternal mortality ratio across countries, using world data from 2023. It loads a CSV file with `d3.csv`, filters out incomplete records, and renders circles with a linear scale for each axis. The chart adapts to its container size through `observeResize` from `@curran/responsive-axes`, which updates the SVG dimensions and scales automatically. The code uses D3 v7 selections and `scaleLinear` for positioning, with reusable axis components handling labels and offsets.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Webpage

This example shows the top 10 job titles in a data science salary dataset, ranked by total salary in USD and displayed as a stacked bar graph. Each bar represents a single job title, with color-coded identity and hover effects that increase fill opacity. The visualization loads CSV data from a GitHub repository using `d3.csv`, aggregates salary sums with `d3.rollups`, and sorts/selects the top entries. It renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, with axes via `d3.axisBottom` and `d3.axisLeft`, plus a legend built from the color scale.

Apr 30, 2024
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the penguin dataset, showing the relationship between Flipper Length and Body Mass, with each data point colored by species. The plot uses D3 v6 to load CSV data, scale the axes with linear scales, and render the visualization as an SVG. The code employs a custom mapping to assign distinct colors for Adelie, Chinstrap, and Gentoo penguins. The axes are labeled via `axisLeft` and `axisBottom`, and sizing attributes reference the `innerWidth` and `innerHeight` properties for responsive rendering.

Apr 30, 2024