Skip to main content
SimilarExport ZIP
100%

How does the crop production vary across different districts within a specific state over multiple years?

✓ Published0🌍 Public
Aanushapodapati99@gmail.com
Last edited Apr 18, 2024
Created on Apr 18, 2024

This interactive line chart explores crop production trends across Indian districts and states over time. Users select a crop and state from dropdown menus, which updates the visualization to display aggregated yearly production data. The chart uses D3.js scales, axes, and line generators, along with transitions for smooth axis updates. The data comes from a CSV file containing crop production records.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Project_Line_Chart

This visualization tracks wheat production over time for various Indian states, using a multi-line chart where each colored line represents a state's annual output in tons. The chart displays a y-axis labeled "Production (tons)" and an x-axis labeled "Year," with key data points labeled directly at the end of each line. Built with D3.js, the code merges two CSV datasets from the author's GitHub repository—crop production and district-level data—filtering for wheat and mapping year and production values. The visualization uses `scaleTime` for the time axis, `scaleLinear` for the production axis, and the `line` generator to draw each state's trend line with `schemeCategory10` for color encoding.

Aanushapodapati99@gmail.com
81% 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
78% match
Loading thumbnail…

Fork of Crop_Yield Data

This example visualizes annual crop production across Indian states from a CSV dataset, using a line chart to show yield trends over time. The viz.js file employs the Vega-Lite API to map Crop_Year to the x-axis, Production to the y-axis, and State to color, with a tooltip displaying the crop name. The chart is rendered by the Vega-Lite API, which is registered with VEGA and a tooltip handler. The data is loaded via D3’s `csv` function from a GitHub repository, and the appearance is customized through the `config.js` file, adjusting axis colors and fonts.

BBhanu Siva Kumar Kommana
77% 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
77% match
Loading thumbnail…

Crop_Yield Data

This example visualizes year-wise crop production across Indian states using a scatter plot. Each circle represents a data point, with the x-axis showing the crop year, the y-axis showing production quantity, and color encoding the state using a category20 color scheme. Hovering reveals the crop name via a tooltip. The code leverages the Vega-Lite API, registering both Vega and Vega-Lite with a custom tooltip handler, and loads data from a remote CSV file using d3.csv. The visualization auto-fits its dimensions to the window size.

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

LineChart

A bubble chart displays wheat production data for Indian states, sourced from a CSV file. Each state is represented by a circle positioned in a grid, with the circle's radius scaled to the production value in thousands of tons. The visualization uses D3.js v7, with circles rendered as SVG elements. Hovering over a circle triggers a tooltip that shows the state name and its production figure. The chart includes axes, labels, and a title, all styled through CSS.

KKondreddy Saikiran reddy
74% match
Loading thumbnail…

Project dataviz

This interactive visualization displays district-level rice cultivation data for various Indian states. Users select a state and district from two dropdown menus, which dynamically filter a dataset from the ICRISAT-District Level Data CSV file hosted on GitHub. The resulting chart plots the cultivated area in hectares over time, using D3's scaleTime and scaleLinear functions for the x and y axes. The SVG visualization updates its line chart each time a new district is selected, with data loaded via d3.csv.

Cchinnivikramnunna@gmail.com
74% match