Krap

@krapdev·4 public vizzes

Barchart VizHub

This example demonstrates a dynamic bar chart that updates its data through a sequence of timed transitions. Initially, the chart renders 51 randomly generated values as vertical bars using D3 v5’s `scaleBand` and `scaleLinear` for positioning. After one second, the data array is shuffled in place, triggering a smooth transition that reorders the bars. One second later, the final data point is removed, and the exiting bar animates its height to zero before being removed from the SVG. The visualization showcases D3’s data-join pattern with `selection.merge` and `transition.attr` for animated updates.

May 31, 2019

Loading thumbnail…

Live Shop

Live Shop animates a changing grocery receipt as items enter, leave, and shift price, demonstrating D3’s General Update Pattern. Users can click bars to add or subtract item prices, updating a running total with a shake animation. The SVG bars and labels sort by price and transition smoothly using `d3.transition`, `scaleBand`, and `scaleLinear`, with the code built on D3 v5.

May 31, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup required for a VizHub visualization. It renders the text “Hello VizHub!” in a large, centered Ubuntu font against a dark blue background. The page structure is defined in `index.html` with a single message div, while `index.js` imports the `select` function from D3 v5 to set that div’s text content. The message itself is exported as an ES6 module from `myMessage.js`, and styling is applied via `styles.css` using a Google Fonts import.

May 31, 2019

Loading thumbnail…

Hello VizHub

An animated bar chart displays the populations of the world's ten most populous countries using data from a CSV file. The visualization is built with D3.js v5, leveraging `scaleLinear`, `scaleBand`, and `axisBottom` to construct the chart. Bars grow from zero to their full length initially, then update after a two-second delay as the data is modified, showing the population increasing for remaining countries while the last country is removed. The SVG rendering uses `transition` with a 1000-millisecond duration to animate the bar width changes.

May 22, 2019