Skip to main content
SimilarExport ZIP
100%

SDG Budget in Nepal

✓ Published0🌍 Public
SSabin Bhandari
Last edited May 30, 2021
Created on May 30, 2021
Forked from Stylised Bar Chart

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualising SDG budget Nepal

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.

SSabin Bhandari
89% match
Loading thumbnail…

Uganda Budget

A static bar chart displays the Uganda budget, comparing two named categories, project and laptop, with values 50 and 40. The visualization uses D3.js v7 to bind the data object to list items via `d3.select`, `selectAll`, `data`, and `enter`, appending list elements that render the numeric values. The page also includes an empty SVG for a smiley face, but the code only populates the list. The example demonstrates fundamental DOM manipulation with direct data binding, rendering the budget figures as text items rather than geometric shapes.

Ssavalifestus75@gmail.com
68% match
Loading thumbnail…

Budget Bar Chart

This bar chart visualizes sample budget data for fiscal year 2020, displaying the budget amount for each project category (Development, Field Support, Liasion, and Operations) on a linear scale. The height of each bar represents the budget in thousands of dollars, while hovering over a bar reveals a tooltip showing the OE and Expensed values for that entry. The visualization uses D3 v5 to load the CSV data, parse the currency-formatted numeric values, and render bars via SVG rect elements with a band scale for the x-axis and a linear scale for the y-axis.

JJames Barbour, Jr.
67% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
66% match
Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
66% match
Loading thumbnail…

Untitled

This example shows GDP per capita for a selection of countries as a bar chart. Bars initially render in the order they appear in the data, with a transition animating their height on load. Users can hover over bars to highlight them in orange, and a checkbox below the chart sorts the bars in descending order by value. The visualization is built with React and D3 v4, using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG with mouseover event handlers.

Ppriyankab23
65% match
Loading thumbnail…

Fork of Simple Bar Chart

This example visualizes the production budgets of Indian films as a horizontal bar chart, using React and D3 v5. The chart reads movie titles and budget figures from a remote CSV file, mapping each movie to a bar scaled by its budget. It constructs the visualization with D3’s `scaleBand` and `scaleLinear` for positioning and sizing, and renders axes, labels, and rectangles with SVG. The code also applies CSS gradients for bar and text fills, and includes a hardcoded header unrelated to the data.

Mmadipadiga.raviteja@gmail.com
65% match
Loading thumbnail…

Scientific Data Visualisation ICE7 Part 3

This visualization displays the electronic sales trends in Nepal from 2013 to 2022 using a line chart. The chart shows sales figures over time, with a red line plotted against a time-based x-axis and a linear y-axis for sales amounts. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` to construct the visualization. The data is loaded from a CSV file using `d3.csv`, with dates parsed via `d3.timeParse` and rendered as an SVG.

SSravyaAnnadi
65% match