Surya Teja Parnampedu

@surify·3 public vizzes

d3 basics

This example introduces fundamental D3.js concepts using a static bar chart of population data from ten countries, loaded from a CSV file. The visualization demonstrates how to set up an SVG canvas, define margins, and create a linear scale (`d3.scaleLinear`) to map population values from 0 to 100,000 onto the chart’s width. An axis is generated with `d3.axisBottom` and appended to a grouped `<g>` element, showing how D3 handles scales and axes for basic data representation. The code relies on D3 v5’s selection and scale APIs, with rendering done entirely via SVG elements.

Jun 17, 2020

Loading thumbnail…

Bar chart with d3

This example demonstrates a simple D3.js data binding workflow that appends paragraphs to the page based on an array of numeric values. The code uses D3 v5’s `select`, `selectAll`, and `.data()` with `.enter()` and `.append()` to create text elements, with `.text()` showing each number. While the commented-out sections include CSV loading and bar chart rendering, the active code only displays the paragraph updates and logs “hello” to the console. The visual output is plain HTML paragraphs under a fixed SVG container, with no visible chart or data visualization rendered.

Jun 8, 2020

Loading thumbnail…

Lets make a face with d3

A smiling yellow face rendered in SVG is built from geometric primitives using D3 selections, with animated eyebrows that repeatedly raise and lower. The code constructs circles for eyes, rectangles for brows, and a path generated by the `d3.arc` API for the mouth, all grouped and positioned via SVG transforms. The eyebrow animation uses chained `transition().duration()` calls to toggle the y-offset between states. The example relies on D3 v5 and vanilla SVG.

Jun 7, 2020