konudulamanisha@gmail.com

Assignment8_Manisha_NetworkVisualization

This network visualization displays nodes and links loaded from two CSV files, with link width encoding edge weight. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.scaleOrdinal` colors nodes by team affiliation. Nodes are rendered as SVG `<circle>` elements with draggable behavior via D3’s drag API, and a tooltip appears on mouseover showing node ID and team. Labels sit beside each node, and the simulation updates positions on each tick.

Assignment8_Manisha_NetworkVisualization

A force-directed network visualization maps cities as nodes and routes as weighted links, with node colors encoding geographic region (North America, Europe, Asia). The interactive SVG chart supports dragging nodes and shows tooltips with city and region on hover. It uses D3 v7 APIs including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceCollide` to simulate layout, with data loaded from CSV files hosted on GitHub.

Assignment8_Manisha_TreeVisualization

This visualization displays a hierarchical tree structure loaded from a CSV file containing id, parent, and label columns. The code uses `d3.stratify` to convert the flat tabular data into a hierarchy, then applies the `d3.tree` layout to position nodes and links horizontally. It renders SVG circles for nodes with color coding by depth and uses `d3.linkHorizontal` for curved connector paths. The tree draws from a raw GitHub source URL with d3.v7 and displays labels next to each node.

Assignment8_Manisha_USMap

This choropleth map displays US state unemployment rates, with each state colored on a sequential blue-purple scale (d3.interpolatePuBu) according to its percentage. The visualization loads state boundaries from the us-atlas TopoJSON file and joins CSV data containing state names and unemployment values. Hovering over a state reveals a tooltip showing the state name and its unemployment rate or “N/A” for missing data. The map uses d3.geoPath with a d3.geoAlbersUsa projection and renders as SVG, with states encoded as paths and tooltip positioning handled via mouse events.

Assignment8_Manisha_WorldMap

This choropleth visualizes renewable electricity generation percentages across countries using a Natural Earth TopoJSON world map. It maps each nation's share of renewable power to a YlGnBu color scale. The visualization loads CSV data with ISO3 country codes, joining values to geographic features for color fills. Rendered as SVG, the map displays a graticule overlay and a gradient legend. A tooltip follows the mouse to report each country's percentage value. The implementation uses `d3.geoPath` for map projection, `d3.scaleSequential` for the color scale, and `d3.axisBottom` for the legend.

ICE7_AreaChart_CropProduction_Manisha

This area chart visualizes crop production (in million tonnes) across countries, sorted from highest to lowest producers. The visualization combines a smooth blue area fill with a line overlay and labeled dots to highlight individual data points. Built with D3.js v7, it uses `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shapes, while `d3.scaleLinear` and `d3.scaleBand` handle the axes. Data is loaded from a CSV file via `d3.csv`, with grid lines and rotated country labels for readability.

ICE7_LineChart_CropProduction_Manisha

This line chart displays crop production by country, with countries sorted in descending order of total production in million tonnes. The visualization uses a monotone curve to connect data points, with each point represented by a colored dot that reveals exact production values on hover. The chart is rendered as an SVG using D3 v7, employing `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Data is loaded asynchronously from a CSV file using `d3.csv` with `d3.autoType`.

ICE7_PieChart_Manisha

This pie chart visualizes the share of total crop production for various countries, using data fetched from a CSV file. Each slice represents a country's production in million tonnes, with labels and percentage annotations for larger shares. The visualization is built with D3 v7, using `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal()` for color mapping, rendered as SVG. A legend accompanies the chart, and the code employs `d3.csv` and `d3.autoType` for data ingestion and parsing.

ICE7_Reusable_Scatter_CropYield_Manisha

This scatter plot visualizes crop yield in tons per hectare against production in million tonnes, with points colored by a categorical group. Built as a reusable D3.js component, it loads data from a CSV file and uses the `d3.selectAll().join()` pattern for incremental rendering. The chart applies `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for labeled axes, with a legend generated from the distinct group values.

ICE7_Reusable_Scatter_CropYield_Manisha

This interactive scatter plot, built with D3.js (v7), visualizes crop yield in tons per hectare across different countries. Each blue circle represents a single country, positioned along the y-axis and plotted horizontally based on its yield value, with countries sorted in descending order. The chart is created using a reusable `reusableScatter` function that employs D3's `scaleLinear` and `scalePoint` for axes and a `join` pattern for efficient SVG element management. The data is loaded from a remote CSV file using `d3.csv` with `d3.autoType` and then processed and rendered into the visualization.

ICE7_Reusable_Scatter_CropYield_Manisha

This example shows a reusable scatter plot of crop yield by country, built with D3.js v7 and styled with a clean, minimal layout. The chart renders circles for each data point, with position mapping to a country’s yield and the visual encoding defined by a custom-scale function. It uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` to generate the tick marks, while the data is loaded from a CSV using `d3.csv`. The reusable pattern is implemented through a `scatterPlot` function that takes configuration options, making the chart adaptable to different datasets.

