tomahawk-jupiter

Corona Virus data

A large number displays the total global COVID-19 deaths from a John Hopkins time-series dataset. The page fetches CSV data with `d3.csv`, extracts the latest date column, sums all values using `Array.reduce`, and formats the result with `d3.format`. The final count is rendered as text into a `<pre>` element via `document.getElementById`.

Jun 19, 2021

Coronavirus Line Chart (codeAlong)

This example tracks cumulative COVID-19 deaths over time using a line chart, loading data from a GitHub-hosted CSV via `d3.csv`. The React app initially renders a loading state and then displays the dataset. It uses React hooks (`useState`, `useEffect`) in `useData.js` to fetch and store the data, while `d3` handles parsing. The visualization is built to follow a YouTube tutorial, with the current code showing only a basic app shell that logs the fetched data to the console, leaving chart rendering for later steps.

Jun 19, 2021

HIV/ AIDS Choropleth Map (codeAlong)

This choropleth map displays the global prevalence of HIV/AIDS among adults aged 15–49 in 2017, with countries colored along a sequential yellow-orange-red scale and gray for missing data. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for the projection, `geoGraticule` for background lines, and TopoJSON world atlas data. A `scaleSequential` with `interpolateYlOrRd` maps HIV prevalence percentages from an IHME dataset, joined to country shapes via ISO numeric codes.

Jun 19, 2021

USA Education Choropleth Map (fcc project)

This choropleth map shows the percentage of adults with a bachelor’s degree or higher across U.S. counties, using a sequential YlGn color scale. The React app loads county, state, and nation boundaries from a TopoJSON file and education data from freeCodeCamp’s CDN, then renders them as SVG paths via `d3.geoPath`. County colors are assigned by looking up each county’s FIPS code in a Map, with white fill for missing data. State outlines are drawn as a mesh overlay, and the map is generated with `d3.json`, `topojson.feature`, and `scaleSequential`.

Jun 17, 2021

test

This choropleth map shades US counties according to the percentage of residents with a bachelor's degree or higher, using an orange-yellow sequential color scale. The visualization leverages React for the SVG rendering, with D3's `geoPath` for drawing county, state, and nation boundaries from a TopoJSON source. Education data is fetched from a freeCodeCamp-hosted JSON file, and county colors are mapped via D3's `scaleSequential` and `interpolateYlOrRd`.

Jun 17, 2021

World Map React & D3 (codeAlong)

This example displays a world map rendered as an SVG using React with D3’s geographic projections. It loads TopoJSON country boundaries from the world-atlas dataset, converts them to GeoJSON via `topojson.feature` and `topojson.mesh`, and draws landmasses, graticules, a sphere outline, and interior borders with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization uses a muted color palette and a Poppins font, demonstrating a clean, minimal cartographic style.

Jun 17, 2021

Log Scale, Missing Migrants Scatter Plot (codeAlong)

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event plotted by reported date on the x-axis and total dead or missing on the y-axis. The y-axis uses a logarithmic scale (d3.scaleLog) to accommodate the wide range of reported casualties, while the x-axis uses a time scale with formatted tick labels. Built with React and D3 v5, the visualization renders as an SVG using custom axis components and a Marks component that maps data points to circles with tooltips. The data is loaded asynchronously from a CSV file via d3.csv and parsed for numeric and date values.

Jun 16, 2021

Histogram, Binned Data, Missing Migrants (codeAlong)

This histogram visualizes the total number of dead and missing migrants per month, using data from the Missing Migrants Project. The code relies on d3.histogram to bin the reported dates into monthly intervals and d3.sum to aggregate the death counts within each bin. React renders the SVG axes and rectangular marks, while d3.scaleTime and d3.scaleLinear map the time and count scales.

Jun 16, 2021

Brushing, Missing Migrants (codeAlong)

This interactive visualization combines a natural Earth projection map with a time-series histogram to explore missing migrant incidents. The map displays circles scaled by the number of dead and missing, using `geoNaturalEarth1` and `geoPath` for geographic rendering. Users can brush over the histogram to filter the map's data points by date, with the brush extent implemented via `brushX`. The visualization loads world atlas data from TopoJSON, converts it to GeoJSON, and uses React to manage state, alongside d3's `scaleSqrt` for circle sizing and `histogram` for binning incidents by month.

Jun 16, 2021

Multi-view, directories, Missing Migrants(codeAlong)

This multi-view visualization combines a natural Earth projection bubble map with a time-series histogram to explore missing migrant incidents. The map uses D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render world landmasses, with bubble size scaled by total dead and missing via `scaleSqrt`. A date histogram below bins reported dates by month using `bin` and `timeMonths`, aggregating counts with `sum`. Both views render as SVG within a React app, loading data from a CSV and world atlas TopoJSON file.

Jun 15, 2021

Line ships at the Battle of Trafalgar

