Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jul 18, 2020

Created on Jul 18, 2020

This example combines a D3 bar chart with an animated SVG smiley face. The bar chart displays population data for ten countries from a CSV file, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The smiley face, built with `circle`, `rect`, and `path` elements, uses an `arc` generator for its mouth and a `transition` to animate the eyebrows up and down. Both visualizations are rendered dynamically within an SVG canvas, with the chart styled via CSS.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A bar chart displays population sizes for ten countries, with horizontal bars ordered by country name. SVG rectangles are positioned using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, driven by data loaded from a CSV file. The visualization renders entirely with SVG elements, styled via external CSS that removes page margins and hides overflow. Population values are converted from thousands to absolute numbers during data preprocessing.

DDHasanC

86% match

Loading thumbnail…

Shapes with SVG

This example displays a horizontal bar chart of population data for ten countries, with bars rendered as SVG rectangles. The visualization uses D3 v6 scales (`scaleLinear` for the x-axis and `scaleBand` for the y-axis) to position the bars, and employs `axisLeft` and `axisBottom` to generate the axes. The data is loaded from a CSV file using `d3.csv`, and the values are explicitly converted to numbers before rendering. The chart area is inset with margins and a group translation, with bars styled in a solid steelblue color.

Uujjwalgarad

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a horizontal bar chart of country populations, with each bar’s length proportional to population values read from a CSV file. The visualization uses D3 v6’s `scaleLinear` and `scaleBand` to map population and country names to pixel dimensions, and renders the bars as SVG `<rect>` elements. The React and ReactDOM dependencies are declared in `package.json` with custom global mappings, though the chart itself is built purely with D3 and vanilla JavaScript.

Ffrancoisfle

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example draws a smiley face using SVG shapes to demonstrate D3's arc generator and selection methods alongside CSS styling. A yellow circle forms the head, with black circles for eyes and rectangles for eyebrows, while an arc creates the mouth. The right eyebrow animates via chained D3 transitions, moving down then back up over four seconds. The code uses d3.arc for the mouth path and d3.select with attribute setters for shape properties.

ААртем Именин

85% match

Loading thumbnail…

Shapes with SVG

This example displays a horizontal bar chart of country populations as SVG rectangles, using a linear scale for population values and a band scale for country names. The bars are rendered via `d3.selectAll` and `.enter()`, with axes generated through `axisLeft` and `axisBottom`. Data loads from a CSV file and converts population strings to numbers. The chart includes custom tick formatting that abbreviates numbers using `d3.format` and replaces "G" with "B" for billions.

Ffborgomano

85% 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

85% match

Loading thumbnail…

Shape with SVG and CSS

This example displays a horizontal bar chart of population data for ten countries, using SVG rectangles scaled by a linear population axis and a band scale for country names. The visualization is built with React and D3 v5, leveraging `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart. Data from a CSV file is loaded via `csv`, with populations multiplied by 1000, and styled through CSS properties like `fill: steelblue` on the bars.

CCassie-Xiao-Yu

85% match

Loading thumbnail…

Shapes with SVG and CSS

This example draws a simple smiley face using SVG shapes styled with CSS. The visualization creates a large yellow circle for the face, adds two smaller black circles for eyes, and uses CSS to set page margins and a large title font size. The D3 v7 library is loaded via UNPKG, and the code imports the `select` function from `d3` to select the SVG element and append circles with attributes for radius, position, fill, and stroke.

YYang Shun Yu

85% match