bini-i

@bini-i·4 public vizzes

Stylized Bar Chart

This stylized bar chart displays the population sizes of the top 10 most populous countries, using horizontal bars where length corresponds to population. The chart is rendered as an SVG using React, with D3’s `scaleBand` for categorical spacing and `scaleLinear` for the numeric axis. D3’s `csv` loads the UN World Population Prospects 2019 data, and axis ticks use D3’s `format` to abbreviate numbers. The Poppins font and custom colors give the visualization a modern, clean aesthetic.

Aug 29, 2020

Loading thumbnail…

Lets make me a ZOMBIE d3 js

This example shows a zombie face built from SVG shapes, with animated eyes and eyebrows that move and blink over time. The visualization uses D3 v5 selections and transitions to update circle radii and rectangle positions, while a yellow circle forms the head and a D3 arc path creates the mouth. Rendering occurs through SVG elements within a React framework, with a separate script that changes the background color to red.

Aug 29, 2020

Loading thumbnail…

Hello D3 Version 6

This example shows a yellow SVG circle with blinking eyes and a mouth, created as an introductory demonstration of D3 version 6. It renders a face at the center of an SVG canvas using `d3.select` to append circles and a path. The eyes use chained `transition().duration(2000)` calls to animate their radius between 20 and 5 pixels, while the mouth is drawn with `d3.arc` using specified inner and outer radii and angles. The page also includes a separate `index.js` file that uses `select` from the D3 module to set body text.

Aug 29, 2020

Loading thumbnail…

Hello D3 Version 6

A demonstration of D3 version 6, this example draws a static smiley face as SVG circles and a path. Using `d3.select` and `append` to create elements, it animates the eyes with chained `transition().duration()` calls that alternately shrink and grow the circles' radii. The mouth is generated via `d3.arc()`, setting inner and outer radii with start and end angles, all rendered in an SVG canvas without external data.

Aug 29, 2020