Harish M A

@yours-harish·10 public vizzes

Customizing Axes

This bar chart displays the population of the top ten most populous countries, with data from the UN’s 2020 World Population Prospects estimate. The visualization customizes both axes: a horizontal linear scale formats tick labels (e.g., abbreviating billions as “B”) and draws grid lines, while a vertical band scale removes its axis line and tick marks. D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` are used, with SVG rendering for bars and labels.

Jul 21, 2020

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population counts for ten countries. The chart renders as an SVG and uses D3 v5's `scaleLinear` for the x-axis and `scaleBand` for the y-axis, mapping each country to a rectangle. Data loads from a CSV file via `d3.csv`, with population values multiplied by 1,000 during preprocessing. Bars fill the full width, with no labels or axes visible.

Jul 20, 2020

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot uses D3.js to visualize automotive data across multiple dimensions, with points plotted on an SVG canvas and brushable for detailed exploration. The visualization incorporates a world map background rendered with topojson and d3.geo projections, allowing users to filter car data by geographic region through a modal interface. The code leverages Bootstrap modals for control panels and DataTables for tabular data display, while animations and player controls enable temporal filtering of the dataset.

Jul 6, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a car. The D3 v5 code loads the CSV data, converts numeric fields, and uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the axes and positioned circles in SVG. Additionally, the chart includes a title and axis labels, with circles styled as semi-transparent steel-blue points via CSS.

Jul 5, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the top ten most populous countries based on 2020 data from UN World Population Prospects. Each circle represents a country, positioned along the y-axis by name and x-axis by population, with a logarithmic-like linear scale and clear gridlines. The visualization is built with d3.csv, scaleLinear, scalePoint, axisLeft, axisBottom, and append circle elements in SVG. Population values are multiplied by 1000 to reflect actual figures, and tick labels are formatted with abbreviations like G for billions.

Jul 5, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top ten most populous countries, based on 2020 estimates from the UN World Population Prospects. It uses d3.csv to load data from a local CSV file, d3.scaleLinear for the population axis, d3.scaleBand for the country categories, and d3.axisLeft and d3.axisBottom to render the axes. The chart renders population values as horizontal bars in SVG, with each bar’s width proportional to the population count, which is multiplied by 1,000 after parsing.

Jul 5, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with black-outlined features is drawn using D3.js v5. The code builds concentric circles for the head and eyes, rectangles for the eyebrows, and an arc path for the mouth. A 2-second animated transition moves the eyebrows upward and back, while a 3-second transition tweens the mouth’s path into a wide arc. All shapes are positioned relative to the SVG’s center via a translated group, using D3’s `select`, `arc`, and `.transition()` APIs.

Jul 5, 2020

Loading thumbnail…

Cars Report

The Cars Report example demonstrates asynchronous data loading and modular JavaScript by fetching a hardcoded JSON array of five used cars via a Promise-based `getCars()` function, then filtering and formatting the results with `generateReport()` and `formatCar()`. The final report, listing cars under $2,000 as text lines like "2009 Chevrolet Trailblazer :$ 1550", appears in an HTML `<pre>` element. The static SVG renders two geometric paths with black and red strokes, showing a basic Cairo-style pattern without dynamic data binding.

Jul 5, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, using circles, rectangles, lines, and paths arranged in a grid. The shapes are styled through inline attributes and CSS classes, with color variations and stroke effects applied to specific groups. The visualization uses raw SVG elements within an HTML document, with a stylesheet that defines properties for line joining and stroke widths. The rendering approach relies on SVG's native vector graphics, transformed and scaled via the `transform` attribute, without any external JavaScript libraries.

Jul 5, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple list of used cars with prices, highlighting the 2012 Nissan Leaf in red to draw attention to a specific entry. The report is built with static HTML and CSS, using a monospace font and a large text size for readability. The page structure relies on a plain unordered list, while the highlighted class controls the red color styling. No JavaScript libraries or data-processing APIs are involved, as the data is hard-coded directly into the markup. The rendering approach is purely document-based, with no dynamic updates or interactive elements present.

Jul 5, 2020