anandbabu-k

@anandbabu-k·6 public vizzes

example1face

This example displays a horizontal bar chart of population data for the top ten countries, using a linear scale for population counts and a band scale for country names. The SVG rendering relies on D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `select` to append rectangles from the imported CSV. Each bar’s width maps to population, while height is set by `yScale.bandwidth()`. The visualization is framed with margins, leaving the left axis for country labels, and is titled "Half way towards a smiley face."

Jul 15, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a bare bar chart with no axes or labels, using rectangles whose widths encode population. The visualization fetches data from the United Nations World Population Prospects 2019 CSV, then sorts and slices it to the first ten rows inside a React component. It uses d3.csv for loading, d3.scaleBand for the vertical country positioning, and d3.scaleLinear for the horizontal population values, rendering the output as SVG via React elements.

Jul 15, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js

This example builds a smiling face out of geometric SVG shapes using D3.js v5 within a React starter scaffold. It draws a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The `select` and `arc` helpers from the D3 module construct the elements, while chained `transition().duration(2000)` calls animate the eyebrow group vertically up and down, demonstrating simple keyframe-style motion.

Jul 15, 2022

Loading thumbnail…

Fork of d3example1

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face with animated eyebrows. The code uses D3 v5 selections and the `arc` generator to draw the mouth, while chained `transition().duration()` calls shift the eyebrows up and down over two-second intervals. Circles and rectangles are appended to an SVG group, positioned relative to the center of a 960x500 viewport. The animation loops implicitly through the chained transitions, and all geometry is defined with fixed pixel constants.

Jul 15, 2022

Loading thumbnail…

d3example1

A smiling face rendered as SVG demonstrates D3.js DOM manipulation and animation. Yellow circles, black-stroked elements, and an arc path form the face, eyes, and mouth. The eyebrows, appended as rectangles, move upward and return via chained `transition().duration(2000)` calls on a group. The code uses `select`, `arc`, and attribute setters to build the static geometry and animate the eyebrow group's `transform` attribute.

Jul 15, 2022

Loading thumbnail…

basic d3

This example displays a nearly empty HTML page with the title "basic d3". It serves as a minimal starting point for a D3.js visualization, including only the document structure and a reference to CSS and JavaScript usage. The code does not yet render any graphic or data, but it establishes the foundational setup for incorporating D3 and other web technologies. It is built using React and is intended as a bare-bones template.

Jun 27, 2022