Rohit K Bharadwaj

@rohit901·6 public vizzes

Making Scatter Plot

This bar chart shows the top 10 most populous countries, with horizontal bars representing each nation's population. Population values are read from a CSV file and scaled using `scaleLinear`, while country names are positioned on the y-axis with `scaleBand`. The visualization uses D3 v5, with axes rendered via `axisLeft` and `axisBottom`, and the overall layout draws inside an SVG canvas. Data is loaded asynchronously using the `csv` method, and bars are styled with the `rect` element.

Sep 21, 2019

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, using population data loaded from a CSV file via `d3.csv`. The chart emphasizes custom axes: the y-axis removes domain and tick lines, while the x-axis applies a custom tick format that abbreviates numbers and converts 'G' to 'B' for billions. D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` construct the scales and axes, with tick sizes extended across the chart for gridlines. SVG rendering handles the visual output.

Sep 21, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names, with `axisLeft` and `axisBottom` rendering the axes. Data is loaded from a CSV file via `d3.csv`, and the bars are drawn as SVG rectangles with a steelblue fill.

Sep 21, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, with a data file contribution in `data.csv`. `index.js` uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to create an SVG visualization. It parses the CSV with `csv`, multiplies each population value by 1000, and then renders steelblue rectangles using the linear scale for bar widths and the band scale for row heights. Axis ticks are drawn via `axisLeft` and `axisBottom`, with a margin-based layout translating the main group into the SVG canvas.

Sep 21, 2019

Loading thumbnail…

Lets make a face with D3

This example draws a cartoon face on an SVG canvas using D3 selections and shape generators. It shows a yellow circle head, two eyes, animated eyebrows that move up and down via chained `transition.attr` calls, and a mouth created with the `d3.arc` generator. Fixed pixel coordinates for eye spacing, eyebrow dimensions, and arc radii position each facial feature relative to the SVG’s center.

Sep 21, 2019

Loading thumbnail…

Cars Project

This example displays a list of used cars, filtering out any priced above $2,000 and formatting each remaining vehicle as a year, make, model, and price string. It demonstrates asynchronous data loading with a JavaScript Promise and ES6 module imports, rendering the final report into an HTML `<pre>` element using the `getCars` and `generateReport` functions. The page shows a loading message before the car report appears.

Sep 19, 2019