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

100%

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

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 25, 2024

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.

AI-generated description

Here is the raw code data link

Shows the https://gist.githubusercontent.com/sagam929/c391612d2be3ad2d5b6891c2c3221972/raw/2acf19275a2eb7c162617a40cf938b3f3b68a2f9/india.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE -7 reusable scatter plot

This example cycles through a series of scatter plots, showing exam score correlations for each pair of six subjects (Telugu, Hindi, English, Maths, Science, Social). Each plot displays student scores as small, semi-transparent circles, with a new subject pair and color appearing every two seconds. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load the dataset from a GitHub gist. The SVG elements are recreated on each interval to switch the plotted variables.

Cchalasanigayaetiri@gmail.com

78% match

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

AAshrith Kudidhi

77% match

Loading thumbnail…

ICE7_Reusablescatterplot

This interactive scatterplot displays course data by plotting marks, time, and course number against each other. Built with D3.js 6.7.0, the visualization uses a reusable scatter plot module with linear scales and axis helpers. Every five seconds, the x-axis switches between the three data columns, animating the circles to reflect the new mapping. The SVG rendering adapts to the browser window size, with data loaded from a remote CSV file.

SSai Bhavana Akkineni

77% match

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot Divya

This reusable scatter plot visualizes room measurements from the Iris dataset, with each point’s shape encoding species and axes dynamically cycling through four numeric columns every 15 seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, `axisBottom`, and `join` for SVG rendering. The chart animates by resetting its x-value accessor and re-invoking the chart function, demonstrating the reusable chart pattern.

Ddivyakota99

77% 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

77% match

Loading thumbnail…

ICE 7

This interactive scatter plot maps student marks across Math and Science, with age encoded by symbol type. It cycles through different data columns as the x-axis every fifteen seconds, updating the visualization dynamically. Built with D3, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to render the SVG animation. The plot pulls data from a CSV file and adjusts its axes and points in real time, all within a responsive full-screen viewport.

SSnarasimhap

76% 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

75% match

Loading thumbnail…

Bonus ICE Scatter plot using D3.js

This example displays agricultural data from India as a 3D scatter plot, with each trace mapping different variables—crop, production, and district on the first trace, and crop year, season, and area on the second. It uses the Plotly.js library to render the `scatter3d` markers, loading CSV data through D3.js v3’s `d3.csv` method. The code defines two marker traces with distinct colors and opacity, then plots them in a single `myDiv` container with zero margins for a clean view.

Aav.dj.2000@gmail.com

75% match