sumitmishra9826

@sumitmishra9826·3 public vizzes

Fork of Create a face with d3.js!

Built with D3 v7, this example renders a cartoon face as SVG shapes, including a yellow circle head, eyes, and a mouth drawn with `d3.arc`. The code creates these elements using `d3.select`, `d3.append`, and `d3.arc` from a local ES6 module import. An animated sequence uses `transition().duration()` to move the eyebrows downward and back upward over two seconds, demonstrating chained transitions. All shapes are positioned within a centered `<g>` group on an SVG canvas.

Dec 25, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects 2017. The chart customizes D3 axes by removing domain lines and tick lines, and formats tick labels with `d3.format` to abbreviate values (e.g., “B” for billions). It uses `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders SVG rectangles. The chart is rotated 270 degrees via CSS.

Dec 25, 2023

Loading thumbnail…

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

This example builds a yellow smiley face out of SVG shapes, with animated eyebrows that slide upward and then return. The code uses D3 selections to create and position circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The eyebrow movement is driven by chained `transition().duration()` calls that animate the `transform` attribute. Data is static and hardcoded, rendered entirely through D3 v5's DOM manipulation and SVG generation.

Dec 24, 2023