mallikgarjuna

@mallikgarjuna·9 public vizzes

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a bar chart layout with a linear scale for population and a band scale for country names. The data comes from the 2018 United Nations World Population Prospects. Built with D3 v5 and SVG rendering, the code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft, with custom tick formatting that converts billions to a readable format and gridlines for the y-axis.

Mar 19, 2020

Loading thumbnail…

Customising Axes

This bar chart shows the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The example demonstrates axis customization with D3 v5, applying a custom tick formatter that converts large numbers to abbreviated units like “B” for billion. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and customizes `d3.axisBottom` and `d3.axisLeft` by removing domain lines and adjusting tick sizes. The SVG rendering includes styled axis labels and a chart title.

Mar 19, 2020

Loading thumbnail…

Making a bar chart

A bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from United Nations: World Population Prospects 2017. The bars are rendered in SVG using D3 v5, with `d3.scaleLinear` mapping population to width and `d3.scaleBand` positioning countries along the vertical axis. Customized `d3.axisLeft` and `d3.axisBottom` axes show the country names and population values, while `d3.csv` loads the data file.

Mar 18, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow smiley face is drawn with D3.js using SVG shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The brows animate upward via chained `transition().duration()` calls on a group, though the second transition repeats the same transform. The code uses the `select`, `arc`, and named attributes from the D3 v5 API, with dimensions set from the SVG's height and a centered `g` transform.

Mar 18, 2020

Loading thumbnail…

Let's make a face with D3.js - 2!

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The code uses `d3.select` to build SVG shapes—circles for the face and eyes, rectangles for eyebrows, and an `arc()` path for the mouth—positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down over two-second intervals, creating a repeating eyebrow raise. The example relies on D3 v5's selection and transition APIs, with all elements rendered directly into an inline SVG.

Mar 18, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped with SVG transforms. The first row uses default black fills, the second introduces explicit fill colors, and the third demonstrates a group-level fill with a black stroke. A fourth group applies a CSS class to style the lines and path with custom stroke width and colors. The rendering uses plain SVG elements in an HTML page, with CSS rules in `styles.css` controlling presentation attributes like stroke, fill, and line joins.

Mar 18, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple car report as an HTML page, showing three used vehicles with their model years and prices in a bulleted list. The first item, the 2012 Nissan Leaf at $1800, is visually emphasized with red text through the `highlighted` CSS class. The page uses standard HTML list elements (`<ul>` and `<li>`) styled by an external stylesheet, with the `body` rule setting a large monospace font size. The rendering relies entirely on native HTML and CSS, with no JavaScript libraries or data-binding frameworks involved.

Mar 18, 2020

Loading thumbnail…

Cars Report - 2

This example demonstrates how JavaScript can fetch and report used car listings by applying filtering and formatting logic. It shows a car report generated as text, displaying only vehicles priced under $2,000, with each entry formatted as “year make model: $price.” The visualization relies on asynchronous data loading via `getCars`, which returns a promise resolving after a simulated delay, and then uses `generateReport` to filter the parsed JSON array and map each car through the `formatCar` function. The result is rendered into a `<pre>` element on the page, updating its text content from “Loading…” to the final report.

Mar 18, 2020

Loading thumbnail…

Cars Report

This example displays a single car manufacturer’s name in large text on a webpage. It shows how to import and parse a JSON array of car objects from a separate module, then access the first entry’s `make` property. The code uses the native `JSON.parse` method and ES module imports, with the message rendered via the DOM’s `textContent` property. The data source is a hardcoded JavaScript string containing five car records, and the output is a plain text report without any charting or visualization library.

Mar 17, 2020