Skip to main content
Log in
J

Jai Aswani

@jaiaswani10·4 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the populations of the world’s most populous countries, drawn as a horizontal bar chart using D3.js v5. The visualization uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis to map population values to rectangular bars, with axes rendered via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using D3’s `csv` function, and the chart is rendered as SVG elements within a 960×500 canvas.

Apr 5, 2020
Loading thumbnail…

Let's make a face with D3.js!

This bar chart displays the populations of the world’s most populous countries, drawn as a horizontal bar chart using D3.js v5. The visualization uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis to map population values to rectangular bars, with axes rendered via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using D3’s `csv` function, and the chart is rendered as SVG elements within a 960×500 canvas.

Apr 5, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond dynamically to browser resizing. A full-screen SVG element displays a large green X composed of two diagonal lines, with the chart container styled to fill the viewport using fixed CSS positioning. The `redraw()` function extracts the container’s current dimensions via `clientWidth` and `clientHeight`, then updates the SVG’s width and height attributes and adjusts the line coordinates accordingly. A window `resize` event listener triggers a redraw on every size change, ensuring the graphic always fits the available space.

Apr 5, 2020
Loading thumbnail…

HTML Starter

This example presents a simple cars report using a static HTML page that displays a list of three used vehicles with their prices. It demonstrates basic styling with a monospace font and highlights the first car (a 2012 Nissan Leaf) in blue through the `.highlighted` CSS class. The page uses plain HTML markup with a linked external stylesheet, requiring no JavaScript or external libraries to render the content.

Apr 5, 2020