VidhuS

@VidhuS·5 public vizzes

Circle on the Map3

This visualization animates population projections on a world map, displaying how the size of circles at country locations changes over time from 2020 onward. The map is rendered using D3 v5 with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the circles use `d3.scaleSqrt` for sizing. A timestamped sequence of transitions animates the circles’ radii across years, driven by data from a CSV of population estimates. The map also supports zooming through D3’s `zoom` behavior, with hover tooltips highlighting country details.

May 27, 2020

Loading thumbnail…

Let's make First chart

This bar chart displays temperature readings for six controllers, with each bar’s height representing the temperature value from the CSV data. The visualization uses D3.js v5 with SVG rendering, employing `scaleBand` for the x-axis categories, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for labeled axes. Bars are appended as `rect` elements with a steelblue fill, and the y-scale domain ranges from zero to the maximum temperature.

May 27, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with black outlined eyes and a curved mouth, which animates by moving its eyebrows up and down over a two-second cycle. The face is drawn using D3.js v5, with an SVG circle for the head, rectangles for the eyebrows, and a path generated via `arc()` for the mouth. The eyebrow movement uses chained `transition().duration()` calls on an SVG group, illustrating fundamental DOM manipulation techniques with `select` and `append`.

May 27, 2020

Loading thumbnail…

Untitled

A smiley face rendered with D3.js animates its eyebrows by moving them up and down in a looping transition. The face is built from SVG shapes, including a yellow circle for the head, two circular eyes, rectangular eyebrows, and a mouth created using the `d3.arc` path generator. Eyebrow movement is driven by chained `transition().duration(2000)` calls that alter the group’s translate transform, demonstrating fundamental DOM manipulation and animation sequencing in D3.

May 27, 2020

Loading thumbnail…

Cars Report

This example demonstrates asynchronous JavaScript by fetching a hardcoded JSON array of five used cars and generating a text-only report of vehicles priced under $2,000. The page initially displays “Loading...”, then uses a Promise from `setTimeout` to simulate a two-second network delay before rendering the filtered list. The code relies on ES6 modules, `JSON.parse`, `Array.filter`, `Array.map`, and template literals, with `formatCar.js` and `generateReport.js` encapsulating the data transformation logic. The final output appears in a `<pre>` element via `textContent`.

May 27, 2020