Lokesh Chennuru

@lokeshchennuru·3 public vizzes

Create a face with d3.js!

A smiling cartoon face is drawn entirely with D3.js SVG shapes, including a yellow circle head, eyes, rectangular eyebrows, and an arced mouth. The eyebrows animate upward and then back down over two seconds using chained `transition` calls. The code loads D3 v7 via UNPKG and uses `select`, `arc`, and SVG attribute manipulation to construct and position each facial feature relative to the center of the 960 by 500 viewport.

Dec 8, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup by rendering the text “Hello D3 version 7” directly in the browser body. It uses the `select` function from D3 v7 to target the `body` element and `.text()` to set its content. The HTML page loads D3 from a CDN and includes a separate JavaScript file, while the CSS applies a large centered font size. No data or interactive elements are involved, focusing purely on initializing a D3 project.

Dec 8, 2023

Loading thumbnail…

India Population Trend Analysis

This example visualizes India’s population growth from 2000 to 2010 as a line chart. It plots yearly population values from a local CSV file, with a time-scaled x-axis and a linear y-axis showing billions. The code uses D3 v7 loaded via UNPKG, along with `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the SVG path. Axes are appended with `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for year and population.

Dec 8, 2023