jerz-0788 (@jerz-0788), VizHub

Making a Bar Chart

This example demonstrates how to build a simple, horizontal bar chart using D3 v5 and SVG. It displays population data for ten countries, with bars sized proportionally to each nation’s population in thousands. The code uses `d3.csv` to load the data, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position and size the rectangles. The chart is rendered entirely with SVG `<rect>` elements, with the population values converted to numbers before scaling.

Jun 3, 2020

Loading thumbnail…

Making a Bar Chart

This example demonstrates the initial step of building a bar chart with D3, loading population data from a CSV file and rendering static rectangles for each country. The bars are drawn as SVG rectangles with fixed width and height, and the population values are parsed and multiplied by 1,000. It uses `d3.csv` to load the data, `d3.select` to target the SVG, and the `enter` selection to append the rectangles. Styling is minimal, with no axes or scales applied yet.

Jun 2, 2020

Loading thumbnail…

Let's make a Face with D3.js

A smiling face rendered in SVG with D3.js animates its eyebrows in a repeating up-and-down motion. The code builds the face from basic shapes: a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within a centered group. D3 transitions, using `transition.duration` and chained `.attr` calls, move the eyebrow rectangles between two vertical positions over two-second intervals, creating a winking-like effect. The example uses D3 v5 selectors, the `arc` generator, and SVG attributes.

Jun 2, 2020

Loading thumbnail…

Let's make a Face with D3.js

A yellow SVG face is drawn with D3.js, centered in a 960×500 viewport and constructed from circles, rectangles, and an arc for the mouth. D3 transitions (`.transition().duration(2000)`) repeatedly raise and lower the eye-brow rectangles over four seconds, creating a simple animated expression. The code imports `select` and `arc` from D3 v5, uses d3.arc to build the mouth path, and sets all positions via SVG attributes.

Jun 2, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple SVG composition of colored shapes—circles, rectangles, lines, and a path—arranged in a grid-like layout with a scaled and translated coordinate system. The code uses raw SVG elements in an HTML page with linked CSS, applying stroke and fill styles via class selectors. It demonstrates basic SVG rendering and styling without any JavaScript libraries, serving as a minimal static report of geometric primitives. The visual is self-contained, relying on inline SVG attributes and external CSS rules for presentation.

Jun 2, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple SVG composition of colored shapes—circles, rectangles, lines, and a path—arranged in a grid-like layout with a scaled and translated coordinate system. The code uses raw SVG elements in an HTML page with linked CSS, applying stroke and fill styles via class selectors. It demonstrates basic SVG rendering and styling without any JavaScript libraries, serving as a minimal static report of geometric primitives. The visual is self-contained, relying on inline SVG attributes and external CSS rules for presentation.

Jun 1, 2020

Loading thumbnail…

HTML Cars Report

This example displays a static SVG composition of basic geometric shapes—circles, rectangles, lines, and a path—arranged in a two-by-two grid with a translated row and overlaid strokes. The visualization demonstrates raw SVG markup within an HTML page, using a CSS stylesheet to style the line and path elements with blue and green strokes. Rendered directly in the browser via React, the code employs SVG primitives like `<circle>`, `<rect>`, `<line>`, and `<path>` without any data-binding or interaction, serving as a minimal test of SVG and CSS capabilities.

Jun 1, 2020