Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
KKateryna
Last edited Sep 21, 2020
Created on Sep 19, 2020

A scatterplot of automobile data from the `cars.csv` dataset displays each car as a semi-transparent circle, with weight on the x-axis and horsepower on the y-axis. The visualization uses D3 v6 to load the CSV, create linear scales with `scaleLinear`, and append SVG circles. Grid lines are drawn via `axisBottom` and `axisLeft` with custom tick sizes, while CSS styles the circles in steelblue. A text label incorrectly reads "Months, count," and the axis title is placed at a fixed position.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

OOsekovS
88% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg dataset, plotting each car as a circle positioned by its horsepower and weight. The SVG rendering uses D3 v6 scales including `scaleLinear` for the x-axis and `scalePoint` for the y-axis, with axes generated by `axisBottom` and `axisLeft`. Circles are appended via data joins, and tick formatting converts large numbers using D3's `format` function, while styling is applied through external CSS classes.

Hhanulik.ondrej@gmail.com
82% 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
82% match
Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a vehicle. Built with D3 v5, the visualization uses `scaleLinear` to map data values to SVG coordinates, `axisBottom` and `axisLeft` for the axes, and `extent` to compute domains. Data is loaded from a CSV via `csv`, and the SVG output renders circles with fixed radius, axis labels, and a title.

Ccornshoots
82% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct axes with gridlines, while SVG circles are positioned using the scaled x and y values. Data is loaded asynchronously from a CSV file via `d3.csv`, and styling is applied through external CSS for tick text, axis labels, and the semi-transparent red circles.

Nntds12
82% match
Loading thumbnail…

Cars Scatterplot

This scatterplot displays the relationship between vehicle weight and horsepower for a dataset of cars. Each circle represents a car, with its position determined by these two measurements using D3’s `scaleLinear` and `extent` functions. The axes are customized with tick labels formatted via `format`, and the plot includes axis titles and a main title. Data is loaded from a CSV file using `csv`, and the visualization is rendered as SVG elements. The styling uses semi-transparent steelblue circles, while axis labels and ticks are sized and colored through CSS.

Vvsapro
82% match
Loading thumbnail…

Cars scatter plots

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The data is loaded from a CSV file and rendered as an SVG using D3 v6. The code employs `d3.scaleLinear` for both axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and `d3.extent` to compute domains. Axis labels and a title are added as SVG text elements, while circles use a fixed radius with steelblue fill and partial opacity.

TTimothy sit
81% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each orange, semi-transparent circle representing a single vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with gridlines, axis labels, and a title included. Data is loaded as CSV via `d3.csv` from a remote source and rendered as SVG circles positioned using `cx` and `cy` attributes. The code also applies margins and a custom inner plotting area.

IIsabel
81% match