Skip to main content
SimilarExport ZIP
100%

Trafalgar Ships

✓ Published0🌍 Public
Ttomahawk-jupiter
Last edited Jun 12, 2021
Created on Jun 12, 2021

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.

AI-generated description

A program that loads in some data about css named colors using d3 utilities and uses React state to keep track of that data.

Using useEffect from React stops the data from loading repeatedly with every state change. Without this it will re-load constantly.

Use React to render the data onto the page as a radial burst.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ttomahawk-jupiter
91% match
Loading thumbnail…

Data Visualization ICE5

This example displays a bar chart of the Titanic disaster dataset, with bars colored by survival status and gender, using D3.js v7 for data binding and SVG rendering. It shows the number of passengers per class and sex, with an interactive tooltip revealing exact values on hover. The page also includes a message container that reports the CSV file size, row count, and column count, demonstrating basic data loading and inspection. The code loads data from a GitHub-hosted CSV and uses `d3.csv` and `d3.select` for chart construction.

TTharun2022
69% match
Loading thumbnail…

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()`.

Ttomahawk-jupiter
67% match
Loading thumbnail…

Loading data with React

This example demonstrates how React state manages data loaded asynchronously with D3 utilities. A bar chart displays quantitative values with axes, using D3's `scaleLinear` for positioning and `axisBottom` for tick labels. The visualization renders SVG elements generated through React components, with hover interactions highlighting individual bars. Data originates from a CSV file fetched via `d3.csv`, and the loaded dataset populates the chart after a state update triggers re-rendering.

Nn.koldovsky@gmail.com
67% match
Loading thumbnail…

D3 Visualization tutorial

This example shows a bar chart of population counts for ten countries, with the United States and China dominating the visual scale. Built with D3 v5 and React, the visualization loads tabular CSV data and renders it as SVG rectangles. The code uses D3’s `csv` parser, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw tick marks. Population values are converted from thousands to raw counts before mapping to pixel widths.

GGunMoLee
67% match
Loading thumbnail…

Loading Data (Replica) with React & D3

This visualization demonstrates React managing D3-driven data loading and rendering. It displays a bar chart of the top 15 most populated countries, alongside a pie chart of CSS named colors, with data fetched via D3's `csv` utility. Using React's `useState` and `useEffect` hooks, the program loads CSV data from GitHub Gists, then renders SVG using D3's `scaleBand`, `scaleLinear`, and `arc` APIs. Axes and bars are defined as reusable React components.

FFelipe Restrepo felipollo
67% match
Loading thumbnail…

Refactored Bar Chart

This horizontal bar chart displays the population of five countries using D3’s `scaleBand` and `scaleLinear` utilities within a React component. The SVG rendering separates axes and marks into reusable modules (`AxisBottom`, `AxisLeft`, `Marks`), while `useData` fetches a CSV via D3’s `csv` and formats values with `format(".2s")`. The visualization retrieves data from a GitHub gist, applying a Poppins font and a teal fill to the bars.

LLewis Ward
66% match
Loading thumbnail…

Data Viz w/ D3 And React

This visualization displays all CSS named colors as horizontal SVG bars, stacked vertically in a 960-pixel-wide column. The React component fetches color data from a remote CSV file using the `csv` function from D3 v6, then renders each row as a div with its corresponding RGB hex value as the background color. The example demonstrates integration of D3’s data-loading utilities within a React state management flow, using hooks like `useState` and `useEffect` to handle asynchronous data fetching and display a loading message until the dataset arrives.

AAndres de la Garza
66% match