PieChart

100%

✓ Published0🌍 Public

Last edited Apr 24, 2024

Created on Apr 24, 2024

This SVG area chart displays total annual rainfall in India from 1960 to 2017, aggregated by year across all states. It uses D3 v7 to load CSV data via `d3.csv`, group and sum rainfall values with `d3.group` and `d3.sum`, and render the area path with `d3.area`. A hover tooltip, built with a D3 overlay rectangle and `d3.bisector`, shows the exact year and rainfall total. The chart includes labeled axes and a title, with styling from CSS.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

AreaChartRainFall

This area chart visualizes the total annual rainfall in India from 1960 to 2017, aggregating state-level data from a CSV file. The chart uses a lightsteelblue filled area to show the trend, with axes labeled for year and rainfall in millimeters. Hovering over the chart triggers a tooltip displaying the specific year and total rainfall value, while a black circle marks the corresponding point on the curve. The code leverages d3.csv for data loading, d3.group and d3.sum for aggregation, d3.scaleLinear for scaling, d3.area for the path, and d3.bisector for interactive lookups. The SVG rendering is styled via external CSS.

KKondreddy Saikiran reddy

87% match

Loading thumbnail…

scatterplot

This example visualizes the total annual rainfall in India from 1960 to 2017 as an area chart. It aggregates rainfall data across all states for each year, then renders the trend using D3 v7’s `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` APIs. A hover tooltip, powered by `d3.bisector` and `d3.pointer`, displays the exact year and total rainfall value as users move over the chart. The data is loaded via `d3.csv` from a remote GitHub gist, and the visualization is drawn as an SVG.

KKondreddy Saikiran reddy

87% match

Loading thumbnail…

PieChart

This visualization uses D3.js to display an interactive pie chart of wheat production by Indian states from 1966 to 2017. The chart aggregates production data from a CSV file, using `d3.pie()` to generate slices with an inner radius of zero, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Year checkboxes filter the underlying data via `d3.rollup`, recalculating totals and redrawing the chart, while `mouseover` events show tooltips with production values. The SVG rendering includes a legend and interactive state highlighting.

KKondreddy Saikiran reddy

82% match

Loading thumbnail…

Fork

This visualization displays the total annual rainfall in India from 1960 to 2017 as an area chart, with a hover tooltip revealing the exact value for each year. The chart uses D3.js v7 to load CSV data, aggregate rainfall by year across all states, and render the area with d3.area. The x-axis (year) is linear, and the y-axis (rainfall in mm) is scaled to the maximum aggregate. An interactive overlay rect captures mouse movements, using d3.bisector to locate the nearest year and display a tooltip and hover point.

Ssindhuja27b@gmail.com

78% match

Loading thumbnail…

a2 q2

This visualization displays actual rainfall in India for July, August, and September across the years 2001–2016, using overlapping semi-transparent area charts in orange, red, and green. It loads the data via `d3.csv` from a GitHub Gist, filters the years, and constructs the areas with `d3.area()`. The SVG rendering uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, with a custom legend and axis labels. The data source is a CSV file containing actual monthly rainfall measurements.

CChiranjeeviUppala@my.unt.edu

78% match

Loading thumbnail…

scatterplot

This scatterplot visualizes the relationship between annual rainfall and rice crop production in India from 1966 to 2017, with each point representing a year. The code aggregates two CSV datasets using `d3.rollups` and maps the merged data to an SVG circle chart with `d3.scaleLinear` axes, `d3.axisBottom`, and `d3.axisLeft`. Interactive tooltips are implemented with D3 mouse events, revealing year, production, and rainfall details on hover. The chart animates point transitions and is built with D3 v7, rendering SVG elements.

KKondreddy Saikiran reddy

76% match

Loading thumbnail…

Year wise rainfall analysis

This area chart visualizes average annual rainfall in millimeters across different years, with the x-axis representing years and the y-axis showing rainfall amounts. The visualization uses a purple gradient fill beneath the line to emphasize the trend over time. Built with d3.v5, the code leverages `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisLeft`/`axisBottom` to generate the SVG rendering. Data is loaded from a CSV file via `csv()` and parsed with `new Date()` for the year values. The chart includes labeled axes and a title, styled with custom CSS classes.

Nnavyasrimeka9@gmail.com

76% match

Loading thumbnail…

Piechart ICE7

This pie chart displays the ten most populous Indian states in 2024, ranking them by population with a color-coded legend that labels each slice with the state name and its total population. The chart uses D3.js v7’s `d3.pie` layout and `d3.arc` generator to compute and draw the SVG paths, while a `d3.scaleOrdinal` with the `schemeTableau10` palette assigns colors. Data loads from a remote CSV file, and the legend is built with D3 selections, appending styled HTML divs.

MMahesh

76% match