Joshua Higginbotham

@jhigginbotham64·3 public vizzes

Untitled

This example demonstrates a stacked bar chart with diverging offsets, visualizing categorical data across ordinal x-values. The chart uses D3.js v7 to create an SVG rendering, with a Tableau10 color scheme distinguishing categories. The implementation employs D3's `stack` API with `stackOffsetDiverging` and `stackOrderNone`, mapping data through `d3.map` and `d3.rollup` to structure series. The interface includes a y-axis with gridlines and a monospace font, while interaction shows tooltips displaying x-value, category, and formatted y-value.

Mar 6, 2022

Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3.js, loading the library from UNPKG. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to arrange categories. The rendering shows how to structure a D3 visualization project with local ES6 modules, including a separate file for a simple message. The displayed chart uses divergent stacking, color-coded series, and axis gridlines, while the HTML page also includes a separate message text.

Feb 27, 2022

Loading thumbnail…

mad face

This example shows a mad face rendered as a blue circle with black outlines, two eye circles, and a frowning rectangular mouth positioned symmetrically around the center of the viewport. The face uses React to define SVG elements, with window dimensions used to calculate the center coordinates and the face radius. ReactDOM renders the SVG to the page, while the design hardcodes offsets for the eyes and mouth, making the face scale with the browser window size.

Feb 16, 2022