Skip to main content
SimilarExport ZIP
100%

Fork

✓ Published0🌍 Public
Ssindhuja27b@gmail.com
Last edited Apr 25, 2024
Created on Apr 25, 2024
Forked from AreaChartRainFall

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.

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
82% 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
81% match
Loading thumbnail…

PieChart

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.

KKondreddy Saikiran reddy
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
76% match
Loading thumbnail…

Fork of I

This visualization shows India’s annual CO2 emissions per capita over time, with a maroon filled area chart beneath a line path. The x-axis maps years using d3.scaleTime, while the y-axis uses d3.scaleLinear; both axes include gridlines via d3.axisBottom and d3.axisLeft. The area shape is generated with d3.area and d3.curveBasis. Data is loaded from a CSV file using d3.csv, and the SVG rendering is driven by d3.select and d3.append.

Eeravellisaimeghana
76% match
Loading thumbnail…

Fork of Fork of area

This area chart visualizes car sales data over time, with a line overlay and interactive tooltip that displays the exact sales value for a given year upon mouse hover. The visualization uses D3 v6 to load CSV data, create time and linear scales, render axes with gridlines, and generate the area path with a basis curve. A tooltip with a circle indicator follows the mouse position to highlight data points, while a title and axis labels provide context for the chart's content.

Ssitaramchallapalli
76% match
Loading thumbnail…

Fork of area

This area chart shows India’s annual CO2 emissions per capita over time, using a smooth curve to emphasize the upward trend. The visualization loads CSV data from a GitHub gist, parses years as dates, and maps them to a time scale while emissions use a linear scale. Rendered as SVG, the chart employs d3.area with curveBasis, along with axisBottom and axisLeft for labeled axes, and custom tick styling via CSS.

SSnigdha6698
75% match
Loading thumbnail…

Fork of area chart

This example displays India’s population over time as a filled area chart. It loads CSV data from a GitHub gist and renders an SVG with D3 v7, using `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to draw the path and labeled axes. The chart encodes years on the x-axis and population values on the y-axis, with a steelblue fill.

Nnaveen.dodda4321@gmail.com
75% match