Shalin Shah

@shalinshah12·4 public vizzes

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations World Population Prospects estimates. It shows a horizontal bar layout with country names on the y-axis and population values on the x-axis. The example demonstrates D3 v5 axis customization using `d3.axisBottom` and `d3.axisLeft`, with a formatted tick label that converts units from billions to millions. The code utilizes `d3.scaleLinear`, `d3.scaleBand`, and `d3.csv` to load the data, rendering the chart as SVG elements with custom styling for axes, labels, and the title.

Feb 25, 2021

Loading thumbnail…

Fork of Making a Bar Chart

A horizontal bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart emphasizes customization of D3 axes, removing domain lines and applying a tick formatter that converts values to abbreviated units like "B" for billions. Built with D3 v5, the code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles, with labels for the title and x-axis.

Feb 24, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load external libraries and organize code in a VizHub project. It uses D3.js version 5, loaded via UNPKG, to select an HTML element with id “message” and set its text content. The text string “Hello VizHub!” comes from a local ES6 module, myMessage.js, imported using the `import` syntax. The visualization renders in an SVG container with a fixed width and height, while the primary output is a large, centered text message styled through CSS, showcasing modular code structure and D3’s selection API.

Feb 24, 2021

Loading thumbnail…

Cars Report

This example displays a scatterplot of car data, examining relationships between attributes like horsepower and miles per gallon. The visualization loads D3 v5 from a CDN and uses D3’s scales, axes, and SVG rendering to plot circles for each vehicle. It also demonstrates importing local ES6 modules and updating a text element with a message. The chart’s interactive behavior is not shown, focusing instead on static data encoding through positioning and color.

Feb 24, 2021