Sai Charan

Assignment_9

This example loads a CSV file containing sales, profit, and customer data across four regions from 2018–2023, then parses the numeric columns with `d3.csv` and `forEach`. It shows a raw data-loading stage with parsed values logged to the browser console, serving as a preliminary step for further visualization. The code uses D3 v7 for CSV parsing and data type coercion, with React providing the component structure via a simple import map setup.

Nov 16, 2025

ICE8-network

This interactive network visualization displays a collaboration network among students, projects, and labs, with nodes colored by group and sized by connection weight. The graph uses force-directed layout via d3.forceSimulation with forceLink for link constraints, forceManyBody for repulsion, and forceCenter to keep the layout centered. Users can drag nodes with d3.drag to explore relationships, and hovering reveals a tooltip with node details from the CSV data sources. The SVG rendering uses d3.select and join operations to efficiently manage the dynamic graph elements.

ICE8-family-tree

This tree visualization displays a hierarchical dataset of life forms, from a root "Life" node down to individual species. The layout uses a horizontal dendrogram, with links connecting parent and child nodes, where node colors and sizes vary by depth and whether a node has children. Built with D3.js v7, the example loads CSV data and uses the `stratify`, `tree`, and `linkHorizontal` methods to compute and draw the structure. The SVG rendering positions nodes via a transform, with circles and text labels for each entry.

ICE8-world-map

This world map visualizes population values for 20 countries using a sequential blue color scale, with lighter shades for smaller populations and darker shades for larger ones. Hovering over a country displays a tooltip with its name and population. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths from TopoJSON data, and d3.scaleSequential with d3.interpolateBlues for coloring. Population data comes from a local CSV file, while country boundaries load from the world-atlas TopoJSON collection.

ICE8-country-map-data

This example renders the text "Hello D3 & React" as a full-screen message using a React component with a ref hook. The code demonstrates a minimal integration between React 19 and D3 v7, where the useEffect hook calls d3.select to set the text content of a div element. The visualization shows how to combine React's component-based rendering with D3's DOM selection API, with basic styling applied through a CSS class. The example serves as a starter template for mixing these two popular JavaScript libraries.

Assgnment_7_Q4

This area chart visualizes monthly sales data from a small inline CSV dataset, showing sales values across twelve months from January to December. The visualization uses D3.js v7 with an SVG rendering approach, combining a filled area path with an overlaid line and circular data points. The chart employs `d3.area()` and `d3.line()` with monotone interpolation to smooth the curve, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. Interactive tooltips appear on mouseover, displaying the month and sales value for each point.

Assignment_7_Q3

This line chart shows monthly sales figures across a calendar year, with a smooth curved line connecting twelve data points from January through December. Users can hover over any circle marker to see a tooltip displaying the exact month and sales value. The visualization uses D3 v7 with SVG rendering, employing d3.scaleLinear for the x and y axes, d3.line with curveMonotoneX for the path, and d3.csvParse for loading the embedded dataset. Axis labels clarify the month and sales dimensions.

Assignment_7_Q2

This pie chart visualizes total expenses aggregated by region from an inline CSV dataset containing monthly sales, profit, expenses, and region fields. The D3.js (v7) code uses `d3.rollup` and `d3.sum` to aggregate expenses per region, then renders SVG slices with `d3.pie` and `d3.arc`. Interactive tooltips appear on mouseover showing the exact expense value, while slice labels display percentage shares (hidden below 5%). A legend with color-coded rectangles identifies each region and its total expenses, using `d3.scaleOrdinal` with the `schemeTableau10` color scheme.

Assignment_7_Q1

A reusable scatter plot compares monthly Sales against Profit, with points colored and shaped by region (North, South, East, West) using D3 v7 scales (d3.scaleOrdinal, d3.symbol). A tooltip appears on mouseover showing month, region, sales, and profit. The chart is built as a factory function (scatterPlot) with configurable margins and transition animations for point updates. Data comes from an inline CSV string parsed by d3.csvParse.

Task 3

This example shows a multi-series line chart comparing sales_A, sales_B, and sales_C over 20 time points, followed by a combined chart that overlays sales_A as bars on the left axis and sales_B as a line on the right axis. Both charts use D3 v7 with SVG rendering. The line chart applies d3.line, d3.scaleLinear, and d3.schemeCategory10 for color encoding, while the combined chart uses d3.scaleBand with axisLeft and axisRight for dual y-axes. Data is loaded from a local CSV file using d3.csv with d3.autoType.

Oct 17, 2025

task 2

This scatter plot visualizes the relationship between sepal length and petal length for three Iris flower species, using the classic Iris dataset. Each flower is represented as a colored circle, with species distinctions shown through a categorical color scale. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.scaleLinear` for the x and y axes, and SVG for rendering. A legend identifies species, and the plot includes clear axis labels and a title.

Oct 17, 2025

index

This bar chart displays product sales performance for 200 products, using a D3.js v7 SVG visualization. The chart maps product names to the x-axis using `d3.scaleBand` and sales values to the y-axis via `d3.scaleLinear`, with the maximum sales value determining the scale domain. Each product is represented by a teal rectangle, with bar heights proportional to sales values. The data is loaded from a CSV file using `d3.csv` with `d3.autoType` for automatic data parsing. The axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with x-axis labels rotated and filtered to show every tenth tick for readability.

Oct 17, 2025