Making a line chart

100%

Making a line chart

✓ Published2🌍 Public

Last edited May 6, 2019

Created on May 3, 2019

This example displays a scatterplot of automotive data, plotting horsepower on the x-axis and weight on the y-axis, with each car represented by a circle. It uses D3 v5’s `scaleLinear` for both axes and `max` from `d3` to compute the domain extents. The visualization is rendered as SVG, with circles appended to the svg element and positioned via `cx` and `cy` attributes. The data is loaded from a CSV file via `csv`, with numeric fields converted before rendering.

AI-generated description

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

88% 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

88% match

Loading thumbnail…

Basic Scatter Plot

This example shows a scatter plot of car weight against horsepower, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to map data values to SVG coordinates, while `csv` loads the auto-mpg dataset from a remote URL. Gridlines are drawn via tick sizes, and axes labels and a title are appended as SVG text elements.

Ggmille22

87% match

Loading thumbnail…

Fork of example of line chart

This scatterplot visualizes the relationship between horsepower and weight for a sample of automobiles, with each car represented by a semi-transparent red circle. Built with D3 v5, it uses scaleLinear to map both variables and customizes the axes with tick formatting and labels. The visualization loads automobile data from a CSV file and renders it as SVG, demonstrating axis customization through the axisBottom and axisLeft APIs.

Zzjutkarma

86% match

Loading thumbnail…

Making a Bar Chart

This example shows a scatterplot of automobile data, mapping each car’s horsepower on the x-axis and its weight on the y-axis, with a title and labeled axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, loading CSV data via `d3.csv` from a VizHub dataset. The SVG render draws red, semi-transparent circles for each car, with margins, tick marks, and custom text labels styled via CSS. The code explicitly parses numeric columns before rendering.

BBraja Gopal Das

86% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with tick marks. Data comes from a CSV file loaded via `csv`, and the SVG rendering applies a steelblue fill with opacity to the circles. The visualization includes a title, axis labels, and a margin-based layout to position the plot area.

Cceresfin

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot from D3 v5 visualizes automotive data, mapping each car’s weight on the x-axis and horsepower on the y-axis using d3.scaleLinear and SVG circles. The axes are generated with d3.axisBottom and d3.axisLeft, and tick labels are formatted using d3.format. The chart loads data from a remote CSV file and applies a semi-transparent steelblue fill to the circles, with margins, axis labels, and a title configured for readability.

Rratschke

86% match

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3.js v5’s `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Data is loaded from a CSV file via `csv` and mapped to numeric values. The chart includes labeled axes and a title, with gridlines created by removing axis domains.

Ppeterjchan

86% match