Stuart Sessions

@stuartsessions·11 public vizzes

Interactive Graph

This example renders an interactive pie chart using D3.js (v6) to display football player statistics from a CSV file. The visualization uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths, with a custom color scale via `d3.scaleOrdinal()`. Data is loaded from a GitHub-hosted CSV and processed with a custom `parseData` function that converts jersey numbers to numeric values. The chart is built inside an SVG container with fixed dimensions, and each slice is styled with black fills and stroke outlines.

May 14, 2024

Loading thumbnail…

Interactive Chart

This interactive pie chart displays vehicle registration counts by vehicle type. The visualization presents the data as proportional segments with value labels, accompanied by a legend that maps each color to a vehicle type and displays the corresponding count. The chart loads CSV data from a remote gist URL, and the code uses the D3.js v5 library, specifically the `pie`, `arc`, `scaleOrdinal`, `select`, and `csv` APIs. The SVG rendering is set up using an arc generator with custom inner and outer radii, with fixed positions for the chart and legend within a 980 by 550 pixel canvas.

May 14, 2024

Loading thumbnail…

Fork of Aussie Toilet Data (Added Features)

This interactive map shows the distribution of public toilets across Australian states, with each state colored by the number of toilets it contains. Users can click a state to zoom in and load suburb-level boundaries, revealing the relative density of toilets in that region. The visualization uses D3.js with `d3.geoMercator` and `d3.geoPath` to render geospatial data, `d3.zoom` for pan-and-zoom interactions, and an SVG-based color scale (`d3.scaleLinear`) to encode toilet counts. Tooltips appear on hover, and the map can be reset or toggled to overlay individual toilet point locations.

May 14, 2024

Loading thumbnail…

Aussie Toilet Data

This visualization maps public toilet density across Australian states using a choropleth of state polygons. It uses `d3.geoMercator` for projection, `d3.geoPath` for rendering, and a linear `d3.scaleLinear` color scale from white to blue to indicate toilet counts per state. Interactive features include `d3.zoom` for panning, tooltips on mouseover, and a click-to-zoom that rescales the view. The map data comes from a states GeoJSON, while toilet counts are derived from a CSV, and state-level sub-maps (suburbs) are fetched from a secondary GeoJSON source.

May 12, 2024

Loading thumbnail…

Fork of Choropleth

This fork of a choropleth map combines a geoEqualEarth projection with a scatter plot, enabling users to explore relationships between country attributes like GDP per capita, population, and urban rate. The map uses a linear color scale to shade countries by urban population rate, while the scatter plot encodes continent with ordinal colors and population with scaled radii. Users can dynamically select X and Y attributes and toggle the Y axis. The visualization uses d3.geoPath for map rendering, d3.scaleLinear for numeric mappings, and d3.scaleOrdinal for categorical coloring.

May 7, 2024

Loading thumbnail…

Players by Country

This interactive dashboard combines a choropleth map with a scatter plot to visualize international football (soccer) players by country. The map colors nations by win percentage, while the scatter plot displays each country’s tournament appearances against wins, with point size encoding population and color indicating continent. Built with React and D3 v6, the visualization uses `d3.geoEqualEarth` for map projection, `d3.geoPath` for drawing country boundaries, and `d3.scaleLinear` and `d3.scaleOrdinal` for encoding data. An SVG-based tooltip provides additional detail on hover.

May 7, 2024

Loading thumbnail…

Hierarchical Horizontal Bar Chart

This example presents a hierarchical horizontal bar chart that visualizes nested data as a drill-down navigation. Users click a bar to descend into its children or click the background to return to the parent level, with bars and text animating through position and opacity transitions. The visualization is built with D3 v3, using `d3.layout.partition` to compute the tree layout, `d3.svg.axis` for the scale, and `transition.attr` tweening to animate changes. It loads JSON data from a remote GitHub Gist and uses SVG for rendering, with color distinguishing parent from child nodes.

May 1, 2024

Loading thumbnail…

PL Bar Chart

This bar chart displays the jersey numbers of players from a soccer dataset, showing the distribution of player positions. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Customized axes are created using `axisLeft` and `axisBottom`, and the chart reads data from a CSV file via `d3.csv`.

May 1, 2024

Loading thumbnail…

Scatterplot

A scatterplot displays the relationship between the size of a country's armed forces and its land area, using one circle per country. It reads data from a CSV file and maps military size along the x-axis and land area on the y-axis with linear scales. The visualization is rendered as an SVG using D3 v4, with circles styled in green and axes labeled from the parsed data.

Apr 30, 2024

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatterplot visualizes penguin data, mapping flipper length to body mass on the x and y axes while encoding species with color. Circle markers are sized with a fixed radius but also receive non-standard `rx` and `ry` attributes from culmen measurements, which do not affect SVG circle rendering. The visualization uses D3 v6 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and SVG selections, loading data asynchronously via `csv` from a GitHub URL. A tooltip div is created but only logs mouseover events to the console, without displaying information.

Apr 30, 2024

Loading thumbnail…

Fork of Responsive Scatter Plot

This example shows a responsive scatter plot of Palmer Penguins data, mapping bill length against flipper length for individual penguins. The visualization uses D3.js to render circles with a light gray background, and it adapts its dimensions to the container size via the `@curran/responsive-axes` library. The code uses `observeResize` to track container dimensions and `scaleLinear` from D3 to compute axis scales. It also imports the dataset from `@curran/penguins`, which includes species, island, and body measurements for each penguin.

Apr 30, 2024