Skip to main content
Log in
S

sahasrakaturi91@gmail.com

@sahasra-123·13 public vizzes

Loading thumbnail…

ice8_task2b

This network visualization shows research collaborations among people, papers, and topics, with node color encoding the node type (green for people, orange for papers, blue for topics). The graph includes coauthorship connections alongside authorship links, presented in an interactive force-directed layout. The code uses D3 v7's `forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` forces to compute node positions, while `d3.drag` handles interaction. Links are rendered as SVG lines, nodes as circles, and labels as text elements within the SVG canvas.

Nov 7, 2025
Loading thumbnail…

ice8_task2A

This interactive tree diagram visualizes programming paradigms, categorizing languages into functional, object-oriented, logic, and procedural groups. The visualization uses a hierarchical layout with custom node shapes and colors for each depth level. The chart is rendered in SVG using d3.v7, employing the `d3.tree` layout algorithm with horizontal links. Node colors are assigned using `d3.scaleOrdinal` with distinct palette ranges, and text labels display each paradigm and language name. The data structure is hardcoded in the source file.

Nov 7, 2025
Loading thumbnail…

ice8_task2

This radial tree diagram shows the hierarchical structure of programming paradigms, branching from a central root into Functional, Object-Oriented, Logic, and Procedural categories, with further subdivisions down to individual languages. The visualization uses a custom D3.js v7 tree layout with SVG rendering, where nodes are represented by different geometric shapes—diamonds for the root, rounded rectangles for paradigm categories, circles for sub-families, and triangles for leaf languages. Links are drawn using d3.linkHorizontal with curved paths, while a d3.scaleOrdinal color scheme distinguishes the four main paradigm branches. The data is hardcoded as a nested JavaScript object.

Nov 7, 2025
Loading thumbnail…

ice_8_task1

This choropleth shows U.S. state literacy rates from a CSV dataset, with darker green shades indicating higher percentages and gray for missing data. The visualization uses D3 v7 and TopoJSON to load and render state boundaries via `d3.geoPath` with an Albers USA projection, quantized color encoding with `d3.scaleQuantize` and `schemeGreens`, and tooltips built from `append('title')`. Data is joined by mapping state names to FIPS codes.

Nov 7, 2025
Loading thumbnail…

ice7_task3

This area chart displays the relationship between hours studied and average exam scores, using a steelblue fill with orange data points to highlight the trend. The visualization groups individual student records by rounded study hours and computes the mean exam score for each group. Built with D3 v7, the chart uses `d3.csv` for data loading, `d3.groups` to aggregate the data, `d3.scaleLinear` for axis scaling, and SVG rendering with animated elements and interactive tooltips on hover.

Oct 28, 2025
Loading thumbnail…

Ice_task2_2

This interactive line chart shows the relationship between hours studied and average exam score, aggregating individual student records into rounded hourly bins and plotting the mean score for each bin as a connected line with orange data points. Hovering over a point reveals a tooltip with the exact values. The visualization is built with D3 v7, using `d3.csv` to load the dataset, `d3.groups` and `d3.mean` for aggregation, and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft` for the coordinate system. It renders as SVG with animated transitions, styled with CSS for a clean card-based layout.

Oct 28, 2025
Loading thumbnail…

ice7_task2_1

This pie chart displays the distribution of student attendance levels (high, medium, and low) from a CSV dataset of exam scores. The visualization uses D3 v7’s `d3.pie` and `d3.scaleOrdinal` to generate SVG slices with a color-coded legend and in-chart labels. Data is grouped by attendance percentage thresholds, and a note box provides context for the analysis.

Oct 28, 2025
Loading thumbnail…

ice7_task1

This example visualizes the distribution of student attendance levels as a pie chart, grouping students into three categories: high (≥85%), medium (70%-84%), and low (<70%). Each slice is colored correspondingly, with a legend displayed alongside the chart. The visualization loads data from a CSV file using `d3.csv`, processes it with JavaScript array methods, and renders the pie using `d3.pie` and `d3.arc` within an SVG. A legend is dynamically populated using D3 selections, and the chart employs a `d3.scaleOrdinal` for color mapping.

Oct 28, 2025
Loading thumbnail…

Fork of ICE6_TASK_3

This visualization displays a multi-series line chart and a combined bar-plus-line chart exploring Spotify churn data, showing songs played per day by age across subscription types and average listening time against churn rate. The React-based example uses D3 v7 to load CSV data and render SVG charts, with modular helper functions handling axes, scales, and responsive dimensions via a `ResizeObserver`. The first chart bins ages into five-year groups with `d3.rollups` for aggregation, while the second combines bar and line encodings to compare listening metrics with churn outcomes.

Oct 20, 2025
Loading thumbnail…

ICE6_TASK_2

This example renders a scatter plot of student exam data, showing hours studied against previous scores while using sleep hours to drive a sequential turbo color scale. The visualization, built with React and D3 v7, loads CSV data from a remote GitHub gist and renders points as SVG circles. Hover interactions display a tooltip with each student’s attendance percentage and other attributes. The chart uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisLeft` with gridlines to structure the plot.

Oct 20, 2025
Loading thumbnail…

ICE6-ScatterPlot

This scatter plot visualizes student exam performance by plotting hours studied against previous scores, with each dot color-encoded by sleep hours using a sequential turbo scale. The visualization includes interactive tooltips that display additional student details on hover, along with gridlines and rotated axis labels for readability. The code uses D3 v7 with an SVG rendering approach, loading CSV data via `d3.csv` and `d3.autoType` to coerce values, then applying `d3.scaleLinear` for axes, `d3.scaleSequential` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for chart elements.

Oct 20, 2025
Loading thumbnail…

ICE6-BarChart

This bar chart displays the sum of a numeric column aggregated by a categorical column from a CSV file, automatically detecting the appropriate columns and sorting categories in descending order. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.rollup` with `d3.sum` for aggregation. Bars are rendered as SVG rectangles with tooltips showing category and value, while grid lines and axis labels aid readability.

Oct 20, 2025
Loading thumbnail…

Data visualization Project

This visualization presents a dashboard for an art and technology workshop dataset, showing attendance metrics and registration trends. It uses D3 v7 to render SVG charts, including a track-based attendance breakdown and a registered-versus-attended comparison. The interface includes interactive controls like dropdowns and text inputs for filtering, alongside summary cards displaying key statistics. The visualization is built with Vue, incorporates custom CSS styling, and references embedded PNG images for chart representations.

Oct 6, 2025