Skip to main content
SimilarExport ZIP
100%

Visualising SDG budget Nepal

✓ Published0🌍 Public
SSabin Bhandari
Last edited May 31, 2021
Created on May 30, 2021

This example visualizes Nepal’s 2020 budget allocations toward the Sustainable Development Goals (SDGs) using a donut chart. Each slice represents an SDG, with a legend and tooltips (via SVG `<title>`) showing the goal name, allocated amount in lakhs, and percentage. The code loads CSV data using `d3.csv`, computes pie angles with `d3.pie()`, and draws arcs with `d3.arc()`, while React (with hooks like `useState` and `useEffect`) manages the rendering. Colors are assigned via `d3.scaleOrdinal`, and the SVG output includes interactive hover details.

AI-generated description

A program that loads in some data about budget that leads towards SDG of Nepal 2020 using D3 utilities, and uses React to render data.

its in progress

MIT Licensed

Similar vizzes

Loading thumbnail…

SDG Budget in Nepal

This visualization shows Nepal's budget allocations across various Sustainable Development Goals (SDGs), displayed as a horizontal bar chart using SVG rendered through React. Each bar represents a goal’s budget in lakhs of rupees, converted to absolute values via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis, with tick formatting via `d3.format`. Data is fetched from a remote CSV using `useData`, a custom React hook, and interactive tooltips are provided through SVG `<title>` elements.

SSabin Bhandari
89% match
Loading thumbnail…

Fork for country and budget

This visualization shows the 2012 budget allocations for various countries as a donut chart, with each segment labeled with its value in thousands and a corresponding legend. The chart uses d3.pie and d3.arc to generate the ring geometry, with d3.scaleOrdinal mapping categorical colors to the data. Data is loaded from a CSV file via d3.csv, and d3.format is used to abbreviate the numeric labels. The SVG rendering includes explicit text positioning through the arc centroid, and legends are appended with rectangles and text.

RRakshithaRao27
74% match
Loading thumbnail…

Fork for country and budget

This is a D3.js v5 pie chart built with SVG, visualizing country budgets for 2012. The chart uses `d3.pie` to compute arc segments and `d3.arc` to generate the path geometry, with each slice colored using `d3.scaleOrdinal`. The visualization includes a legend showing each country name and its budget value in thousands, with the data loaded from a CSV file using `d3.csv`. The code also uses `d3.select` to target the SVG element and `d3.format` for tick labels.

PPallaviManupati
72% match
Loading thumbnail…

Fork of veda_piechart7

This example shows a pie chart of GDP per capita from the 2019 Happiness Report, with each slice labeled by country or region and accompanied by a colored legend. Built with D3.js v6 and React, the chart uses `d3.pie()` to compute arc segments and `d3.arc()` for path generation, assigning colors via `d3.scaleOrdinal` with the `schemeCategory10` palette. Country labels are placed using arc centroids, and the legend maps colors to country names, all rendered as SVG elements within a 960x500 canvas.

Vvedasrivarma13@gmail.com
71% match
Loading thumbnail…

veda_piechart7

This example shows a pie chart of GDP per capita across countries from the 2019 World Happiness Report, with each slice labeled by country name and accompanied by a color-coded legend. The visualization first computes the pie arcs using `d3.pie()` and renders them as SVG paths via `d3.arc()`, coloring each slice with a categorical scale (`d3.scaleOrdinal`). Country labels are positioned at the centroid of each arc using `d3.arc().centroid()`, and a legend is built from the color domain with appended rectangles and text. The code loads CSV data from a GitHub raw URL and uses D3 v6 within a React-compatible HTML page.

Bbhavyapokuri123@gmail.com
70% match
Loading thumbnail…

Fork of Loading Data with React & D3

This visualization displays the population of UN countries in 2019 as a donut chart, with each slice colored by a CSS named color from the loaded dataset. It uses React hooks (useState, useEffect) to fetch CSV data via d3.csv and manages rendering through React components, while d3.arc and d3.pie compute the geometric paths and angles for the SVG elements. The chart renders a circular layout with inner and outer radii, showing proportional slices for each country's population value.

MManuel Bauer
69% match
Loading thumbnail…

Visualizing data with React & D3

A donut chart displays the proportional distribution of CSS named colors, with each color category represented as a slice of the pie. The visualization loads tabular data from a CSV file using the `d3.csv` utility, stores it in React state via `useState` and `useEffect`, and renders each slice as an SVG path. The chart uses the `d3.pie` layout and `d3.arc` generator to compute the arc geometry, while React maps over the data to create the path elements with the color's hex value as the fill.

MMarco Malvicini
69% match
Loading thumbnail…

Pie chart in React & D3 - with Legend

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

BbeauMarko
69% match