Skip to main content
SimilarExport ZIP
100%

Fork of Electric Bar Chart Using d3.stack

✓ Published0🌍 Public
Ssrividyamadas@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024

This visualization displays the revenue of ten selected Indian states from 2020 to 2024 as an overlapping area chart, with each state’s trend represented by a semi-transparent colored band. The code loads CSV data via `d3.text`, filters it to the desired states, and constructs the chart using the D3 v7 `d3.area()` generator with `d3.scaleLinear` for both axes. SVG rendering includes `d3.axisBottom` and `d3.axisLeft` for the year and revenue scales, while a legend lists each state with its matching color from `d3.scaleOrdinal(d3.schemeCategory10)`. The chart sources data from a GitHub gist and is rendered entirely in SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Menu with D3

The visualization displays revenue by state from 2020 to 2024 as overlapping semi-transparent area charts, with a color-coded legend identifying ten selected Indian states. Built with D3 v7, the code loads CSV data via `d3.text`, filters for specified states, and renders SVG paths using a custom `d3.area()` helper. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while categorical colors come from `d3.scaleOrdinal(d3.schemeCategory10)`. The chart includes labeled axes for year and revenue (USD) plus a title.

Ppmbhupathibalu@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Line Chart - US Airline Traffic - Number of Flight

This line chart displays the revenue of ten Indian states from 2020 to 2024, with each state represented by a distinct colored line and a legend. The data is loaded from a remote text file and parsed to extract only the selected states. Using D3.js v7, the code defines linear scales for the x-axis (years) and y-axis (revenue), then draws paths with the `d3.line` generator and applies the `d3.scaleOrdinal` color scheme. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while SVG text elements provide the chart title and axis labels.

Ssrividyamadas@gmail.com
81% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays the top 15 most populous Indian states, ranked by basic cost. The visualization uses React to manage state and render SVG elements, while D3.js provides scales, axes, and data loading via `d3.csv`. The horizontal bars are drawn with SVG `rect` elements, with axes generated using `d3.scaleBand` and `d3.scaleLinear`. Data is fetched from a remote CSV file hosted on GitHub, styled with explicit margins and a loading state.

MM
79% match
Loading thumbnail…

Fork of Assignment- II_SDV

This pie chart visualizes the top 10 Indian states by GDP for the financial year 2011-12. Using D3.js v5, the code sorts and slices a CSV dataset from GitHub, then renders the chart with `d3.pie` and `d3.arc`. It includes an interactive tooltip that logs GDP values on mouseover, and displays a legend with state names and values, colored via `d3.scaleOrdinal` with `schemeCategory10`. The chart is drawn as SVG with a title and a 960x500 canvas.

Ssiddhartha gurram
78% match
Loading thumbnail…

Fork of Responsive Bar Chart

This example displays a horizontal bar chart showing visitors per year for different states, with each bar labeled by its numeric value. It uses D3 v5 to fetch CSV data from a remote gist and render the visualization as an SVG. The code employs `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, appending rectangles for bars and text elements for labels. The chart highlights the relative visitor counts across states, with the data source directly loaded via `d3.csv`.

Ssridhardubala106@gmail.com
78% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 10 most populous states in India, using React components to render SVG marks and D3 scales for layout. The chart encodes population values as bar widths on a linear x-axis and state names as categorical bands on a band scale y-axis. Data loads asynchronously from a CSV file via `d3.csv`, and the code manually constructs axes and tick marks without using D3’s axis generators, relying instead on `scaleLinear`, `scaleBand`, and `max` from D3 v5.

MM
77% match
Loading thumbnail…

Fork of barChart

This bar chart visualizes rice production across Indian states, using data from a CSV of crop statistics. It shows aggregated production totals per state, with each bar color-coded to its state, and a tooltip displaying the exact production value on hover. Built with D3 v7, the chart uses `d3.rollup` to aggregate district-level data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeCategory10` for colors. The SVG rendering includes rotated x-axis labels for readability.

Ssuchigeneralpur@gmail.com
77% match
Loading thumbnail…

Fork of Basic bar chart - data population India estimated 2019

This example shows estimated population data for Indian states and territories in 2019, displaying the last ten entries as a horizontal bar chart. The bars are rendered as SVG rectangles using D3 v6, with their widths scaled by a linear scale (`d3.scaleLinear`) mapping population values to pixel space. The data is loaded asynchronously from a CSV file via `d3.csv` from a GitHub gist, and the chart dimensions adapt to the browser window size. The code uses `d3.select`, `d3.extent`, and Promise-based async/await to handle data loading and rendering.

NNita
77% match