sh1shk1n

@sh1shk1n·3 public vizzes

Playground

This playground example renders a blank 960×500 SVG canvas and logs a numeric variable to the console. It uses D3 v7 to select the SVG element and outputs the value of `myAge` (35) via `console.log`. The page is styled with CSS that removes margins and hides overflow, and the script is loaded from an external bundle. The visualization itself displays no data or graphics, serving solely as a minimal template for testing D3 setup and console interactions.

Aug 30, 2021

Loading thumbnail…

barchart

This bar chart displays the population of ten countries in millions, using horizontal bars sorted in descending order from China to Mexico. The visualization loads data from a local CSV file and renders it as an SVG using D3 v7, applying linear scaling for the x-axis and band scaling for the categorical y-axis. The code employs D3’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with steelblue rectangles styled via CSS. The chart’s axes and margins are configured programmatically, and the population values are multiplied by 1,000 before rendering.

Aug 30, 2021

Loading thumbnail…

testefaenskap

This example shows a cheerful yellow face rendered as SVG, with eyes, moving eyebrows, and a smile. The eyebrows animate upward and downward in a looping transition. The visualization uses D3 v7’s `select`, `arc`, and `transition` APIs to build the facial features and drive the motion. All elements are drawn as SVG shapes, including circles for the face and eyes, rectangles for the eyebrows, and an arc path for the mouth. The animation runs automatically on page load within a fixed 960×500 viewport.

Aug 24, 2021