Skip to main content
SimilarExport ZIP
100%

scatterplot

✓ Published0🌍 Public
KKondreddy Saikiran reddy
Last edited Apr 23, 2024
Created on Apr 23, 2024
Forked from 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.

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…

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…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes crop production in India, showing relationships between variables like cultivated area, production, yield, and year, with data points colored by season. Built with a custom `scatterPlot` component using `scaleLinear`, `axisLeft`, and `axisBottom`, the chart automatically rotates the x-axis variable every three seconds using `setInterval`, updating titles and re-rendering the SVG. The code loads CSV data via `d3.csv` and uses the `select` API for DOM manipulation, with animations driven by re-calling the plot function.

MMahesh
80% match
Loading thumbnail…

sample

This example visualizes Indian agricultural data from a GitHub-hosted CSV, showing the relationship between cultivated area and rice production through a red dot scatter plot. It also includes a second view with a steel-blue bar chart displaying rice production across years using a band scale. The code uses D3 v6 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to map data values to SVG positions.

YYeshwanth963@gmail.com
79% match
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
79% match
Loading thumbnail…

Project

This example displays a scatter plot of rainfall (mm) against crop yield (tons per hectare) for three data points, using D3 v7. It loads the D3 library via UNPKG and uses d3.select, d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to render axes and circles in SVG. The chart includes axis labels, margins, and a tooltip style, with hardcoded data rather than fetching from external files. It also demonstrates ES6 module imports, including a local message module, in a separate JavaScript file.

Rrahulnathmukkolla@gmail.com
77% match
Loading thumbnail…

Crop_Yield Data Viz

This example displays annual rainfall for each crop year across all Indian states, plotting each crop as a data point with its year on the x-axis and rainfall on the y-axis. The visualization uses the Vega-Lite API (via `vl.markCircle`) to create a scatter plot, with states differentiated by color and crop names available through tooltips. Data is loaded asynchronously from a remote CSV file using D3's `csv` function, while the chart is rendered through the Vega-Lite library registered with Vega, and appearance is customized via a config file that adjusts axis ticks and label styling.

PPothuguntla Pranitha
76% 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
76% match
Loading thumbnail…

crop_yield

This bar chart shows total rice production for each state in India, using data from the ICRISAT District Level dataset. The visualization aggregates district-level production figures by state, displaying the sums as color-coded bars that reveal regional yield differences. Built with D3 v7, the chart uses `d3.rollup` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and a `d3.scaleOrdinal` color scheme. Interactive tooltips display each state’s total production on hover, rendered as an HTML overlay with opacity transitions.

PPothuguntla Pranitha
76% match