Skip to main content
SimilarExport ZIP
100%

sample

✓ Published1🌍 Public
YYeshwanth963@gmail.com
Last edited Apr 24, 2024
Created on Apr 24, 2024
Forked from t2

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.

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

Fork of barChart

This bar chart visualizes rice production across Indian states, using data from a CSV of crop statistics. It shows aggregated production totals per state, with each bar color-coded to its state, and a tooltip displaying the exact production value on hover. Built with D3 v7, the chart uses `d3.rollup` to aggregate district-level data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeCategory10` for colors. The SVG rendering includes rotated x-axis labels for readability.

Ssuchigeneralpur@gmail.com
78% match
Loading thumbnail…

Barchart

This bar chart displays rice production across Indian states, with tooltips revealing the corresponding rice area for each state. The visualization is built with D3.v7 and rendered as SVG, using a band scale for the categorical x-axis and a linear scale for the production values. The chart includes rotated x-axis labels and mouseover interactions that present additional data. It loads data from a CSV file hosted on GitHub and highlights the use of d3.csv, d3.select, d3.scaleBand, d3.scaleLinear, and d3.axisBottom.

SSree Yuktha Sunkara
78% 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
77% match
Loading thumbnail…

Fork of barChart

This visualization displays rice production across Indian states using a bar chart, where each bar represents the total production for a state with a unique color. The chart loads data from a CSV file via `d3.csv`, and uses `d3.rollup` to aggregate production values by state. Hovering over a bar reveals a tooltip showing the state name and its total production, with rounded values to two decimal places. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for bar colors, with axes labeled and rotated via `d3.axisBottom`.

Ssindhuja27b@gmail.com
77% match
Loading thumbnail…

D3.js

This example displays the rice production of various countries and regions as a list of names paired with numerical values. It uses the D3.js library (version 5) to read data from the `rice.csv` file, which contains country and production columns. The visualization is rendered as SVG elements within a fixed 960 by 480 pixel canvas, though the code currently only loads the data and does not draw any graphical representation of it. The project structure includes a separate `index.js` file that imports the `select` function from D3.

Aashbeybruce
75% match
Loading thumbnail…

barChart

This bar chart displays rice production totals for each state, aggregated from district-level crop data using `d3.rollup` and `d3.sum`. The SVG rendering uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for per-state colors. Hovering over a bar triggers a tooltip via D3 transitions, showing the summed production in tons. Data loads asynchronously from a CSV file, with axes drawn using `d3.axisBottom` and `d3.axisLeft`.

KKondreddy Saikiran reddy
75% match
Loading thumbnail…

Project_indian_Agriculture

This example presents an interactive bar chart of Indian agricultural data, allowing users to select a state and district from dropdown menus to load corresponding crop statistics. The visualization displays area, production, and yield metrics for various crops across different years using D3.js v7 to render SVG bars. The chart includes hover highlighting and a custom tooltip, with data structured as an inline JSON array containing detailed records for each district and crop type.

Nnaveen.dodda4321@gmail.com
75% match