Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Aug 19, 2020

Created on Aug 13, 2020

Forked from 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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

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.

KKateryna

88% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example visualizes temperature over time using a smooth line chart, with SVG shape styling handled through CSS classes for the line path and axes. The data, loaded from a CSV file via `d3.csv`, is parsed into JavaScript Date and numeric values. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to pixel coordinates, while `d3.line` with `curveBasis` generates the curved path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and grid lines are created by setting tick sizes to the chart’s inner dimensions.

OOsekovS

82% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automotive performance data, allowing users to compare any two numeric columns—such as weight, horsepower, or acceleration—via dropdown menus positioned above the axes. Selecting a new column triggers a smooth 1-second animation where circles transition from the center to their new positions using D3’s `transition().duration()`. The visualization uses SVG for rendering, with axis ticks, grid lines, and labels styled extensively via CSS. Data loads from a remote CSV file, and both x- and y-axis selections are dynamically redrawn using `scaleLinear`, `axisBottom`, and `axisLeft` from the d3 module.

Aanuj1450

81% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example visualizes temperature over time using a line chart, with data pulled from a CSV file containing timestamps and temperature readings. The SVG rendering is built with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smooth interpolation. CSS styles define the line’s color, stroke width, and fill, while the axes are enhanced with tick marks and a custom label. The visualization demonstrates how SVG elements and D3 scales work together with stylesheets to present time-series data interactively.

Ssgroko

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of population data for ten countries, using SVG rectangles rendered with D3 v5. The visualization scales bar lengths with `d3.scaleLinear` and spaces categories using `d3.scaleBand`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. CSS styles the bars in pink, and the code reads from a CSV file, formats tick labels with `d3.format`, and logs clicked elements to the console.

OOsekovS

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to draw and style SVG shapes using CSS classes and D3. It loads population data from a CSV file and outputs it to the console. The visualization uses `d3.csv` to parse the data and applies CSS rules to style SVG lines and paths with custom stroke colors, widths, and line joins, showcasing the integration of D3’s data handling with SVG’s vector graphics.

OOlavo Brito

80% match

Loading thumbnail…

Interactive Scatter Plot

This interactive scatter plot visualizes relationships between attributes of automobiles from a 1970s–80s dataset, with dropdown menus letting users choose which numeric columns map to the x and y axes. Circles transition from the center outward via `transition().duration()` as data updates. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while SVG circles render points with opacity and hover highlighting.

Hhxc20060903

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two columns of the automotive dataset by selecting axes from dropdown menus. Built with D3 v5, it renders SVG circles that animate from the center to their positions using `transition()`. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded from a CSV file. The dropdown menus are generated using a reusable `dropdownMenu` component that binds options to a native `<select>` element.

Aannadehtiarova

80% match