Hello VizHub

100%

✓ Published0🌍 Public

Last edited Dec 1, 2019

Created on Dec 1, 2019

This example visualizes the relationship between horsepower and weight for automobiles from the auto-mpg dataset, rendering circles for each car. The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom with a custom tick formatter that abbreviates numbers. A scatterplot is drawn within an SVG, with axes, tick lines, and labels styled via CSS. The chart includes a title and axis labels, with circles colored steelblue at half opacity.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot!

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses red semi-transparent circles positioned on a Cartesian grid with labeled axes and gridlines. The code leverages D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data, scale quantitative values, and render SVG elements. Data is fetched from a VizHub-hosted CSV file and parsed before being joined to circle elements using D3’s enter selection.

SSuzizaher

87% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv` from a VizHub URL. It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, with gridlines from tick sizes. The SVG circles are semi-transparent blue, showing density. Axis labels and a title are added, with margins applied around the main plotting area.

Llars-ruijs

86% match

Loading thumbnail…

Cars Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv` from VizHub. Using D3 v6, the code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to an SVG canvas, with circles styled for transparency. Custom axis tick formatting via `d3.format` and rotated labels enhance readability, while margins and explicit width/height attributes position the chart. The rendering uses SVG elements appended dynamically through D3 selections.

LLidiamir

86% match

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset loaded via d3.csv. The visualization employs d3.scaleLinear for both axes, with the x-axis representing weight and the y-axis horsepower. SVG circles with a fixed radius mark each data point, rendered in steelblue with 50% opacity. The chart includes labeled axes, grid lines created through axis tick sizing, and a title, all styled through the provided CSS.

VVPTomi

86% match

Loading thumbnail…

Cars

This scatterplot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear with .nice() for both axes, and d3.axisLeft and d3.axisBottom to render ticks with grid lines. Axis labels and a title are added as SVG text elements, while the chart is drawn using SVG circles within a margin-based layout.

JJoachim Klug

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a car. The D3 v5 code loads the CSV data, converts numeric fields, and uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes and positioned circles in SVG. Additionally, the chart includes a title and axis labels, with circles styled as semi-transparent steel-blue points via CSS.

HHarish M A

86% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The D3 v5 code uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map data to SVG coordinates, with gridlines and rotated axis labels. Circles are rendered with `selectAll("circle").data(data).enter().append("circle")`, and the CSV is loaded asynchronously via `csv()`. A title and styled tick marks complete the chart, which uses semi-transparent steelblue circles to show data density.

YYedrup

86% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The chart uses red, semi-transparent circles to show data density, and includes labeled axes and a title. Built with D3 v5, the code loads CSV data, applies linear scales via `scaleLinear`, and renders axes using `axisBottom` and `axisLeft`. The SVG output includes grid lines and custom styling from the accompanying stylesheet.

Kkshethia12

86% match