Ashutosh Singh

@Ashutosh-Singh-me·6 public vizzes

Cars Scatter Plot

This scatter plot displays the top 10 most populous countries using circular marks, with population on the x-axis and country names on the y-axis. The visualization uses D3 v6’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to map data from a CSV file, with a `.nice()` function for rounded tick values. Circle elements are appended to an SVG, and axes include tick lines and formatted labels that convert large numbers to billions. The chart’s title and axis label are added as text elements, while the data is loaded asynchronously via `csv()`.

Jan 25, 2021

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. The visualization loads data from a CSV file and renders circles with d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft in an SVG. Population values are multiplied by 1000 in the code. Gridlines are created via tick sizes, and axis labels are formatted using d3.format.

Jan 25, 2021

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the top 10 countries, with bars rendered as SVG rectangles. The y-axis uses a band scale for country names, while the x-axis uses a linear scale, customized with tick marks that extend across the chart and formatted labels abbreviating large numbers (e.g., "1.41B"). The code employs d3.csv to load data, d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom, and applies a custom tick format function.

Jan 25, 2021

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of country populations using a bar for each nation, drawn as SVG rectangles scaled by population value. The code loads data from a CSV file and uses D3 v6 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. Bars are appended via a data join, with population values parsed and multiplied by 1000, and the chart is rendered with margins and a steelblue fill.

Jan 25, 2021

Loading thumbnail…

Face with D3

A yellow smiley face rendered in SVG with D3 v6. The example shows eyebrows that animate up and down indefinitely using chained `transition.duration` calls. It builds the face with basic shapes: circles for the head and eyes, rectangles for brows, and an `arc()`-generated path for the mouth. D3's `select` and `arc` functions handle SVG creation and geometry.

Jan 21, 2021

Loading thumbnail…

Fork of Cars Report

A fork of the Cars Report demonstrates asynchronous data loading and modular JavaScript. It fetches car data via a Promise from `getCars.js` and formats a text report using `generateReport` and `formatCar`. The page displays the report in a `<pre>` element, starting with "Loading..." before showing results. The code exercises ES modules, `JSON.parse`, and template literals, with the report filtered to cars under a price threshold.

Jan 20, 2021