Gaurav Prachchhak

@gauravprachchhak·4 public vizzes

Let's create a Bar Chart!

This visualization uses the D3.js v5 library within a React framework to render a horizontal bar chart as an SVG. It displays population data for ten countries from a CSV file, mapping each country name to a bar whose length is proportional to its population using `scaleLinear` and `scaleBand`. The chart is drawn inside an SVG container with margins calculated from the fixed width and height attributes.

Jan 22, 2020

Loading thumbnail…

Let's make a face wit D3.js!

A playful SVG face is drawn using D3.js, with a bright yellow circle for the head, two smaller circles for eyes, and a curved arc for a mouth. The D3 `select` method attaches the visualization to an SVG element, while the `arc` generator creates the mouth path based on specified inner and outer radii and start/end angles. The code uses coordinate translations to center the face and position the eyes symmetrically around the vertical axis. The example demonstrates basic D3 shape generation and SVG manipulation within a React context.

Jan 22, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible visualization setup: a static HTML page that displays the text “Hello HTML” in large, centered type against a plain white background. The styling uses a CSS `style` block within the `index.html` file, setting the body’s `font-size` to 13em and `text-align` to center. No JavaScript libraries or rendering frameworks are involved, making this a pure HTML/CSS showcase. It serves as a minimal scaffold for understanding the basic structure of a web-based visualization before adding interactive or data-driven elements.

Jan 22, 2020

Loading thumbnail…

Cars Report

This example demonstrates how JavaScript modules, arrays, and asynchronous functions generate a text-based car report. It loads a hardcoded JSON array of five cars, filters for models under $2,000, and formats each result into a line. The code uses `getCars()` with a `Promise` and `setTimeout` to simulate a delay, `generateReport()` with `.filter()` and `.map()`, and `formatCar()` for string interpolation. The final report is displayed in an HTML `<pre>` element using `document.getElementById()` and `.textContent`.

Jan 22, 2020