Skip to main content
SimilarExport ZIP
100%

Fork of Menu with D3

✓ Published0🌍 Public
Ppmbhupathibalu@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

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.

Ssrividyamadas@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
80% match
Loading thumbnail…

Fork of welcome to D3Js

This example visualizes Indian states data using D3.js v5 and SVG. It displays a sortable table of state statistics—including population, official language, area, vehicle code, statehood year, and capital vs. largest city—alongside a set of stylized employee figures drawn in SVG. The table is populated dynamically from CSV data fetched from a remote source, and the SVG section depicts three simple human-like figures constructed from basic shapes, demonstrating D3’s ability to create custom vector illustrations. The page also includes placeholders for additional charts on population, language diversity, area comparison, vehicle codes, statehood timeline, and capital/largest city comparisons, all rendered with D3 and styled with basic CSS. The project is a fork of the "Welcome to D3Js" example, extended with Indian states data and custom visualizations.

SSrividya Madasu
79% 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
77% match
Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map of India uses a sequential color scale to encode each state with a distinct category color and labels each state with its name. The visualization relies on TopoJSON data for Indian state boundaries, which is projected and rendered using `d3.geoMercator` and `d3.geoPath`. The code filters out the first feature from the dataset before drawing the SVG paths, applies `d3.scaleOrdinal` with `schemeCategory10` for fills, and positions text labels at path centroids using `pathGenerator.centroid`.

Bbhargavarathod
76% match
Loading thumbnail…

Fork of line chart ice7

A line chart displays Total_Sales across US states from 2012 to 2022. The visualization uses d3.scaleTime and d3.scaleLinear to map state dates and sales values to SVG coordinates, with axes generated via d3.axisBottom and d3.axisLeft. A d3.line generator creates the path, which is styled with a teal stroke. Data loads from a CSV file using d3.csv, then parses the state column into Date objects for the time scale.

KKarnisrikanth
76% match
Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map renders the states of India as SVG paths, with each state colored by a categorical scale and labeled with its name at the path centroid. The visualization uses d3.json to load TopoJSON state boundaries, then converts them with topojson.feature and projects them using d3.geoMercator. d3.geoPath generates the path data, while d3.scaleOrdinal and d3.schemeCategory10 assign fill colors. State names are placed via d3.geoPath.centroid, and the first feature is removed from the dataset before rendering.

Bbindhureddy98
76% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example visualizes the relationship between state-level data from 2020 and 2024 using a reusable scatter plot built with D3 v6. It shows how individual data points map from the x-axis (2020 values) to the y-axis (2024 values) through a clean SVG rendering. The code employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 to compute scales and draw axes, while circles are joined to data via `selection.selectAll('circle').data().join()`. The underlying dataset is loaded as CSV from a remote URL, and the chart adapts to the viewport size.

Ppmbhupathibalu@gmail.com
76% match