Skip to main content
SimilarExport ZIP
100%

Fork of Practice D3 Scatter Plot

✓ Published1🌍 Public
SSubhendu Karmakar
Last edited Dec 9, 2023
Created on Dec 9, 2023

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.

AI-generated description

D3 Scatterplot Practice with other dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Practice D3 Scatter Plot

This scatter plot visualizes average rural education index values across different years, using data from the All India Index February 2016 dataset. The code loads CSV data via `d3.csv`, aggregates it by year using a reduce operation, and renders circles with SVG. It employs `d3.scaleLinear` for positioning, `d3.extent` for the x-domain, and `d3.axisBottom` and `d3.axisLeft` for chart axes. The visualization is built with D3 v7 and renders at full viewport size.

SSubhendu Karmakar
91% match
Loading thumbnail…

Practice Reusable D3 Scatter Plot

This example visualizes the average rural education index per year across India using a reusable D3 scatter plot. The chart displays circular marks positioned by year on the x-axis and mean education value on the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a GitHub-hosted CSV using `d3.csv`, filtered for rural sectors, and aggregated by calculating the mean education score per year with `d3.scaleLinear` for both scales. The SVG rendering approach uses `d3.selectAll` with a data join to draw circles.

SSubhendu Karmakar
90% match
Loading thumbnail…

ICE-7: Reusable Scatter Plot Visualization of Primary Indian Schools Facilities

This interactive scatter plot uses D3.js to visualize facilities across primary schools in India, with the average ratio of boys to girls on the x-axis and a rotating y-axis cycling through Library, Play Ground, Computer Labs, and Food Stalls every two seconds. Each point represents a state, encoded with distinct shapes and colors from `d3.scaleOrdinal` and `d3.schemeCategory10`. The reusable `scatterPlot` module handles axes, labels, and animated transitions, rendering as an SVG from the provided `india.csv` data source.

Vvinodreddysagam929@gmail.com
75% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the literacy rates of women across 16 Indian states, with each circle representing a state and its position along the horizontal axis corresponding to the literacy percentage. The vertical axis lists the state names, using a point scale for categorical placement. The visualization is built with D3 v5, employing `scaleLinear` for the numeric axis and `scalePoint` for the categorical one, alongside `axisBottom` and `axisLeft` for the ticks. Data is loaded from a local CSV file, and the SVG rendering includes styled circles and axis labels.

SSrishti2398
72% match
Loading thumbnail…

D3 Scatterplot India

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.

Aajoua
72% match
Loading thumbnail…

Fork of welcome to D3Js

This example visualizes Indian states data using D3.js v5 and SVG. It displays a sortable table of state statistics—including population, official language, area, vehicle code, statehood year, and capital vs. largest city—alongside a set of stylized employee figures drawn in SVG. The table is populated dynamically from CSV data fetched from a remote source, and the SVG section depicts three simple human-like figures constructed from basic shapes, demonstrating D3’s ability to create custom vector illustrations. The page also includes placeholders for additional charts on population, language diversity, area comparison, vehicle codes, statehood timeline, and capital/largest city comparisons, all rendered with D3 and styled with basic CSS. The project is a fork of the "Welcome to D3Js" example, extended with Indian states data and custom visualizations.

SSrividya Madasu
70% match
Loading thumbnail…

Fork of Ram_ICE7

This D3.js visualization displays the 2018 populations of Indian states as a pie chart, with each state represented by a colored slice sized according to its ranking value. The chart is rendered as SVG using D3’s `pie`, `arc`, and `scaleOrdinal` APIs, with data fetched as CSV from a GitHub gist. Slice labels and a legend show population figures formatted in thousands using `format`, while the overall layout is fixed within an SVG canvas of 960×500 pixels.

IIndhuKrishnaraj
70% match
Loading thumbnail…

Fork of Scatter Plot Using Different Data Set

This scatter plot visualizes the relationship between state-level values for the years 2020 and 2024, with each circle representing a state. The chart compares economic or demographic metrics across these two time points, revealing correlations or shifts over the period. Built with D3 v6, the visualization uses reusable module patterns via `scatterPlot.js`, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for scales and axes. Data is loaded from a CSV file using `d3.csv` and parsed with a custom `parseRow` function, then rendered as SVG circles with steelblue fill and 0.7 opacity. The example demonstrates a modular, data-driven approach to scatter plot construction.

Ssrividyamadas@gmail.com
68% match