Skip to main content
SimilarExport ZIP
100%

Project

✓ Published0🌍 Public
Rrahulnathmukkolla@gmail.com
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from Hello VizHub

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.

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…

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

3D Scatter plot using D3.js

This example presents an interactive 3D scatter plot built with Plotly.js and D3.js, visualizing agricultural crop data. It renders two marker traces from a CSV file: one mapping crop type, production, and district, the other correlating crop year, season, and area. The code uses `d3.csv` to load the dataset and `Plotly.newPlot` to draw the scatter3d traces within a DIV element. The visualization employs 3D markers with custom opacity and line styling to distinguish the two datasets, with the layout margins set to zero.

Ggayathrikavya
77% match
Loading thumbnail…

Fork of Fork of Bar Chart

This example pairs a bar chart of average crop yields by rainfall category with a scatter plot of individual rainfall-yield observations, using a small CSV dataset. The bar chart groups rainfall into bins (0–500, 500–1000, 1000–1500, 1500+ mm) and plots the mean yield per bin, while the scatter plot shows raw points with tomato-colored circles. Built with D3 v6, the code uses `d3.rollups` to aggregate means, `scaleBand` for categorical axes, and `scaleLinear` for continuous axes, rendering both charts as SVGs with hover highlighting on bars. The dataset is loaded via `d3.csv`, and the visualization focuses on revealing any correlation between rainfall and crop yield.

Rrobertotienonyaranga@gmail.com
76% match
Loading thumbnail…

Project_Crop_Yield

This example shows a bar chart of crop types from a crop yield dataset, with the number of records for each crop type represented by bar height. It uses d3.csv to load the data, d3.rollup to aggregate counts by crop, and d3.scaleBand and d3.scaleLinear to map crop names and counts to x and y positions. The bars are rendered as SVG rects, with axes added via d3.axisBottom and d3.axisLeft.

PPothuguntla Pranitha
76% match
Loading thumbnail…

Fork of Fork of Fork of Bar Chart

This example pairs a bar chart with a scatter plot to explore the relationship between rainfall and crop yield. The bar chart groups average yield by rainfall category, while the scatter plot plots raw rainfall against yield. Both visualizations use D3.js v6, with `d3.rollups` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rendering. The code loads a CSV dataset and applies a custom categorization function to bin rainfall values.

Rrobertotienonyaranga@gmail.com
76% match
Loading thumbnail…

Fork of Rain-Yield Analysis

This visualization explores the relationship between rainfall and agricultural yield by combining a bar chart and a scatter plot side by side. The bar chart displays rainfall amounts across dataset entries, while the scatter plot maps fertilizer application against yield. Both charts use D3.js v6 with hover interactions that highlight bars in orange. The scatter plot uses tomato-colored circles to reveal the correlation between fertilizer and yield, and the axis labels and titles are implemented using d3.axisBottom, d3.axisLeft, and SVG text elements. The dataset includes columns for rainfall, temperature, nutrients, and yield, offering a multi-variable view of crop production.

Vviveknaroju999@gmail.com
76% match