EDPnajmi

@EDPnajmi·2 public vizzes

Untitled

This example shows a butterfly chart comparing the Teaching, Research, and Citation ratings of a single university, Caltech, using two horizontal bars that extend symmetrically from a central axis. The left side uses royalblue bars, while the right uses steelblue, with numeric values labeled above each bar. Built with D3 v7 in an SVG, the code converts the first row of CSV data into long format, then uses `d3.scaleLinear` for the bar lengths and `d3.scaleBand` for row positioning.

Mar 24, 2022

Loading thumbnail…

D3 tutorial

This example demonstrates how to set up a minimal D3.js visualization within VizHub, using ECMAScript modules for code organization. It loads D3 v5 from UNPKG and displays a static text message, “Hello VizHub!”, centered in the browser via the `select` API and the `#message` div. The code imports `select` from D3 and a local `message` string from an ES6 module, then applies the text with D3’s selection method. Styling is handled through an external CSS file, showing a basic integration of local assets with a CDN-loaded library.

Mar 11, 2022