sravya010

ice 8 network

A force-directed network diagram shows relationships between students and activities, with red nodes representing students and blue nodes representing activities. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while SVG circles and lines render the network structure. Labels identify each node, and the simulation supports drag interactions through d3.drag, allowing users to reposition nodes dynamically.

Apr 12, 2026

assignment 8 map

This choropleth map visualizes internet usage percentages for selected countries, with darker blue shades indicating higher adoption rates. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries from TopoJSON data loaded via world-atlas, while a sequential `d3.scaleSequential` with `d3.interpolateBlues` encodes the values. Hovering highlights a country and displays a tooltip with its name and usage percentage. A gradient legend with a linear axis communicates the 40–100% range.

Apr 12, 2026

PIE Chart - ICE 7

This pie chart visualizes the gender distribution of students in the StudentsPerformance.csv dataset. Each slice displays the gender and its percentage of the total, with an accompanying legend showing exact counts. Built with D3 v7, the code uses `d3.rollup` to aggregate data, `d3.pie` for the layout, and `d3.arc` to generate SVG paths. A Tableau10 color scale and custom label arcs enhance readability.

Reusable Scatter plot - ICE 7

This reusable scatter plot compares math and reading scores from the StudentsPerformance.csv dataset, with gender distinguishing the data points by color. The chart uses d3.v7 to implement a modular scatterPlot() function with configurable accessor methods for x, y, color, and axis labels. D3’s scaleLinear, scaleOrdinal, and schemeTableau10 power the axes and color encoding, while hover tooltips display each point’s exact values. The legend, axes, and dots are rendered dynamically within an SVG container, following D3’s data-join pattern for reusable chart components.

Area Chart - ICE 7

This area chart shows the average math score for male and female students across six parental education levels, from some high school to a master’s degree. Two semi-transparent filled areas with overlaid lines and circles compare the trends, with a legend identifying each gender. The visualization uses D3 v7’s `d3.csv`, `d3.rollups`, `d3.mean`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.area` to process the StudentsPerformance.csv data and render the SVG output.

Line chart - ICE 7

A line chart compares average math scores between male and female students across six parental education levels, from some high school to master’s degree. It shows that scores generally rise with education level, with females slightly outperforming males at most levels. The visualization loads the CSV data with d3.csv, aggregates using d3.rollups and d3.mean, and renders an SVG via d3.axisBottom, d3.axisLeft, and d3.line. Point markers include tooltips with exact averages, and a legend distinguishes the two gender lines.

Reusable Scatter Plot

This reusable chart displays song data from a Spotify CSV, plotting energy against danceability as colored circles. It demonstrates a flexible D3 architecture where a scatter plot and a pie chart are built as modular functions with getter/setter methods for configuration. The code uses d3.csv for data loading, scaleLinear, extent, axisLeft, and axisBottom for scales and axes, and d3.pie for the pie chart. SVG rendering renders both visualizations, with the pie chart categorizing tracks by popularity levels.

Mar 28, 2026

bar chart

This bar chart shows the average radius mean of cell nuclei grouped by diagnosis (M for malignant, B for benign). The chart uses a vertical bar layout with a color-encoded categorical scale and displays the numeric value above each bar. Built with D3 v7, it loads CSV data, aggregates values using `d3.rollups` and `d3.mean`, and renders an SVG with axes, a grid, and hover opacity effects. The data source is a remote GitHub-hosted CSV file.

task 3

This visualization presents a combined multi-series chart of the Breast Cancer dataset, displaying three variables across sample indices. Light gray bars represent smoothness_mean, scaled by a factor of 1000, while two overlaid polylines show radius_mean in steelblue and perimeter_mean in orange, using a shared y-axis for measurement values. The chart is rendered as an SVG using d3.v7, with data fetched remotely via d3.csv. Axes include grid lines created through SVG transforms and d3.axisBottom and d3.axisLeft, with a legend and axis labels clarifying the series. The dataset is sliced to the first 80 rows.

scatter plot

This scatter plot uses the classic Iris dataset to compare sepal length and petal length across three flower species, with a legend and interactive tooltips. The D3.v7 code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Points are rendered as SVG circles, with a grid drawn using `d3.axisBottom` and `d3.axisLeft`, and mouse events enlarge points and display detailed measurements.

Fork of bar chart

This bar chart shows the average radius mean of breast cancer tumor cells, grouped by diagnosis (benign or malignant). Sourced from a CSV file fetched via `d3.csv`, the data is aggregated using `d3.rollups` and `d3.mean`. Rendered as SVG, the chart employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Bars are styled with a black fill that transitions to steelblue on hover. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the chart drawn on an 800x500 canvas.

Fork of CV: Bar Chart

This example displays a bar chart of country populations, where each bar is initially black. Clicking a bar turns it white with a black stroke, visually selecting it. The chart is built with React and D3 v7, using D3’s `scaleBand` and `scaleLinear` for axes, and SVG rendering. Data loads from a CSV file, and bar interactions trigger re-renders with updated styling.

Fork of CV: Bar Chart

This bar chart compares the average tumor radius between benign (B) and malignant (M) diagnoses in a breast cancer dataset. Two black bars represent the computed mean radius for each diagnostic group, with labeled axes and a bold title. The visualization uses D3.js scaling, axis generation, and SVG rendering within a React component, processing data loaded from a CSV file.