This visualization displays the ships of the line at the Battle of Trafalgar, showing each vessel’s complement or total casualties as horizontal bars colored by fleet affiliation. A dropdown menu toggles between the two numeric attributes. Built with React and D3 v6, it uses `scaleBand` and `scaleLinear` for positioning, with SVG rectangles rendered for each ship. Data is loaded from a CSV via `d3.csv`, and interactive hover tooltips display ship name, value, and fate.

Jun 15, 2021

Trafalgar Ships

This visualization displays the complement (crew size) of ships that fought in the Battle of Trafalgar as horizontal bars on a categorical scale. React manages the data state, using `useEffect` to load a CSV file once via `d3.csv`, while D3’s `scaleBand` and `scaleLinear` position the rectangles. The SVG is rendered with React, and hover effects adjust opacity on each ship’s bar.

Jun 12, 2021

Scatter Plot React & D3 (codeAlong)

This scatter plot displays iris flower measurements, plotting sepal length against sepal width to reveal correlations between the two traits. The visualization uses React to manage component state and render SVG elements, while D3 v6 utilities like `scaleLinear`, `extent`, and `csv` handle data loading and scaling. The `useEffect` hook prevents repeated data fetching, and the Iris dataset comes from a remote CSV file hosted on GitHub.

Jun 12, 2021

Missing Migrants Bubble Map, React & D3 (codeAlong)

This world map visualizes missing migrant incidents from a 2019 subset dataset, with bubble size scaled by the total number of dead and missing per location. Using React and D3 v6, the example loads world-atlas TopoJSON, converts it to GeoJSON with topojson, and renders land, graticules, and country borders via d3.geoPath and geoNaturalEarth1 projection. Migrant data from CSV is positioned by reversing coordinates, with bubble radii set by a d3.scaleSqrt.

Jun 11, 2021

Points on a Map React & D3 (codeAlong)

This map visualization displays world cities as semi-transparent circles sized by population on a Natural Earth projection. Built with React and D3 v6, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land masses, graticules, and country interiors from TopoJSON data, while `d3.scaleSqrt` maps city populations to circle radii. City coordinates from a CSV dataset are projected onto the SVG canvas, with D3’s `csv` loader fetching the data asynchronously.

Jun 9, 2021

Interactive Color Legend, ScatterPlot (codeAlong)

This interactive scatterplot displays the Iris flower dataset, plotting sepal and petal measurements selected via dropdown menus. The visualization uses d3.scaleOrdinal to map species to colors and includes a color legend that filters points with mouse hover, dimming non-matching species. Built with React and d3.v6, it renders SVG marks and axes, with the legend responding to hover events to highlight specific species groups.

Jun 9, 2021

Adding Color Legend, ScatterPlot (codeAlong)

This visualization is an interactive scatter plot of the Iris dataset, mapping sepal and petal measurements to the x and y axes while encoding the iris species with a color legend. The graph uses an ordinal color scale to map the species categories to distinct colors, displayed in a dedicated legend. Built with React and D3 v6, it renders as an SVG and includes dropdown menus for selecting which attributes to display on each axis. The code utilizes D3’s `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` functions to process data and scale values.

Adding Color ScatterPlot (codeAlong)

This interactive scatterplot visualizes the Iris flower dataset, mapping sepal and petal measurements along the axes while coloring each point by species using a d3.scaleOrdinal. Users can switch between the four measurement attributes for either axis via React dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for positioning, and renders SVG circles with native title tooltips, following Curran Kelleher’s code-along tutorial.

Scatter Plot Menus Basic (codeAlong)

This interactive scatter plot displays the Iris flower dataset, allowing users to select which quantitative attribute appears on each axis via dropdown menus. Built with React and D3 v6, the visualization updates scales and marks reactively when menu selections change. SVG rendering draws axis ticks, labels, and circular data points using the `scaleLinear`, `extent`, and `csv` APIs, with native HTML `<select>` elements controlling state.

Menus using select elements in React (codeAlong)

This example shows a React app that renders a pet-selection menu using HTML `<select>` elements. It displays a single labeled dropdown with six pet options (dog, cat, hamster, parrot, spider, goldfish), where the user can choose a value and the selected state updates via React's `useState` hook. The `DropDown` component maps over an `options` array to generate `<option>` elements, passing the selected value and an `onSelectedValueChange` callback. The code uses React 17 and ReactDOM, with styling applied via inline CSS in the HTML file.

React-dropdown Menus ScatterPlot (codeAlong)

This interactive scatter plot displays the Iris dataset, with dropdown menus on top that control which flower measurements (sepal length, sepal width, petal length, or petal width) appear on the X and Y axes. The visualization uses React hooks like useState to manage selected attributes and d3.scaleLinear to map data ranges to SVG coordinates for the scatterplot marks. The react-dropdown library provides the styled selection menus, while specialized React components (AxisBottom, AxisLeft, and Marks) render the axes and circles.

