Skip to main content
Log in
T

TheRoadSign

@TheRoadSign·19 public vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—in a 960-by-500 SVG canvas, using both presentation attributes and CSS classes to control fill color, stroke, stroke width, and line joins. The code applies scaling and translation transforms to group and reposition the shapes, while the stylesheet sets margins and defines the `.lines` class with distinct stroke properties for the line and path elements. It is a straightforward illustration of vector graphics rendering with raw SVG and CSS, without any JavaScript libraries.

Jan 9, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external CSS stylesheet. It shows how presentation can be controlled at the element level with `fill` and `stroke` properties, or grouped and applied via CSS classes like `.lines`. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, combining default styling, explicit fills, and CSS-defined strokes to illustrate layered control over vector graphics rendering.

Jan 9, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using D3.js version 5, focusing on fundamental DOM manipulation with SVG elements. The code explicitly appends a group and a circle element to the SVG canvas, positioning them at the center of a 960×500 viewport. It uses the `select` and `append` methods from the `d3` namespace to build the geometric face outline, with a transparent fill and black stroke. The visualization is purely programmatic, with no external data source, and includes a static smile path defined directly in the HTML markup.

Jan 9, 2020
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG reacts to mouse movement by shifting its eyebrows, demonstrating basic DOM manipulation with D3.js. The example uses `d3.select` to target the SVG element and `d3.arc` to construct the facial shapes, with interactive behavior driven by event listeners. The code is structured as an ES module importing from D3 v5, and the rendering relies purely on SVG elements styled with CSS. The face is the sole visual element, and no external data source is used.

Jan 8, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a structured visual composition. It shows circles, rectangles, lines, and a path arranged on a 960-by-500 canvas, with some shapes inheriting presentation attributes from a `<g>` group while others use explicit `fill` properties. The code uses native SVG elements (`circle`, `rect`, `line`, `path`) and CSS classes from `styles.css` to define stroke colors, widths, and line joins. The rendering approach relies on static SVG markup without JavaScript or external visualization libraries.

Jan 8, 2020
Loading thumbnail…

Let's make a face with D3.js!

A red D3.js smiley face is rendered in an SVG, with animated eyebrows that move to change its expression. The example demonstrates fundamental DOM manipulation by using `d3.select` to style the SVG background and dynamically update facial features. Built with D3 v5, the code relies on standard selection and attribute methods to drive the interactive animation, showing how to bind data to visual elements and create a playful, state-based face.

Jan 8, 2020
Loading thumbnail…

Make a Bar Chart

This bar chart displays the populations of the world’s most populous countries, using a horizontal bar for each nation. It reads population data from a CSV file and renders the visualization as SVG. The code builds the chart with D3.js v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to draw the axes. The bars themselves are appended as `rect` elements, with a fixed steelblue fill.

Nov 25, 2019
Loading thumbnail…

Make a Bar Chart

This bar chart displays the populations of the world’s most populous countries, using a horizontal bar for each nation. It reads population data from a CSV file and renders the visualization as SVG. The code builds the chart with D3.js v5, using `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to draw the axes. The bars themselves are appended as `rect` elements, with a fixed steelblue fill.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by loading population data from a CSV file and rendering each country as a static SVG rectangle. The code uses `d3.csv` to fetch and parse the data, converts population values to numbers, and applies `selectAll` with `enter().append('rect')` to create 300x300 pixel squares. While the title suggests an interactive smiley face with moving eyebrows, the visible script only logs the parsed data and appends rectangles, with no facial features or animation logic implemented.

Nov 25, 2019
Loading thumbnail…

Making a Bar Chart

This example shows a simple bar chart of population data for eight countries, loaded from a CSV file. The chart renders as a single black square because the code only appends a rectangle for each data row and sets its width and height to 400 pixels, without scaling or positioning them. The implementation uses D3 v5’s `select` and `csv` functions to select the SVG element and parse the data, converting the population strings to numbers with `+d.population * 1000`.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example builds an animated smiley face using D3.js, demonstrating fundamental DOM manipulation with SVG elements. It loads population data from a CSV file using `d3.csv` and binds it to rectangles via `data().enter().append('rect')`, though the visual face itself is constructed from SVG shapes. The code uses D3 v5 with `select` and `csv` imports, setting fixed rectangle dimensions of 300×300 pixels. The rendered SVG is 960×500, with the face representing population values for eight countries, though the interactive eyebrow movement hinted in the README is not yet implemented in the visible code.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Nov 25, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

Nov 25, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A green X-shaped pair of lines fills the entire viewport, with the SVG’s width and height attributes continuously updated based on the container’s client dimensions. The code uses a CSS fixed-position div to define the chart area, then directly sets the SVG dimensions via `clientWidth` and `clientHeight` within a `redraw` function. A `window.addEventListener("resize", redraw)` triggers the update, while D3’s data join (`selectAll`, `enter`, `merge`) efficiently redraws the line elements with updated coordinates and stroke properties.

Nov 25, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A green X-shaped pair of lines fills the entire viewport, with the SVG’s width and height attributes continuously updated based on the container’s client dimensions. The code uses a CSS fixed-position div to define the chart area, then directly sets the SVG dimensions via `clientWidth` and `clientHeight` within a `redraw` function. A `window.addEventListener("resize", redraw)` triggers the update, while D3’s data join (`selectAll`, `enter`, `merge`) efficiently redraws the line elements with updated coordinates and stroke properties.

Nov 25, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates a chart that responds to browser window resizing by redrawing an SVG to match the container’s current dimensions. On each resize event, the code reads the div’s `clientWidth` and `clientHeight` properties, then updates the SVG element’s `width` and `height` attributes via D3 v5 selections. It draws two intersecting green lines, forming an X, with thick semi-transparent strokes to visually confirm the resized coordinate system. The rendering approach uses D3’s data join with `enter()` and `merge()`, plus a CSS fixed-position container to fill the viewport.

Nov 25, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A green X-shaped pair of lines fills the entire viewport, with the SVG’s width and height attributes continuously updated based on the container’s client dimensions. The code uses a CSS fixed-position div to define the chart area, then directly sets the SVG dimensions via `clientWidth` and `clientHeight` within a `redraw` function. A `window.addEventListener("resize", redraw)` triggers the update, while D3’s data join (`selectAll`, `enter`, `merge`) efficiently redraws the line elements with updated coordinates and stroke properties.

Nov 25, 2019