Jezwin Varghese

@Jezwin·3 public vizzes

The Barchart Clustered

This example shows the population of the top 10 most populous countries using a horizontal bar chart. The bars are rendered as SVG rectangles, with the country names on the y-axis and population values on the x-axis. The chart uses D3 v5 APIs like `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `select` to build and style the visualization. Data is loaded from a local CSV file, and grid lines are drawn with a light gray color.

Nov 21, 2019

Loading thumbnail…

The Barchart

This horizontal bar chart displays the populations of the ten most populous countries, using D3 v5 to map values to bar widths via `d3.scaleLinear` and `d3.scaleBand`. The SVG rendering includes gridlines, axis labels, and a title, with data loaded from a CSV file. Axis construction relies on `d3.axisLeft` and `d3.axisBottom`, while numeric tick labels are formatted using `d3.format`. The visualization is generated entirely client-side through D3’s data-join pattern.

Nov 21, 2019

Loading thumbnail…

D3 Haha Emoji

A yellow emoji face with black-outlined features animates its eyebrows in a looping up-and-down motion. The SVG is constructed using D3 v5 selections, with `d3.arc` generating the wide open laughing mouth path. The left and right eyebrows are rectangles that use chained `transition().duration()` calls to move vertically between two positions repeatedly. The static elements include a large yellow circle for the head and two black eye circles, positioned with explicit coordinates.

Nov 16, 2019