Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot India

✓ Published0🌍 Public
Aajoua
Last edited Feb 6, 2023
Created on Feb 6, 2023
Forked from D3 Scatterplot

This scatterplot visualizes the relationship between fruit and vegetable prices across Indian states, using data from the All India Index February 2016 dataset. Each circle represents a state, with its position determined by the two price indices. The visualization uses d3.csv to load the data, d3.scaleLinear with d3.extent to map values to screen coordinates, and d3.axisLeft and d3.axisBottom for the axes. Hovering over any circle reveals the exact fruit and vegetable values via a d3-created SVG title element.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This D3.js (v5) visualization displays the relationship between vegetable price and weight as a scatter plot, with each point colored by the first letter of the vegetable’s name. It includes axis labels, grid lines, and a tooltip on hover. The chart loads CSV data via `d3.csv` and renders with SVG, featuring interactive legend filtering by group and animated transitions through `d3.transition`. The layout is created using `d3.scaleLinear` for both axes and `d3.schemeCategory10` for color mapping.

NNita
75% 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
73% 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
73% match
Loading thumbnail…

Fruit and Veggies Price dataset

This visualization displays the Fruit and Veggies Price dataset, showing a bar chart of prices for a selected date (2019-05-19) and a scatter plot alongside a summary table and data table. The code fetches CSV data from a GitHub gist, then uses D3.js v6 to render the bar chart and scatter plot as SVG elements. The summary section displays file size, column count, and row count, while the HTML table lists all records.

Ffreyatran124@gmail.com
73% match
Loading thumbnail…

Scatter Plot for Vegetables Price vs Weight Scatter Plot

A scatter plot displays the relationship between vegetable price in USD and weight in kilograms, with each red dot representing an item from a CSV dataset loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and an SVG container with circles positioned via `cx` and `cy` attributes. Axis labels clarify the variables, while the chart scales from zero to the maximum observed values.

NNagasharan Sai Nandyala
72% match
Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This example displays stock price data for a vegetable-related dataset, plotting the Open, High, Low, and Close values over time from 2019. It uses a line chart with a brush-and-zoom interaction, allowing the user to select a time range and inspect price fluctuations across all four metrics. The visualization relies on D3.js APIs such as `d3.line`, `d3.brushX`, and `d3.zoom` to render the paths and manage the interactive focus and context panels. The data is loaded from a CSV file and rendered with SVG elements.

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

Fork of Practice D3 Scatter Plot

This scatter plot visualizes the average rural education index across Indian states from 2016, using data from the India Gov Open Data repository hosted on GitHub. D3 v7 loads the CSV, filters for rural sectors, and aggregates education values by year through a reduce operation. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with a fixed radius of 10 pixels to represent each data point, rendered across a full-window canvas.

SSubhendu Karmakar
72% match