React Template

This example shows a minimal React application that renders the text “React Template” in a blank browser window. It demonstrates the basic structure of a React project, using `ReactDOM.render` to mount an `App` component into a `div` with the id `root`. The code imports `React` and `ReactDOM`, and uses the UMD builds of React 17.0.2 and ReactDOM from unpkg, alongside a separate `bundle.js` file. The body has zero margin and hidden overflow, producing a clean, unobstructed viewport for the component.

Jun 6, 2021

Line Graph React & D3 (codeAlong)

This example shows a line graph of temperature over time for a week in San Francisco, rendered as an SVG in a React component. The visualization uses D3 v6 utilities such as `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to map data to coordinates and format tick labels, while `d3.line` with `curveNatural` draws a smooth path through the points. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart includes labeled axes with custom tick components.

Jun 6, 2021

Refactor Bar Chart React & D3 (codeAlong)

This example shows a horizontal bar chart of the top 10 countries by population in 2020, sourced from a CSV file of UN population data. React state, managed with `useState` and `useEffect`, loads the data once via D3’s `csv` utility, while React components render SVG axes and bars. D3’s `scaleBand` and `scaleLinear` map country names and population values to positions, with tick formatting using `format`.

Jun 5, 2021

Bar Chart React & D3 (codeAlong)

This example shows a horizontal bar chart of population estimates for the ten most populous countries in 2020, using data loaded from a CSV file via `d3.csv`. The visualization renders as an SVG using React components, with `d3.scaleBand` and `d3.scaleLinear` mapping country names and population values to pixel coordinates. React’s `useState` and `useEffect` manage the loaded data and prevent repeated fetching, while the chart includes axis tick lines and labels generated from `xScale.ticks()`.

Jun 5, 2021

Render data with React & D3 (codeAlong)

This example uses React state and the `useEffect` hook to load CSS named colors from a CSV file via `d3.csv`, preventing repeated fetches on re-render. Once loaded, React renders the data as a radial burst of pie slices using `d3.pie` and `d3.arc`, with each slice’s fill set to its corresponding `RGB hex value`. The visualization leverages SVG inside a React component, demonstrating a simple integration of D3’s layout and shape utilities for data-driven rendering.

Load and show data with React & D3 (codeAlong)

This example demonstrates how React and D3 work together to load and display CSS named color data. Using React state and the useEffect hook, it fetches a CSV file containing color names and their RGB hex values, ensuring the data loads only once. The d3.csv utility handles the asynchronous data loading, while React renders thin horizontal colored bars for each entry. During the loading phase, the page displays a “Loading…” message before the colorful visualization appears.

Load data with React & D3 (codeAlong)

This example demonstrates how to load and summarize CSS named color data within a React application. It displays a text message showing the dataset's size in kilobytes, row count, and column count using D3’s `csv` and `csvFormat` utilities. The data is fetched asynchronously from a remote CSV file, with React’s `useEffect` hook preventing repeated loading on state updates. While the data loads, a “Loading…” message is shown, and the result is rendered through JSX into the DOM.

Loading and Parsing CSV Data (codeAlong)

This example demonstrates the result of loading and parsing a CSV file of CSS named colors, presenting a text summary of the data's size in kilobytes, row count, and column count within a large-format display. The visualization uses D3 v6’s `d3.csv` method to fetch and parse the remote CSV data, and `d3.csvFormat` to measure the formatted output. It also includes commented-out alternative code using `fetch` and `d3.csvParse`, showing a manual parsing approach.

Fork of Vega-Lite API Template

This visualization presents a horizontal bar chart of population by country, with bars colored by religion and sorted in descending order. Built with the Vega-Lite API, it registers Vega and Vega-Lite alongside a tooltip handler via vega-tooltip, rendering as SVG through D3 v5. Data loads from a CSV of population and religion statistics using d3.csv, with axis and label styling customized in a separate config module.

Jun 3, 2021

Mouse follower (codeAlong)

A circle follows the mouse cursor across an SVG canvas in this React code-along example. The application uses React's useState hook to track the cursor's clientX and clientY coordinates, which are updated through an onMouseMove event handler on the SVG element. ReactDOM renders the SVG with a circle positioned at those coordinates, with the circle's center point matching the mouse position from the initial center of the 960x500 pixel canvas. The example relies on React's functional component pattern with useCallback for the event handler.

Jun 2, 2021

My smiley (vid code along)

A grid of smiley faces renders in SVG, each with a distinct face color. The faces are built from reusable React components for the background circle, eyes, and mouth, with random variation in eye radius, mouth width, and mouth radius. The mouth uses a D3 arc path generator (d3.arc), while the face container translates each group into place. The example demonstrates composing D3 with React functional components for data-driven, declarative SVG visualization.

May 31, 2021