Skip to main content
SimilarExport ZIP
100%

Line ships at the Battle of Trafalgar

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

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.

AI-generated description

Ships of the line at the battle of trafalgar. Original table on wikipedia, I have edited the original data.

bugs: Something wrong with the bars for Neptune and Swiftsure. Both show wrong color and data, but ship names are correct. Also when hovering the bar is in two sections.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Ttomahawk-jupiter
91% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays how vessel valuations change over time, with each line representing a different vessel and color-coded according to a categorical scale. The data comes from a CSV file loaded from VizHub. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest` for grouping, and `axisLeft`/`axisBottom` for axes, rendering to SVG with a custom `colorLegend` function.

Nnataliaokuneva
69% 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
68% match
Loading thumbnail…

Line chart.js!

This example builds a line chart from Titanic passenger data, plotting the relationship between Age and Fare for a subset of passengers. It uses D3.js v7 to load data from a CSV file via `d3.csv`, then slices the data to focus on a specific range of rows. The chart includes linear scales, axes with labels, and a line generator (`d3.line`), all rendered as SVG elements within an HTML page. The visualization illustrates how D3 can handle data ingestion, scaling, and basic chart construction in a straightforward workflow.

Ssriram.official9@gmail.com
68% match
Loading thumbnail…

Line chart.js!

This example visualizes the ages of Titanic passengers as a line chart, plotting each passenger’s age in sequence along the x-axis. The chart uses D3.js v7 to load CSV data from a GitHub-hosted file, parse the values, and render an SVG with scales, axes, and a line generator. The code employs `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.line` to draw the path, with axes appended via `d3.axisBottom` and `d3.axisLeft`. The rendering is entirely SVG-based, showing a simple yet effective use of core D3 DOM manipulation and data binding.

Vvishnupriya eupuri
68% match
Loading thumbnail…

Untitled

This visualization combines an interactive map of shipwrecks with a force-based clustering algorithm to reveal spatial patterns in maritime losses. It overlays circles on an Ocean Basemap, with each circle representing a shipwreck; as users zoom, the circles coalesce into larger clusters labeled with their count of wrecks. The code uses D3 v5, d3-cluster, d3-tile, and d3.geoMercator for projection and tile loading, rendering the basemap as SVG images and the circles on a canvas via `ctx.arc`. The data comes from a `shipwrecks.csv` file, with zoom and pan handled through d3.zoom.

KKrishu
66% match
Loading thumbnail…

titanic

This D3.js v7 visualization presents a pie chart of passenger survival outcomes from the Titanic disaster, sourced from a CSV file hosted on a GitHub Gist. The animation highlights each slice on hover using a scale transform. The code employs `d3.pie`, `d3.arc`, and `d3.rollup` to aggregate survivor counts, with an SVG renderer and a color scale distinguishing survivors (green) from non-survivors (red). The chart also includes labeled slices, a legend, and axis titles for survival status and passenger counts.

Vveeramallivaishnavi3@gmail.com
65% match
Loading thumbnail…

SVG face

This visualization displays a horizontal bar chart showing the number of Men_line data points for various movie titles, with each bar’s length proportional to the value. It uses React and D3.js v5, specifically `csv` for data loading, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. The bars are rendered as SVG rectangles within a 900x500 pixel canvas, sourced from the provided `data.csv` file.

Uuttam-vish
65% match