saiprasadpilla937@gmail.com

@SaiPrasadPilla·11 public vizzes

ice 8 -2

This example visualizes a hierarchical tree built from the first five rows of the StudentsPerformance dataset, using a custom D3.js layout to display the path from student records through gender, race/ethnicity, and parental education levels down to individual leaf nodes. The SVG rendering is driven by D3’s selection and layout APIs, with interactive hover tooltips that reveal the original row’s attribute values. A fallback embedded array supplies the same data if the remote CSV fetch is blocked, and a status line reports the current data source.

Nov 10, 2025

Loading thumbnail…

Fork of ICE8-network

This example displays a world map with sample population values shaded using a blue sequential color scale. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render countries from TopoJSON data sourced from world-atlas’s `countries-110m.json`. Hovering over a shaded country reveals a tooltip with the population value; countries without data appear gray. The code applies a logarithmic domain to the color scale and relies on `topojson-client` for GeoJSON conversion, with SVG output.

Nov 10, 2025

Loading thumbnail…

Fork of ICE8-network

This collaborative network visualization uses a force-directed layout to show relationships between students, projects, and a lab. D3’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` position colored nodes by group, while link thickness encodes connection value. The SVG rendering includes draggable nodes via `d3.drag()` and hover tooltips that display each node’s name and group. Data loads from two CSV files, with node color mapped by a `d3.scaleOrdinal`.

Nov 10, 2025

Loading thumbnail…

q4-ice7

This area chart displays the average scores for math, reading, and writing subjects, sourced from a StudentsPerformance CSV dataset. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.area` to generate the filled path and `d3.scalePoint` for the categorical x-axis. Individual data points are marked with circles, and tooltips are provided via appended `title` elements, showing exact average values on hover.

Oct 27, 2025

Loading thumbnail…

q3-ice7

This example shows a line chart of average scores for three subjects—Math, Reading, and Writing—derived from the StudentsPerformance dataset. It uses D3 v7 with SVG rendering, loading CSV data via `d3.csv`, then computing means with `d3.mean`. The chart employs `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to draw the trend line, with red circles marking each average score.

Oct 27, 2025

Loading thumbnail…

q2-ice7

This pie chart shows the distribution of students by their test preparation course status, dividing them into "completed" and "none" groups with counts displayed on each slice. The visualization uses D3 v7 to load CSV data via `d3.csv`, aggregate counts with `d3.rollup`, generate the pie geometry through `d3.pie()` and `d3.arc()`, and render slices as SVG paths with an ordinal color scale. Labels are positioned using `arc.centroid`, and a legend is built manually with SVG rectangles and text elements alongside the chart.

Oct 27, 2025

Loading thumbnail…

q1-ice7

A reusable scatter plot displays the relationship between math and reading scores for students in the StudentsPerformance dataset. Each steelblue dot represents an individual student’s paired scores, with linear scales mapping both axes. The code defines a `drawScatterPlot` function that uses d3.csv to load the data, d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft for ticks, rendering circles in an SVG container.

Oct 27, 2025

Loading thumbnail…

ice 6-3

Two panels display student performance data from a CSV file. The top chart plots math, reading, and writing scores as a multi-series line chart across student index. The bottom chart combines math scores as semi-transparent bars with reading scores as a line overlay for the first 100 students. Both charts use D3.js v7 with SVG rendering, d3.line for the series, d3.scaleLinear for axes, and d3.scaleBand for the bar categories.

Oct 19, 2025

Loading thumbnail…

ice 6 -2

This scatter plot shows the relationship between math and reading scores for individual students from the StudentsPerformance dataset. Each circle represents a student, with positions determined by their math score on the x-axis and reading score on the y-axis. The visualization uses d3.csv to load the remote dataset, d3.scaleLinear for both axes, and d3.axisBottom/d3.axisLeft to render the axes. Circles are appended via d3.selectAll and styled with steelblue fill, turning orange on hover. The SVG rendering includes labeled axes for both score dimensions.

Oct 19, 2025

Loading thumbnail…

ice 6-1

This bar chart displays the average math score for each gender group from the StudentsPerformance dataset. The chart uses steelblue bars that turn orange on hover, with a y-axis labeled "Average Math Score" and an x-axis labeled "Gender." The visualization is built with d3.v7, using `d3.csv` to load the data, `d3.groups` to group by gender, `d3.mean` to calculate averages, and `d3.scaleBand` and `d3.scaleLinear` for the axes. SVG rendering is used, with bars appended as rectangles via `chart.selectAll('.bar').data(grouped).enter().append('rect')`.

Oct 19, 2025

Loading thumbnail…

Fork of Hello VizHub

This dashboard summarizes student performance data from a CSV file. It displays summary statistics, a table of the first ten records, and a bar chart comparing average Math, Reading, and Writing scores. The visualization uses D3.js v7 with `d3.csv` for data loading and `d3.select` for DOM manipulation, rendering the chart as SVG with `d3.scaleBand` and `d3.scaleLinear` axes.

Oct 5, 2025