Kamal Bahadur Rana

@RanaBKamal·10 public vizzes

Fork of Stack Chart Template - added data

This interactive stacked bar chart displays deaths from various illnesses in 2013, broken down by age range across selected South African countries, using WHO data. The visualization, rendered as an SVG with D3.js (v3), includes radio buttons that toggle between showing raw death counts and percentages of total illness. The chart uses `d3.layout.stack` for the stacked bars, `d3.scale.ordinal` for the x-axis, and a categorical color scale for the causes of death, with animated transitions between the two display modes.

Sep 19, 2023

Loading thumbnail…

Fork of Religions of Largest 20 Countries-Vertical

This stacked bar chart displays the estimated 2010 religious breakdown of the world’s 20 most populous countries, with each bar segmented by religion and scaled by population. Hovering over a bar reveals a tooltip with the religion, country, and exact population count, while hovering over the color legend highlights only the bars for that religion by dimming the rest. Built with D3 v3, the visualization uses `d3.layout.stack` for layered bars, `d3.svg.axis` for scales, `d3-tip` for tooltips, and `d3.legend` for the interactive color key. Data comes from the Pew Research Center’s Global Religious Landscape report.

Sep 19, 2023

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

Jun 26, 2023

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This interactive choropleth map colors countries by income group, with a color legend that animates its circles and uses sequential reds from d3.scaleOrdinal. Built with d3.v5 and topojson, it projects world atlas data using d3.geoNaturalEarth1 and renders countries as SVG paths via d3.geoPath. A zoom tool from d3.zoom is applied, and hover effects highlight individual countries, while data is loaded from unpkg-hosted TSV and TopoJSON files.

May 15, 2023

Loading thumbnail…

Fork of Missing Migrants on a Map

This visualization maps the Missing Migrants Dataset, plotting each event as a circle positioned using a Natural Earth projection. The map layers include graticules, land borders, and interiors, all rendered as SVG paths using `geoPath` and `geoGraticule` from `d3`. Circle radii encode the "Total Dead and Missing" count via a square-root scale. React manages the UI, with D3's `csv` loading the data and `topojson` processing the world atlas topology.

May 15, 2023

Loading thumbnail…

Fork of 2015 Internet Users World Map

This example displays a world map of internet users per 100 people in 2015, with countries colored on a green scale by percentage and a legend explaining the ranges. Hovering over a country reveals its name and percentage, and the map supports zooming and panning. The visualization loads geographic data from a TopoJSON atlas and joins it with a CSV dataset, using D3’s `geoNaturalEarth1` projection, `geoPath`, and `d3.zoom` for interaction.

May 15, 2023

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a world map of migrant deaths with a brushable time-series histogram, enabling filtering by date range. The map uses d3.geoNaturalEarth1 projection, d3.geoPath, and TopoJSON world atlas data, with bubble sizes scaled by total dead and missing via d3.scaleSqrt. The histogram aggregates monthly totals using d3.bin and d3.sum, while React’s useMemo and a d3.brushX selection provide fast linked brushing. Data comes from a CSV of Missing Migrants Global records.

May 15, 2023

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications using a natural Earth projection, with countries colored according to their income group. Users can click color legend entries to filter the map, dimming unselected regions while highlighting matching ones, with zoom and pan support. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country features from TopoJSON world-atlas data, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Interactive filtering is handled through click events on the legend, which toggles the selected color value and updates fill opacity and CSS highlighting.

May 15, 2023

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack - Play

This interactive stacked bar chart visualizes two years of personal electricity consumption for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses D3.js version 7 and the d3-scale-chromatic library to render the SVG bars, with green and blue colors distinguishing the different accounts via a categorical color scale. The chart employs `d3.stack()` to compute cumulative bar segments and uses `scaleBand()` and `scaleLinear()` for the axes, with hover effects that decrease bar opacity and display tooltips showing the kilowatt-hour amounts. The data comes from a personal consumption dataset covering a two-year period.

Apr 24, 2023

Loading thumbnail…

Stacked barchart

This stacked bar chart shows the total number of rockets launched per year, with each bar segment colored by company name to reveal mission success or failure. It uses Vega-Lite’s API via `vl.markBar()` and `vl.transform.groupby` to aggregate counts, while encoding year on the x-axis and rocket count on the y-axis. The data comes from a CSV of global space launches, and the visualization integrates multiple tooltip fields for Count and Company Name. Styling is customized through a config file that adjusts axis ticks, label sizes, and dark text colors for readability.

Apr 17, 2023