Skip to main content
SimilarExport ZIP
100%

2 dimensional Scatter Plot

✓ Published2🌍 Public
FFhouston17
Last edited Jun 14, 2020
Created on Jun 14, 2020

A two-dimensional scatter plot displays the relationship between aircraft price and year of manufacture, with each data point representing a specific aircraft model. The visualization uses D3 v5 with SVG rendering, plotting seven aircraft types across a linear scale for both axes. The chart includes labeled axes, gridlines, and a title, with interactive hover effects that enlarge data points using D3 transitions. Data is loaded from a CSV file using the `csv` function, and the code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to construct the visualization.

AI-generated description

This is a practice bar chart using data from different aircraft types and their powerplant configuration.

In data.csv line 1: change the names "item" and "quantity" to your new parameters. In index.js rename "item" and "qauntity" to your new names as above (see lines 19,20 and 79). In index.js file rename the chart title, x axis label, margins, ticker intervals as desired.

MIT Licensed

Similar vizzes

Loading thumbnail…

2 dimensional Scatter Plot testing data labels and mouse hover

This scatter plot displays aircraft price against manufacture year from a seven-row CSV dataset. Each aircraft type appears as a semi-transparent svg circle with a tooltip title showing its name; hovering triggers a d3 transition that enlarges the circle radius. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv for data loading, with margins and labels specified in the index.js file.

FFhouston17
91% match
Loading thumbnail…

A4 - Scatter Plot in D3

This example visualizes the total number of flights per year from 2003 to 2016 as a scatter plot, where each point represents the total flights for a particular year. The visualization uses D3.js version 7 to render circles on an SVG canvas, with the x-axis mapping years using `d3.scaleBand()` and the y-axis using a linear scale via `d3.scaleLinear()`. Data is loaded from a CSV file using `d3.csv()`, with axes and labels created through `d3.axisBottom()` and `d3.axisLeft()`. The code originates from a VizHub v3 project that supports interactive widgets and continuous hot reloading.

Rronnieferrufino4908@gmail.com
76% match
Loading thumbnail…

ScatterPlotData

This scatter plot displays the relationship between the year and the number of aboard passengers for five major airlines, with each operator distinguished by color from a category20 scheme. The visualization is built using Vega-Lite and D3 v5, loading data from a CSV file via D3's `csv` function. The chart renders as SVG, with tooltips displaying the operator name. Configurations customize axis tick colors and guide label styles.

Aanusharamana0@gmail.com
75% 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
75% match
Loading thumbnail…

Q1. Reusable D3 Scatter Plot

This interactive scatter plot visualizes car sales data, showing the relationship between price and various numerical attributes. The visualization cycles through three different x-axis variables—Horsepower, Mileage, and Year—every two seconds, keeping price on the y-axis. Built with D3.js (v6.7.0), the reusable `scatterPlot` module creates an SVG chart with animated transitions, axes, and a grid. Data is loaded from a CSV file using `d3.csv` and displayed as circles with a consistent fill color, with detected numeric columns automatically selected for the axes.

Mmaddineni2112@gmail.com
75% 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
74% match
Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between a house’s year built and its price. The x-axis represents the year of construction, while the y-axis shows the selling price. The code loads a CSV file using `d3.csv`, maps the data, and renders an SVG with `circle` elements. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, using linear scales. The data is sourced from a gist file linked in the code.

Qq4428611@gmail.com
74% match
Loading thumbnail…

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

BBismark Kofi Owusu Sarfo
74% match