Skip to main content
SimilarExport ZIP
100%

scatterplot

✓ Published1🌍 Public
KKondreddy Saikiran reddy
Last edited Apr 23, 2024
Created on Apr 23, 2024
Forked from AreaChartRainFall

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.

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
88% 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
87% 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
87% 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
81% 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
81% 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
79% match
Loading thumbnail…

Area Chart

This area chart visualizes rainfall measurements over time, with a smooth curve showing yearly rainfall trends and a blue-filled region beneath the line emphasizing the data’s magnitude. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `area` and `line` generators with `curveBasis` smoothing, and `axisBottom`/`axisLeft` for ticks. Data comes from a CSV file loaded via `csv()`, with year and rainfall values parsed as numbers.

LLakshmipriya-kalapala
79% match
Loading thumbnail…

Line Chart

This line chart visualizes yearly rainfall data from 2000 to 2004, with the line smoothly interpolated through the data points. The chart displays the title "Yearly rainfall," labeled axes for "Year" and "Rainfall," and gridlines for readability. Using D3 v5, the code employs `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The data comes from a local CSV file, and styling is applied via external CSS.

LLakshmipriya-kalapala
78% match