Christopher A. Pfeifer

@Christopher-Pfeifer·5 public vizzes

Customizing axes

This example demonstrates how to customize axes in a bar chart showing the top 10 most populous countries, with population values formatted from raw numbers into abbreviated forms like "200M" using D3's `format` method. The chart removes unnecessary axis lines and gridlines, adds a visualization title, and applies styling from a dataviz style guide. Using D3 v5 with SVG rendering, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to build the chart, while custom tick formatting and CSS classes adjust the appearance of text, lines, and labels.

Dec 11, 2019

Loading thumbnail…

Lets make a face with D3.js

A smiling face is constructed from a network of nodes and links, with D3.js positioning the facial features through a force-directed simulation. The SVG rendering shows how the layout evolves as `d3.forceSimulation` with `d3.forceManyBody` and `d3.forceLink` arranges the nodes into the shape of eyes, a nose, and a mouth. The graph structure is defined in the HTML, and the code uses `d3.select` to append SVG elements and update their positions each tick, creating an animated, abstract portrait.

Dec 8, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be composed and styled within an SVG canvas. Rendered using pure SVG markup with CSS for styling, it shows how individual elements inherit fill colors from parent groups, while explicitly set attributes like `fill="red"` or `fill="yellow"` override inherited defaults. The code uses SVG's native `transform` attribute for scaling and translation, and includes a path defined with `M` (move to) and `L` (line to) commands to draw a multi-segment line.

Dec 8, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

Dec 8, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements and style them with CSS. It shows circles and rectangles with both fill colors applied directly as attributes and groups of shapes where the fill is inherited from an enclosing `<g>` element. The visualization also illustrates how to draw lines and paths, with the line stroke properties defined in a stylesheet. The rendering uses raw SVG markup within an HTML page, with CSS selectors targeting the `.lines` class to apply stroke color and width.

Dec 8, 2019