ICE7_AreaChart_Manisha

This area chart visualizes solar radiation levels for the first six planets, ordered by their distance from the sun. The visualization uses D3 v7 to render an SVG path whose area is filled with a light blue color and stroked in steel blue. The x-axis applies a point scale to the planet names, while the y-axis uses a linear scale for radiation values, with the area curve smoothed using `d3.curveMonotoneX`.

ICE7_LineChart_Manisha

This line chart visualizes solar radiation levels for eight planets, ordered by their distance from the Sun. Using D3.js v7 with SVG rendering, the code loads CSV data from a GitHub repository and maps the values with `d3.scalePoint` for the categorical planet axis and `d3.scaleLinear` for the radiation intensity. A monotone curve (`d3.curveMonotoneX`) connects the points, with circle markers at each planet, while rotated tick labels and axis titles clarify the ordered categories and units.

ICE7_PieChart_Manisha

This pie chart displays each planet’s share of total solar radiation, with slice labels showing percentages and a legend listing raw W/m² values. The visualization loads CSV data from a GitHub repository and uses D3 v7’s `d3.csv`, `d3.autoType`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`. SVG paths and text elements are generated within a 640×480 canvas, while the HTML legend updates dynamically alongside the chart.

ICE7_Reusable_Scatter_Plot_Manisha

This visualization shows the relationship between gravity and average temperature for planets, with each point colored by planet category. Users can hover over a dot to view a tooltip with the planet’s name, category, and exact gravity and temperature values. The chart is built as a reusable scatter-plot factory using D3 v7, employing d3.scaleLinear, d3.extent, d3.axisBottom, d3.axisLeft, d3.schemeTableau10, and d3.least for nearest-point detection. Rendering uses SVG circles inside a joined `<g>` element, with axes and labels appended directly.

Assignment 6 – Manisha (Combined Bar + Line Chart)

This visualization combines a bar chart and line chart to compare the average price and average area of homes across six Texas cities. The steel-blue bars represent average price, while the red line and overlaid circles show the average area, using dual left and right y-axes. Created with D3 v7, the graphic uses `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, `axisRight`, and `line` to encode the data, all rendered as SVG elements on a dark background with a manually drawn legend.

Assignment 6 - Manisha (Multi-Series Chart)

This multi-series line chart compares average housing metrics across cities using normalized 0–100 values to share a single y-axis. The dark-themed SVG visualization plots three data series for average price, area, and bedrooms, sourced from a GitHub-hosted CSV file. The code aggregates the data with `d3.rollups`, sorts cities by name, and normalizes each metric against its maximum. Using `d3.scalePoint` for the categorical x-axis and `d3.scaleLinear` for the y-axis, it renders the lines, rotated tick labels, and a color-coded legend, all styled through D3 version 7’s standard API.

Assignment 6 - Manisha (Scatter Plot)

This scatter plot displays company financial data (Revenue, Expenses, and Profit) over time, using year on the x-axis and dollar amounts on the y-axis. Each point is colored by financial type, with hover interactions revealing an HTML tooltip showing year, type, value, and employee count. The chart is built with React and D3 v7, using `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes. Data comes from an embedded CSV parsed with `csvParse`. Points are rendered as SVG circles with gridlines and a custom legend.

Assignment 6 - Manisha (Housing Prices)

This combined bar-and-line chart displays average housing prices and average living areas across multiple cities. The visualization aggregates a CSV housing dataset using `d3.csv` and `d3.rollups`, computing mean values per location. Blue bars represent average price on the left axis, while a red line with point markers shows average area on the right axis. The chart uses `d3.scaleBand` and `d3.scaleLinear` for positioning, with `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for tick marks. The SVG rendering includes rotated city labels and a custom legend for both metrics.