Skip to main content
SimilarExport ZIP
100%

assignment

✓ Published0🌍 Public
Ssairathan.p045@gmail.com
Last edited Mar 30, 2026
Created on Mar 30, 2026

This example shows a reusable scatter plot of engine horsepower versus fuel efficiency (MPG) using data embedded as a CSV string. The chart renders circles with semi-transparent crimson fill, labeled axes, and a custom margin and size configuration. Built with D3 v7, the code defines a configurable `scatterPlot` function exposing setters for dimensions, accessors, labels, color, and radius, then binds it to an SVG element via `datum` and `call`. SVG rendering handles the axes, grid-free plot, and point positioning through linear scales.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot (Car Engine)

This scatter plot visualizes the relationship between engine size and fuel efficiency (MPG) using a dataset of car engines. The visualization shows individual data points as blue circles, with clear axis labels displaying the measured variables. Built with D3.js (v7), the implementation uses `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render the chart axes. The SVG-based rendering is encapsulated in a reusable `ScatterPlot` function that accepts configurable dimensions, margins, and data value accessors, allowing for flexible reuse across different datasets.

PP Manisha
86% 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
85% match
Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

119h61a05c9@cvsr.ac.in
85% match
Loading thumbnail…

reasuable saatter plot

This reusable scatter plot, built with D3 v7, displays the relationship between car horsepower and fuel efficiency (MPG) for a small dataset. It is implemented as a configurable JavaScript function that accepts data, value mappings, and visual properties via a fluent API. The visualization uses D3's `scaleLinear` for axes, `symbol` shapes for data points, and `axisBottom`/`axisLeft` for tick marks. The example also demonstrates a second implementation using D3 v6 that loads the classic Iris dataset from a CSV file and maps species to different point symbols.

Aadithiarikatla@gmail.com
84% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj
83% match
Loading thumbnail…

Reusable Scatter Plot with d3.js

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

VVinay Vemuri
83% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between engine cylinders and miles per gallon (mpg) for various automobile models, sourced from an auto-mpg CSV dataset. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, with circles rendered via SVG. The chart includes custom axis tick formatting (e.g., abbreviating large numbers) and styling through CSS, demonstrating how to adapt D3’s default axes for a polished presentation.

ZZhengyan Yu
83% match
Loading thumbnail…

scatter plot 7

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for a small sample of cars, with each point representing a vehicle and a tooltip revealing its name. Built with D3.v7, the reusable `scatterPlot` function from `scatterPlot.js` uses `scaleLinear` and `axisBottom`/`axisLeft` to map the data to SVG coordinates. The `index.html` file demonstrates the chart with a static dataset, rendering circles via a D3 selection join, though the primary focus is on the configurable chart generator.

Aadithiarikatla@gmail.com
83% match