Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Shape

✓ Published0🌍 Public
Bbogasamudramvamsikrishnareddy
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This example visualizes automobile data from a CSV file, plotting Horsepower against Mileage with points colored by vehicle Make using distinct shapes. The scatter plot uses D3 scales for axes and an ordinal scale mapped to symbol types via `symbolsFill`. A custom shape legend explains the mapping. The code demonstrates D3 v7 modular imports, including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`, while handling data loading asynchronously through `d3.csv` and updating the visualization via a state-based render loop.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This example shows a scatter plot of car horsepower versus weight, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within an SVG container, loading data from a CSV via `d3.csv`. Circles are rendered with purple fill and opacity, while grid lines from tick marks and styled axis labels enhance readability. The code dynamically maps data domains to pixel ranges and applies margins for layout.

Eexchoco
84% match
Loading thumbnail…

SCATTER PLOT

A scatter plot visualizes the relationship between two numeric variables from a dataset of automobile characteristics, with each circle representing a car's miles per gallon and horsepower. Built with D3 v5, the visualization uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and SVG circles with a light blue fill and opacity for data points. Data is loaded via `csv()` from a remote URL, with numeric fields parsed and rendered into a bounded plot area with custom axis labels.

Ccocktaildata
84% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and model year for automobile data loaded from an external CSV file. The code uses D3 v5’s `csv` method to fetch the dataset, then applies `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes on an SVG renderer. Circular marks are appended via `selectAll` and `enter` to display each data point, with gridlines generated by tick sizes. A title and axis labels are added using SVG `text` elements.

JJames Malvern
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight using a dataset of car names loaded from a CSV file. The chart renders as an SVG with D3.js v7, mapping horsepower to the x-axis and weight to the y-axis using linear scales. Each data point is drawn as a circle with a fixed radius, and axis labels are appended to clarify the variables. The visualization employs D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot, with margins and dimensions set programmatically to produce a clean, reusable layout.

Rreddysushma994@gmail.com
82% match
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars. The visualization uses red semi-transparent circles to represent individual data points, with axis labels and a title clarifying the chart’s purpose. The code loads data from the Auto MPG Data Set via `d3.csv`, then renders the chart as an SVG using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Styling is applied through external CSS, and the axes include custom tick formatting and gridlines.

NNALLANATHAN
82% match
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between horsepower and weight for individual vehicles, with each red circle marking one data point. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the CSV data loaded via `csv` from a GitHub gist, rendering SVG circles with `selectAll` and `append`. Axis ticks extend across the plot via `tickSize`, and labels and a title are added as SVG text elements, with styling from CSS.

AAli Ahmed
82% match
Loading thumbnail…

Making a scatterplot

This example shows a scatterplot of cars with weight on the x-axis and horsepower on the y-axis, with each point representing a vehicle and a title reading “Cars.” The visualization uses D3 v5’s `csv` to load auto-mpg data, `scaleLinear` and `extent` to map values, and `axisBottom` and `axisLeft` to draw custom axes with removed domain lines. Circles are appended to an SVG container, with axis labels and a title added as text elements, styled using CSS classes for ticks, labels, and overall layout.

VVinh H. Le
82% match
Loading thumbnail…

Reusable Scatter plot

This reusable scatter plot visualizes car horsepower, miles per gallon, cylinder count, and displacement from a CSV dataset, animating through these columns every second. Built with D3 v6, it uses a custom `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG marks. Data points appear as distinct symbols and colors, with axes and labels updating dynamically via `setInterval` and the `svg.call(plot)` pattern.

NNanditha Reddy
82% match