RAMANDEEP SINGH

@Raman-rd·6 public vizzes

Making a bar chart!

This example shows a simple bar chart of country populations from a CSV file; the length of each bar encodes the population number. The chart is rendered as SVG, with each bar’s width mapped from the data’s maximum value using D3’s `scaleLinear` and `max` functions. The code reads data with `csv` and appends `rect` elements to the SVG canvas.

Nov 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 for fundamental DOM manipulation. Circles form the head and eyes, while an arc path creates the mouth. Two rectangular eyebrows animate independently using `transition().duration(3000)` to shift their vertical position. The code demonstrates chaining `.attr()` methods to set SVG attributes, using the `select` and `arc` APIs from the d3 module, and applies static styling through a linked stylesheet. This example focuses on basic element creation and sequential transitions.

Nov 14, 2020

Loading thumbnail…

SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a group—styled with CSS and inline attributes, with color and stroke properties set directly on elements. It shows how SVG elements can be grouped and transformed using the `translate` attribute, and how CSS like `fill` and `stroke` apply to shape rendering. The code uses plain SVG elements and a linked `styles.css` file, which sets the page margin and overflow, though only the body styling is defined in the provided CSS.

Nov 13, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, displaying each vehicle's year, make, model, and cost as a formatted string list. It uses asynchronous JavaScript with a Promise-based `getCars` function that simulates a two-second network delay before returning a hardcoded JSON array. The `generateReport` module filters cars below a maximum price and applies the `formatCar` template literal for output. The page’s `<pre>` element initially shows "Loading..." and updates when the promise resolves. The code relies on ES modules, `JSON.parse`, and standard DOM methods like `textContent`.

Nov 13, 2020

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report, filtering five car records by price and formatting them into a readable list. It shows the process of loading asynchronous data, then applying a filter and transformation pipeline. The code uses JavaScript modules (`import`/`export`) and native array methods like `filter` and `map`, alongside a JSON data source parsed with `JSON.parse`. A Promise with `setTimeout` simulates fetching, while `document.getElementById` updates the displayed message in the HTML.

Nov 13, 2020

Loading thumbnail…

Cars Report

This example demonstrates a minimal D3 version 6 setup by rendering a “Hello World” message into a page element. It uses the `d3.v6.min.js` library loaded from a CDN, with the `index.js` file referencing `document.getElementById` to display the text. The HTML structure includes a styled `<pre>` tag for message output, and the code is bundled via `bundle.js`. The visualization focuses on basic DOM manipulation rather than data-driven graphics, serving as a straightforward starting point for D3 projects.

Nov 12, 2020