sayleenaik

@sayleenaik·4 public vizzes

Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The bars are styled with a teal fill and labeled axes in the Poppins font. Built with React and D3 v5, it uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for positioning, and SVG `<rect>` elements for rendering. A formatted `d3.format` function converts population values to billions with a 'B' suffix.

Oct 28, 2020

Loading thumbnail…

Bar chart

A horizontal bar chart displays the population of the top ten most populous countries, with bars ordered from largest (China) to smallest (Mexico). The visualization uses D3 v5’s `csv`, `scaleLinear`, and `scaleBand` to map population values to bar lengths and country names to vertical positions, while `axisLeft` and `axisBottom` generate axes with formatted tick labels. Data from `data.csv` is loaded asynchronously and multiplied by 1000 to reflect actual population figures. The SVG rendering includes a title and axis labels, with bars styled in steel blue.

Oct 27, 2020

Loading thumbnail…

Face D3

A yellow face drawn with D3.js SVG primitives animates its eyebrows in a looping motion. The face, constructed from circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth, is centered in an SVG canvas. The animation uses D3's transition system to move the eyebrow group up and down over two seconds each way. The code imports `select` and `arc` from D3 v5 and runs within a React framework.

Oct 27, 2020

Loading thumbnail…

Face D3

This example uses D3 v5 to render a static red background on an SVG canvas. The code selects the svg element with `d3.select` and applies a red background color via `svg.style`. The visualization is minimal, containing no data points or shapes beyond the filled background. It demonstrates a basic D3 setup within a React framework, with the SVG sized at 960 by 500 pixels.

Oct 27, 2020