Thaverman

@Thaverman·11 public vizzes

Fork of World Cities

This visualization displays a world map with cities marked as small points, using a natural Earth projection. The map renders country boundaries from TopoJSON data and plots city coordinates from a CSV dataset, with each city’s position computed via the `d3.geoNaturalEarth1` projection and drawn using `d3.geoPath`. The code leverages `topojson-client` to convert TopoJSON features and `d3.csvParse` to load the city data, while graticule lines and an outline frame the map.

Oct 6, 2023

Loading thumbnail…

Fork of Bar Chart

This fork of a bar chart shows the percentage of players who achieved a perfect, zero, or partial match for each named player in a PG-2021 matches dataset, sourced from a Gist hosted on GitHub. The visualization plots each player's name on the x-axis and the percentage values on the y-axis, using a D3 v7 SVG canvas. It leverages D3 APIs like `d3.scaleBand`, `d3.scaleLinear`, `d3.csv` for data ingestion, and `d3.axisBottom`/`d3.axisLeft` for axes, with bars styled via a `.bar` class.

Sep 15, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes a dataset of PG2021 matches, plotting each entry’s percentage of something matched against its name. The SVG chart uses `d3.scaleLinear` for both axes, with `d3.axisLeft` and `d3.axisBottom` to render tick labels, and circles are drawn via SVG `rect` elements (though named as circles). The data is loaded from a CSV file using `d3.csv`, and the layout adapts to the browser window’s inner dimensions.

Sep 15, 2022

Loading thumbnail…

D3 Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through the four measurement columns every two seconds. Each point is rendered as a distinct SVG symbol based on species, with axes updating to reflect the newly selected variable. The visualization uses D3 v7’s `csv` loader, `scaleLinear` and `scaleOrdinal` scales, and `transition` to smoothly animate positional changes. The scatter plot is built as a reusable function via a closure pattern, with the `symbol` generator creating the point markers.

Sep 15, 2022

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This gallery example uses Highcharts with its 3D extension to render a vertical bar chart comparing application download metrics across five years (2018-2022) for six named store services. The chart applies a tilted three-dimensional perspective with configurable depth, alpha, and beta angles. Each service appears as a distinct colored bar series, labeled on the z-axis as "PriceGrid - Cart Data." The data is drawn from CSV files representing year-specific matches, while the chart’s static categories are hardcoded in the xAxis. The implementation also includes an unfinished d3.js menu module and parsing logic for linked CSV datasets.

Sep 14, 2022

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot uses D3 v6 to visualize the Iris Dataset, shifting points between axes selected from dropdown menus. Built with a reusable `scatterPlot` component, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` with a 1000-millisecond duration, plus a 10-millisecond stagger delay, to animate both circle positions and axis updates. Selections trigger D3's `dispatch` events, while `join` handles entering, updating, and exiting SVG `circle` elements.

Sep 13, 2022

Loading thumbnail…

Change to Bar

This interactive scatter plot maps a dataset of football matches, plotting Perfect Match values against a variety of derived attributes. Switching the X or Y axis via drop-down menus smoothly transitions the points to new positions, using an animated delay. Built with d3 v6, the visualization uses the `selection.join` API to efficiently manage circle and axis elements, while `scaleLinear` and `transition` handle the coordinate mapping and animation. The Iris Dataset URL is referenced, though the plotted data originates from a provided CSV source.

Aug 19, 2022

Loading thumbnail…

Bar Stack

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, using data from Pew Research. It uses D3.js v3 with SVG and animation, featuring d3.layout.stack for the stacked bars, d3.svg.axis for scales, d3.legend for a color legend, and d3.tip for tooltips. Hovering over bars reveals detailed tooltips, while hovering over the legend highlights individual religions by dimming the background through a semi-transparent overlay layer.

Aug 19, 2022

Loading thumbnail…

Stacked bar

This stacked bar chart shows the top 10 NASCAR drivers by total wins across different tracks from 1975 to 2003, with each bar segmented by track and colored accordingly. It uses vega-lite API to create the visualization, loading data from a CSV file via d3.csv. The bars are sorted descending by win count, and a tooltip displays the driver name and track-specific win totals. The color scale maps track names to distinct colors, while config.js customizes axis and label styling. The encode method specifies x, y, and color channels with count aggregation.

Aug 19, 2022

Loading thumbnail…

Fork of Fork of United States Educational Attainment - Choropleth Map

This choropleth map of the United States visualizes the percentage of adults aged 25 and older with a bachelor’s degree or higher, using a purple sequential color scale to encode educational attainment by county. County boundaries are rendered as SVG paths via `d3.geoPath`, with missing data shown in gray. A custom `d3.scaleThreshold` color legend displays class breaks, while mouseover interactions reveal county names, states, and percentages in a blurred tooltip. The visualization combines React components with D3 v5, importing data from FreeCodeCamp’s JSON endpoints for county boundaries and educational statistics.

Aug 18, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes rendered from raw HTML elements, including circles with distinct fill colors, a navy rectangle with a yellow stroke, green lines, and path elements that create both straight segments and a curved teardrop-like form. The visualization uses static SVG markup directly in the document body rather than JavaScript libraries, showcasing how vector graphics can be composed manually. Each shape is defined by hardcoded coordinates and styling attributes, with comments explaining the difference between absolute and relative path commands. The result is a simple educational reference for constructing custom SVG visuals without external frameworks.

Jul 22, 2022