vineelaviswanadham07@gmail.com

Ice_8_q2_tree

This simple static tree visualization displays a three-level hierarchy of programming languages, grouped into Procedural, Object-Oriented, and Scripting categories. Using d3.hierarchy and d3.tree, the layout computes x and y positions for all nodes, which are rendered as color-coded circles (red, blue, green) based on depth in the SVG. Links between nodes are drawn as gray lines, and each node is labeled with its language or category name. The example demonstrates a basic D3 v7 tree layout with data defined inline in JavaScript.

Nov 9, 2025

Ice_8_tree

This example shows a choropleth world map coloring select countries by population, with interactive buttons to zoom into India or reset the view. It uses D3 v7 and TopoJSON to load world geography, projecting countries with d3.geoMercator and rendering them as SVG paths filled via d3.scaleSequential with an orange interpolator. Population values for India, the USA, China, Brazil, France, and Germany are drawn from an inline array and matched to country IDs. A d3 transition animates the map transform when zooming or resetting.

Nov 9, 2025

Ice_8_map

This interactive choropleth map visualizes population data for a subset of countries on a world map, using a sequential orange color scale to represent population values, with countries lacking data rendered in gray. Built with D3 v7 and TopoJSON, it projects the world using `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The map features a "Zoom to India" button that smoothly animates a zoom and pan transition via `transition().duration(800)`, alongside a "Reset View" button to restore the original projection.

Nov 9, 2025

ice-7-task3

A stacked area chart displays monthly household expenses across seven categories—Housing, Food, Transportation, Utilities, Entertainment, Healthcare, and Education—from a CSV file. Each category is drawn as a semi-transparent filled area with a distinct color from `d3.schemeTableau10`, using `d3.area()` to compute paths. The x-axis uses a point scale for months, and the y-axis is linear for USD amounts. A legend identifies categories, with axes and labels rendered via `d3.axisBottom` and `d3.axisLeft` in SVG.

ice-7-task2

This example presents a visual analysis of household expenses across seven categories over a year, using annual totals in a pie chart with percentage labels and a legend, alongside a line chart tracking monthly spending per category. The pie chart computes yearly sums from a CSV dataset, applies a Tableau color scheme, and displays labels positioned along an inner arc. The line chart uses a point scale for months, a linear scale for expense values, and renders lines for each category via `d3.line()`, with axes and labels added through `d3.axisBottom` and `d3.axisLeft`. Both charts are rendered as SVG elements.

ice-7-q2

This bar chart displays letter frequencies from a small CSV dataset, with interactive bars that highlight and dim when selected by clicking. Built with React and D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` with a nice number of ticks for the count y-axis. The chart renders bars with rounded corners, transitions on hover and selection, and includes axis titles and a title text, all styled with the Inter font.

ice_7_task_1

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) across vehicles in the mtcars dataset, with points colored by cylinder count. The reusable `scatterPlot` function, built with d3.v7, configures linear scales, ordinal color encoding, axes, and a legend. It uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.schemeTableau10`, and `d3.axisBottom`/`d3.axisLeft` to render the chart, with data loaded via `d3.csv` and `d3.autoType`.

DV A6 T3

This visualization shows a parallel coordinates plot for six numeric car attributes—miles per gallon, cylinders, displacement, horsepower, weight, and acceleration—with lines colored by the vehicle’s origin (USA, Japan, Europe) using a small embedded CSV dataset. Using D3 v7, the code constructs vertical linear scales for each dimension via `d3.scaleLinear` and `d3.extent`, positions axes with `d3.scalePoint` and `d3.axisLeft`, and draws the polylines with `d3.line()`. The SVG rendering applies hover effects that increase stroke width and opacity, making individual car records easier to trace.

DV A6 T2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three flower species, with tooltips revealing exact values on hover. Using D3.js v7, the visualization loads CSV data via `d3.csv`, maps the variables to linear scales with `d3.scaleLinear`, and assigns categorical colors with `d3.scaleOrdinal`. The code renders the plot as SVG, drawing axes with `d3.axisBottom` and `d3.axisLeft`, and includes gridlines, axis labels, and a chart title, with hover interactions handled through mouse events and a custom tooltip element.

DV A6 T2

This example demonstrates a minimal web page that displays a centered, large-format message reading “Hello HTML!”. The visualization is rendered entirely through standard HTML and CSS, using a `.message` class with an `font-size` of 12em and `text-align: center` styling. The JavaScript file simply logs `hello world` to the console, providing no interactive or dynamic visual behavior. The project serves as a basic template for testing the setup of HTML, CSS, and JavaScript files from a V3 source repository.

DV Assignment

This horizontal bar chart shows the number of visitors per floor at the UNT Library, with bars sorted in descending order. The visualization uses D3 v7 with SVG rendering, loading tab-separated data from a GitHub gist via `d3.dsv`. The code uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for floor categories, with black bars that turn steelblue on hover. Interactive tooltips appear on mousemove, displaying each floor's visitor count, while gridlines and labeled axes provide context.