Shanthi Acharya

@shanthiacharya·4 public vizzes

Choropleth Map

This choropleth map colors countries according to their economic classification, with a discrete ordinal color scale and an interactive color legend. Using D3 v5 and the `geoNaturalEarth1` projection, it renders TopoJSON world data loaded from the world-atlas package and merges it with TSV metadata containing country names and income groups. Users can pan and zoom via D3's zoom behavior, while hovering highlights countries in red and displays a tooltip with the country name and economy type. The legend is built with a custom colorLegend component.

Aug 12, 2019

Loading thumbnail…

Arastu Family Tree

A radial tree diagram visualizes the Arastu family's genealogical data from a JSON file. The D3.js v5 layout positions descendants around a central root, with curved link paths and rotated text labels. Upon loading, the tree's paths and labels fade in sequentially, and the entire structure slowly rotates. The visualization supports interactive zooming and dragging through D3's zoom and drag behaviors, with the SVG rendering updated accordingly.

Jul 31, 2019

Loading thumbnail…

World Happiness Scatter Plot

This scatter plot visualizes the relationship between happiness ladder scores and generosity across countries, with each red circle representing a country based on data from the World Happiness Report 2019. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and SVG circles rendered via d3.select and .enter().append('circle'). The chart includes axis labels and a title, with data loaded via d3.csv from an external dataset, and styled through CSS for circle opacity and tick formatting.

Jun 9, 2019

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of GDP for ten countries, with the bars sorted by value and labeled. The chart uses a linear scale for the GDP axis and a band scale for the countries, rendering as SVG within a 960x500 canvas. Built with D3 v5, it relies on `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats GDP ticks via D3's `format`. Data is loaded from a CSV file with `d3.csv`.

Jun 9, 2019