Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published2🌍 Public
Nnouralkhoury
Last edited Nov 19, 2020
Created on Sep 28, 2020
Forked from HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

Nnouralkhoury
100% match
Loading thumbnail…

HTML Starter

This example creates a static scatter plot of automotive data, charting horsepower against weight. The visualization uses D3 v6's scaleLinear, axisBottom, and axisLeft APIs to render axes and plot circles for each car model. Data is loaded remotely from a CSV file hosted on vizhub.com, with margins and dimensions calculated from the SVG element. The plot includes labeled axes, a titled heading, and red semi-transparent circles, all rendered as SVG.

Nnouralkhoury
100% match
Loading thumbnail…

HTML Starter

This example visualizes automobile data by plotting a scatterplot of weight against horsepower, with each vehicle represented by a semi-transparent red circle rendered in SVG. The chart uses D3 v5 scales, axes, and the `csv` loader to fetch and parse the auto-mpg dataset from an external URL. It applies linear scales for both variables, adds gridlines via tick sizing, and includes a title within the chart area. The visualization is built within a React and D3 framework.

CChika
92% match
Loading thumbnail…

HTML Starter

This example displays a scatterplot of automobile horsepower and weight from the auto-mpg dataset, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` to map data to SVG coordinates, while `axisLeft` and `axisBottom` generate gridlines and tick marks. Circles are appended to the SVG via data joins, styled with opacity, and sized at a fixed radius of 10 pixels. The axis labels and title are added as SVG text elements.

DDanzeOnn
89% match
Loading thumbnail…

HTML Starter

This example presents a scatter plot of the auto-mpg dataset, using red semi-transparent circles to show the relationship between vehicle attributes. The code imports specific D3 functions like `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the chart within an SVG, while CSS styles the circles and text. The data is loaded as CSV and parsed into numeric values, though the rendering logic itself is left as an empty function, leaving the visualization incomplete.

Nnouralkhoury
88% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This example visualizes the relationship between horsepower and weight for a dataset of cars, with each vehicle represented by a semi-transparent red circle. The code uses D3.js v5's `csv` method to load data from a remote file, `scaleLinear` to map data values to pixel coordinates, and `axisBottom` and `axisLeft` to render axes with grid lines. The scatter plot is drawn as an SVG, and the chart includes labeled axes and a title, with margins and padding handled manually.

HHwl98
84% match
Loading thumbnail…

D3 Starter - Creating Cars scatterplot

This scatterplot charts car weight against horsepower, with each car represented as a translucent red circle. The data is loaded from the Plotly auto-mpg dataset and parsed as numeric values before rendering. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `format`, and `extent` APIs to construct the SVG chart, including labeled axes and a title. Axis grids and tick marks are styled via CSS, while the plot area is sized using computed margins.

Mmaxthamt
84% match
Loading thumbnail…

HTML Starter

This example demonstrates how to build a scatterplot in React using D3 v4, displaying the relationship between city and highway fuel economy from a CSV file. The code creates linear scales for both axes, appends SVG circles with opacity and color encoding, and calls `d3.axisBottom` and `d3.axisLeft` to render the axes. The page also includes a basic SVG canvas with circles positioned via `selectAll`, `data`, and `join`, showing a simple data-binding pattern in plain HTML.

AArthur Kozhevnik
84% match