Skip to main content
SimilarExport ZIP
100%

LineChart

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

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.

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…

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

Bubble chart

This bubble chart visualizes wheat yield data for Indian states, with each circle’s size representing the yield in kilograms per hectare. It uses a force-directed layout via `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to pack the bubbles without overlap. Circle radii are computed with `d3.scaleSqrt`, and colors come from `d3.scaleOrdinal` with `schemeCategory10`. Data loads from a remote CSV file using `d3.csv`, and hover effects change bubble color to orange.

SSree Yuktha Sunkara
82% match
Loading thumbnail…

PieChart

This visualization uses D3.js to display an interactive pie chart of wheat production by Indian states from 1966 to 2017. The chart aggregates production data from a CSV file, using `d3.pie()` to generate slices with an inner radius of zero, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Year checkboxes filter the underlying data via `d3.rollup`, recalculating totals and redrawing the chart, while `mouseover` events show tooltips with production values. The SVG rendering includes a legend and interactive state highlighting.

KKondreddy Saikiran reddy
80% match
Loading thumbnail…

ViewCircles

ViewCircles visualizes state-wise rice production in India as an interactive bar chart. The chart sums district-level data from a CSV file using `d3.rollup` and `d3.sum`, mapping states to bar heights with `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip showing the total production for that state. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft`, with a `d3.schemeCategory10` color scale and mouse event handlers for interactivity.

KKondreddy Saikiran reddy
76% match
Loading thumbnail…

Task-9_Question-1

This donut chart visualizes total wheat production across Indian states, with data sourced from a CSV file. Users interact with checkboxes to filter the dataset by year, dynamically updating the chart. The visualization uses D3.js v7 APIs like `d3.pie()`, `d3.arc()`, and `d3.rollup()` to aggregate and render slices. Hovering over a slice highlights it and shows a tooltip with the state name and production value. The chart is rendered as an SVG with a color legend, and the code also logs total production to the console.

Mmasters200128@gmail.com
76% match
Loading thumbnail…

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

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.

Aanushapodapati99@gmail.com
74% match
Loading thumbnail…

pie chart

This pie chart visualizes rice production across Indian states, highlighting the highest and lowest producing regions in a summary below the chart. Built with D3 v7, it loads CSV data, aggregates production values per state using d3.rollup, and renders slices with d3.pie and d3.arc. The chart includes interactive tooltips that appear on mouseover, showing the exact production value for each state. An ordinal color scale assigns distinct colors to each slice within the SVG rendering.

Ssuchigeneralpur@gmail.com
74% 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
74% match