Crab scatter plot

100%

Crab scatter plot

✓ Published1🌍 Public

Last edited Aug 2, 2022

Created on Aug 2, 2022

This example shows the relationship between fishing depth and catch per unit effort for horsehair crabs, with each point representing a single haul. It uses a D3.js (v7) scatter plot rendered as SVG, where the x-axis maps bottom depth and the y-axis shows CPUE. The code loads data from a CSV file via `d3.csv`, then builds the plot using `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.format` for comma-separated numeric labels. Tooltips display each point's exact coordinates.

AI-generated description

D3 Scatter Polt template

MIT Licensed

Similar vizzes

Loading thumbnail…

Crab scatter plot

This scatter plot visualizes the relationship between fishing depth (x-axis) and catch per unit effort (y-axis), with each circle representing a data point from a CSV dataset. The plot uses D3 v7’s `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles with tooltips showing exact coordinate values. Axes and labels are styled with the Share Tech font, while the chart fills the full browser window and updates based on the loaded data, rendering points with a fixed radius of five pixels.

FFAN CHI YU(范紀予)

91% match

Loading thumbnail…

Ice-06 : Scatter Plot

This scatter plot shows the relationship between fish length and weight, with points colored by species using a categorical scale. The visualization loads CSV data from a GitHub gist and renders circles on an SVG canvas using D3 v7’s `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for colors. The code defines margins, appends axis groups, and positions dots via `cx` and `cy` attributes. The data is parsed with `d3.csv`, converting numeric fields before scaling.

LLaasyaJ256

72% match

Loading thumbnail…

Activity6_Q3

This scatter plot visualizes a fish dataset by plotting each specimen’s weight on the x-axis and height on the y-axis, with colored circles distinguishing species (Bream, Roach, Whitefish, Parkki, Perch) via a custom color lookup. The visualization loads CSV data from a GitHub repository, parses numeric fields, and uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create axes and map data coordinates. Markers are drawn as SVG circles using a dataset join, while axis labels are manually positioned and rotated. The chart fills the browser window by setting its dimensions to `window.innerWidth` and `window.innerHeight`.

Ppadiginetivishnupriya@gmail.com

71% match

Loading thumbnail…

Fork of scatter Plot Arun

This fork of a scatter plot by codedraco visualizes penguin measurements, plotting bill depth against bill length while encoding species by color. The D3 v5 code loads CSV data via `d3.csv`, scales the x and y axes with `scaleLinear` and `extent`, and renders circles as SVG marks. Along with custom axes from `axisLeft` and `axisBottom`, the chart includes axis labels and a title, using the full browser window for its canvas.

AArun Pratap

69% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays penguin measurements from a CSV dataset, allowing viewers to change both the x- and y-axes via dropdown menus while the points re-scale dynamically. Built with React and D3 v7 (including `scaleLinear`, `extent`, and `csv` for data loading), it renders as SVG circles with native `<title>` tooltips. Axis tick marks, labels, and a light grid are drawn in separate React components, with dot color fixed to dodger blue. The menus let users explore correlations among attributes like bill length, flipper length, and body mass.

Rrvdv

69% match

Loading thumbnail…

Making a Scatter plot

This example displays a scatter plot of vehicle weight versus horsepower, with a point radius of 25 and semi-transparent teal circles. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom` and `axisLeft` for ticks. A heading appears at the top, with axis labels styled via CSS. The data comes from an external CSV file loaded using `csv`, parsed for numeric values, and rendered within margins specifying inner dimensions.

MMahaveer Jain

69% match

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays penguin bill length against body mass, with each point colored steelblue and labeled by species on hover via a tooltip. The chart loads data from a CSV file hosted on GitHub and renders as SVG using D3 v6. Code defines margins, linear scales, and axis groups, while a tooltip follows the mouse to show species, bill length, and body mass. The example demonstrates modular function creation with `createScatterPlot`, and imports D3 from UNPKG.

HHarshithaAmbilpur

69% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and coloring each point by species (Adelie, Gentoo, and Chinstrap). The code loads data from a CSV URL using `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to build the axes. SVG circles are appended to the DOM with radius and fill attributes derived from bill dimensions and species, respectively.

LLakshmanRangisetti

69% match