Tom Heffernan

@Heffnt·7 public vizzes

GDP Choropleth Viz final

This interactive visualization presents a global choropleth map where each country’s color encodes its GDP per capita, with a slider to shift the year between 1970 and 2033. Hovering highlights a country in pink, while selecting it turns it red and displays a line plot of that nation’s GDP over time, split into blue (pre-2023) and red (post-2023) segments. The map uses `d3.geoPath` for country shapes and a quantile-based color scale, while the line plot relies on `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from a GDP dataset, with country name mappings to reconcile discrepancies.

May 14, 2024

Loading thumbnail…

GDP Choropleth Viz failed log scale

A choropleth map colors countries by GDP per capita for a selected year, with a slider to scrub through time from 1970 to 2033. Hovering highlights a country in pink, and clicking pins it in red while a line plot beside the map shows that country’s GDP trajectory, split into blue (historical) and red (projected) segments past 2023. A toggle switches the map and plot between linear and logarithmic color/value scales. Built with D3 v6, the visualization uses `d3.geoPath` for map rendering and `d3.scaleLinear`/`d3.scaleLog` for the scales, with country data loaded from external files.

May 14, 2024

Loading thumbnail…

GDP Choropleth Viz save

A choropleth map colors countries by GDP per capita, with a slider to change the displayed year from 1970 to 2033. Hovering a country reveals a line plot of its GDP over time, annotated with red and green dashed lines marking the current year’s value. Built with D3 v6, it uses `d3.geoPath` for map rendering and `d3.scaleLinear` for both the map’s color scale and the plot’s axes.

May 14, 2024

Loading thumbnail…

GDP Choropleth Viz

A world map colored by GDP per capita displays each country’s economic standing for a selected year, controlled by a slider. Hovering over a country updates a line plot showing that nation’s GDP trend over time, with red and green reference lines marking the current year’s value. The visualization combines a `d3.geoEqualEarth` projection rendered as SVG with `d3.scaleLinear` color encoding, alongside a linked line chart built using `d3.line` and axis components. GDP data originates from a CSV file, while country boundaries use a GeoJSON source.

May 14, 2024

Loading thumbnail…

GDP World Map

This world map visualizes geographic GDP data using a choropleth approach, coloring countries by their economic output. The example loads GeoJSON map data and renders it as SVG paths with `d3.geoPath`, while numeric GDP values drive a color scale. It uses `d3.json` to fetch the dataset and `d3.scaleThreshold` to map values to fill colors, with a tooltip providing details on hover. Built with D3 v6, the visualization demonstrates basic geographic mapping and data-driven styling in an SVG container.

May 1, 2024

Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot visualizes football statistics from the Top Football League Scorers dataset, allowing users to compare metrics like goals, shots, and xG across leagues and years via dropdown menus. The D3 v3 visualization encodes player data as colored circles, with a color legend enabling league filtering and hover interactions that highlight individual players or dim unrelated points. The visualization uses D3 scales (scaleLinear, scaleOrdinal), axes from @curran/responsive-axes, and a custom colorLegend module, while responding to container resizing through observeResize.

Apr 30, 2024

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template: it renders the text “Hello D3 version 7” in the center of the page at a font size of 13em. The page loads D3 v7 from a CDN and uses the `select` method from the D3 API to target the body element and set its text content via `.text()`. The code shows a basic setup with an HTML file and a separate JavaScript bundle, which is the standard starting point for building D3 visualizations.

Apr 29, 2024