Charlie Smith (@FueledByOat), VizHub

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Horizontal bars represent each country’s population, with a custom-styled axis and a labeled title. Built with D3 v5, the code uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a tick formatter that converts values to billions. The SVG rendering applies custom fonts, gridlines, and axis labels via CSS.

Sep 4, 2023

Loading thumbnail…

Fork of Green house gas bar chart

A horizontal bar chart displays 2019 greenhouse gas emissions in MtCO₂e for the top 11 GDP countries, using population values from a CSV as the quantitative variable. The visualization, built with D3 v7, uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, with `axisLeft` and `axisBottom` for axes. Hovering over a bar reveals a tooltip with the exact emission value, while the bar’s fill darkens briefly. The chart includes a title and renders with a clean, margin-based layout.

Sep 3, 2023

Loading thumbnail…

Fork of Green house gas bar chart

A horizontal bar chart displays 2019 greenhouse gas emissions in MtCO₂e for the top 11 GDP countries, using population values from a CSV as the quantitative variable. The visualization, built with D3 v7, uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, with `axisLeft` and `axisBottom` for axes. Hovering over a bar reveals a tooltip with the exact emission value, while the bar’s fill darkens briefly. The chart includes a title and renders with a clean, margin-based layout.

Sep 3, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the ten most populous countries as horizontal bars, with country names on the y-axis and population totals on the x-axis. The visualization loads data from a United Nations World Population Prospects 2019 CSV file, which is parsed using `d3.csv` and sliced to the top ten entries. The chart is built with React components and rendered as SVG, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.format` to abbreviate large population values. Hovering over a bar reveals its precise population via a native SVG `<title>` tooltip.

Sep 3, 2023

Loading thumbnail…

what am I doing d3

This example demonstrates a minimal "Hello D3 version 7" message rendered directly into a paragraph element using the `select` API from D3 v7. The page loads the D3 library from a CDN and applies a large 13em font size to the body for visual impact. The code imports the `select` function and calls it on the DOM to set the text content, showing how to begin using D3’s selection and manipulation methods in a straightforward way.

Aug 15, 2023

Loading thumbnail…

what am I doing

This example displays the text "what am I doing" in a large, centered format using CSS styling. The page is a minimal HTML document with a single message element, sized at 13em and aligned to the center of the viewport. It loads D3.js v7 from a CDN, though no D3 functions are actively invoked in the visible code. The visualization serves as a basic demonstration of combining HTML, CSS, and JavaScript in a React-compatible setup, with the D3 library included for potential future use.

Aug 15, 2023

Loading thumbnail…

Fork of HTML Starter Follow Along

This visualization displays a grid of thin horizontal and vertical rectangles, with a circular region in the center revealed by two mask layers. The first set of horizontal strips and vertical strips are generated using `d3.select`, `d3.range`, and the `.join` method to create SVG `rect` elements. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to create the central circular aperture, resulting in an intersecting crosshatch pattern.

Aug 2, 2023