Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Nnouralkhoury
Last edited Nov 20, 2020
Created on Nov 20, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
90% 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
88% 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
88% 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
88% 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
86% 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
85% match
Loading thumbnail…

Scatter plot

This scatter plot example demonstrates fundamental D3.js DOM manipulation by rendering automotive data from the auto-mpg.csv dataset. The code uses d3.select and d3.csv to load and parse the data, then appends circles to the SVG using d3’s enter/append pattern. Each circle is positioned with hardcoded cx and cy values, so the visualization currently shows all points clustered at a single location rather than mapping mpg or other variables to axes. The implementation serves primarily as a basic introduction to data binding and SVG element creation.

LLonwabo11
84% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle attributes from the auto-mpg dataset, with points plotted using D3 v5’s `scaleLinear` for the x-axis and `scalePoint` for the y-axis. The SVG rendering includes custom axes with tick formatting and a title. Data is loaded via `csv` and parsed before rendering circles colored steelblue, demonstrating D3’s modular imports and axis customization.

Bbharatbobby
82% match