tgrex6

@tgrex6·6 public vizzes

world_map

This interactive world map visualizes the locations of nuclear explosions overlaid on a wireframe globe, rendered as an animated SVG. It uses a React wrapper around D3 v3’s `geoMercator` projection, `geoPath`, and `geoGraticule` to draw land, interiors, and graticules from TopoJSON country data. Nuclear event points, sourced from a CSV file, are positioned via the projection and appear as circles with tooltips. A sphere outline and data-driven layer highlight the geographic scatterplot design.

May 12, 2022

Loading thumbnail…

exercise

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, depicting relationships between various car attributes. Users select which columns map to the X and Y axes via dropdown menus, with animated transitions updating circle positions as selections change. The visualization uses D3 v5, specifically the `scaleLinear` and `axisLeft`/`axisBottom` functions for coordinate mapping and axes. Data is loaded via the `csv` function, with circles rendered as SVG elements, each positioned according to the selected column values.

May 12, 2022

Loading thumbnail…

exercise1

D3 v4 renders a time-series line chart tracking VizHub user growth from 2018 to 2022, annotated with key milestones like a Medium post and the 2.0 Kickstarter. The SVG visualization uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line for the path. Circles mark each data point, while d3-svg-annotation adds contextual callouts, all styled with custom CSS for gridlines and axis labels.

May 12, 2022

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of ten countries, using horizontal bars ordered by country name. The example demonstrates customizing D3 axes by formatting population ticks with the `format('.3s')` API (abbreviating values like “1.41B”) and removing default axis lines. It also applies gridlines via `tickSize` and uses `scaleLinear` and `scaleBand` for scales. Data loads from a CSV file, and the visualization renders as SVG elements with styles from an external stylesheet.

Apr 23, 2022

Loading thumbnail…

Bar Chart Practice

This example displays a horizontal bar chart of national populations using data from a CSV file, rendered as SVG rectangles. The code leverages D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to row positions. Population numbers are multiplied by 1000 to reflect actual figures. The chart is styled with steelblue bars and a left margin that accommodates country labels.

Apr 16, 2022

Loading thumbnail…

Bar Chart Practice

This example shows a static HTML page with a large centered message reading “Hello HTML!” styled via CSS. The code uses a plain HTML `<div>` element with a `font-size` of 13 em and `text-align: center` to display the text. It does not include any JavaScript logic, charts, or external libraries. The rendering approach relies solely on standard HTML and CSS, with no data source or interactive behavior present.

Apr 16, 2022