NewSage-01

@NewSage-01·4 public vizzes

Make a Bar Chart with SVG and CSS

This example shows a horizontal bar chart of country populations, with bars extending from left to right, using data from a CSV file. The visualization renders as an SVG graphic, where the bar lengths represent population values and the y-axis positions correspond to country names. The code imports D3 v5 functions like `scaleLinear`, `scaleBand`, and `csv` from the 'd3' module, and builds the chart by appending rectangle elements to the SVG. Population values are multiplied by 1000 in the data preprocessing step.

Dec 26, 2019

Loading thumbnail…

Make a Face with SVG and CSS

This example renders a cartoon face using SVG shapes composed with D3.js v5 selections and the `arc()` generator. A yellow circle forms the head, with circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate vertically using chained `transition()` calls, while the face is centered via a group transform. The visualization demonstrates static SVG composition and D3 transitions within a React framework.

Dec 22, 2019

Loading thumbnail…

Shapes with SVG and CSS

A yellow circle with black stroke forms a face, including two eyes with rectangular eyebrows and a semicircular mouth. The eyebrows animate by moving up and down using D3 v5's `transition` API on SVG `g` elements. The SVG is rendered on an HTML page, with the drawing positioned using `d3.select` and `d3.arc` to define the mouth path.

Dec 21, 2019

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML report of used cars, listing three vehicles with their model, year, and price. It demonstrates a static data visualization using plain HTML and CSS rather than a charting library. The report is rendered as an unordered list, with each car as a list item. The styling, defined in a separate CSS file, applies a large monospace font and highlights the first car in red using a specific class selector, visually distinguishing it from the others. The data is hardcoded directly in the markup.

Dec 21, 2019