mNamratha25

A2Q5

This animated scatter plot reveals relationships between student study habits and academic performance. It cycles through three variable pairings every five seconds, displaying Marks against time_study, then number_courses, using D3 scales and axes. Data comes from a CSV file loaded via d3.csv, with circles redrawn through a custom scatterPlot module. The visualization uses d3.scaleLinear for positioning, d3.axisLeft and d3.axisBottom for axes, and setInterval to trigger updates in the SVG rendering.

Jul 22, 2023

A2Q4

This bubble chart shows the relationship between cereal rating, sodium levels, and calorie content for different manufacturers in India. Each circle represents a cereal product, positioned by rating on the x-axis and sodium on the y-axis, with the circle size encoding calories and color distinguishing manufacturers. The visualization uses d3.csv to load the data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color encoding. SVG rendering displays the bubbles, while legends for calorie size and manufacturer color are manually positioned.

Jul 22, 2023

A2Q3

This interactive scatterplot visualizes COVID-19 metrics across countries by continent, plotting selectable attributes from the Covid World May Data CSV on x- and y-axes. Users can compare new cases, total cases, and death counts, with points colored by continent via a legend. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles render the data and dropdown menus control axis selection.

A2Q2

This example shows a stacked bar chart of fruit data, with each bar divided into three segments representing different soil conditions. The chart uses a categorical X-axis for fruit groups and a linear Y-axis for values up to 60. The code loads CSV data via `d3.csv`, stacks the data using `d3.stack()`, and renders the bars as SVG rectangles. It employs `d3.scaleBand` for the X-axis, `d3.scaleLinear` for the Y-axis, and `d3.scaleOrdinal` for color mapping, with regions colored darkblue, blue, and lightblue.

A2Q7P2

This visualization shows a network of people connected by friendship links, with each person represented as a pink circle labeled with their name and connected by green arrowed lines. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes. Users can drag nodes interactively, and hovering highlights a node with a blue border. Data comes from a local JSON file containing ten nodes and twelve links, rendered as SVG elements.

Social Network Graph

This social network graph visualizes friendships among eight people, with green circular nodes labeled by name and connected by thick black directed edges with arrowheads. The layout uses a force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces. Nodes are draggable via D3’s drag behavior, and hovering highlights a node’s border. Data comes from a local `data.json` file containing node IDs and link relationships. The visualization is rendered as SVG using D3 v6, with all nodes sharing a single group color.

A2Q7P2

This example shows a force-directed network of eight people connected by “Friend with” relationships, with node size and link thickness both fixed regardless of tie strength. Each person appears as a pink circle with a maroon label, and directional arrows on the links indicate the relationship’s direction. The layout is computed using d3.forceSimulation with d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter, while nodes are rendered as SVG circles and can be dragged via d3.drag. Data is loaded from a JSON file containing explicit node and link arrays.

A2Q7

This example displays a family tree as an animated SVG diagram. The data consists of family member names organized into parent-child relationships. Using `d3.stratify` and `d3.tree`, the layout positions nodes by generation, with each generation assigned a distinct fill color. Links animate from parent to child positions via `transition().duration(1500)`, while nodes fade in as circles before labels appear. The code uses D3 v6 to bind data to SVG elements, creating a clear, color-coded hierarchy of three generations.

A2Q6

This map shows the world's countries as tan polygons against a light blue sphere, with hover states that turn the countries brown. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` and `d3.geoPath` to generate the projected SVG paths. Country boundary data comes from the `world-atlas` countries-110m.json file, and the rendering is entirely SVG-based with a CSS-driven hover effect on the `.country` class.

A2Q4

This scatterplot shows the correlation between the average price of a boba drink and the cost of living index for 35 U.S. cities. Interactive tooltips display each city’s name, drink price, and cost index when hovering over a point. The visualization is built with D3 v7 using an SVG canvas, and leverages `d3.scaleLinear` for the axes, `d3.axisLeft` and `d3.axisBottom` for the scales, and `d3.csv` to load the data. Axis labels and a title are drawn with SVG text elements.

A2Q4

This example visualizes the classic Iris dataset with a scatter plot comparing petal length on the x-axis against sepal length on the y-axis. Each point represents a flower sample, colored by species (setosa, versicolor, or virginica) via CSS classes. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to load the data, map values to screen coordinates, and render axes. SVG circles are joined with data using the `join` method, producing a clear taxonomic distribution.

A2Q3

This scatterplot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The SVG rendering uses D3 v5 scales and axes to map each car as a translucent red circle. The code employs `scaleLinear` for both dimensions, `axisLeft` and `axisBottom` for labeled axes, and `csv` to load the data. Axes include gridlines, and a title highlights the comparison.

A2Q2

This visualization uses a stacked bar chart to show the population distribution across countries, broken down by the top five religions. The chart is generated with the Vega-Lite API, using `markBar()`, and encodes country on the x-axis, population on the y-axis, and religion as color. Data is fetched from a CSV file via `d3.csv` from a GitHub gist. The visualization is rendered with `vega.render()` and includes a tooltip for religion details.

A2Q1

This example displays a horizontal bar chart showing population counts for eleven countries, including China, India, and the United States. The chart uses an orange fill for each bar and includes labeled axes for country names and population values. The visualization is built with D3 v6, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes. Data is loaded from a CSV file using `csv`, and each population value is multiplied by 1,000 before being plotted in an SVG.

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across six film genres, with each bar divided into five rating brackets from “below 5.0” to “above 8.5.” The chart uses d3.stack() to compute the stacked segments, d3.scaleLinear and d3.scaleBand for positioning, and d3.scaleOrdinal with a custom color palette for the legend. Hovering over any segment triggers a tooltip displaying the exact percentage for that genre and rating range. Data loads from a local CSV file via d3.csv, and the SVG is rendered with axis labels and a titled legend.

Activity 7 Task 1

A horizontal bar chart displays 2020 population estimates for ten countries, with bars extending rightward from a shared origin. The visualization uses React to render SVG elements, while D3 v5 provides scaleBand for the categorical y-axis, scaleLinear for the quantitative x-axis, and tick formatting via d3.format. The chart loads CSV data from GitHub using d3.csv, and includes blue axis ticks, orange bars, and tooltips showing formatted population values on hover.

Network Graph

This network graph visualizes a social network of ten people, using color-coded nodes and red links to show friendships. Built with D3 v6 and rendered as an SVG, the graph employs `d3.forceSimulation` with link, charge, and collision forces to position nodes. Links are drawn as lines with arrow markers, and data originates from a local `graph.json` file. Users can drag nodes, and hovering highlights them with a black stroke.

Activity 7 Task 5

This visualization displays a bubble chart correlating average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and color distinguishes car brands. The chart includes interactive tooltips on hover, a legend for MPG sizing, and a color-coded brand legend. Rendered as SVG with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.interpolateTurbo`, and `d3.csv` to load data from a local CSV file.

Activity 7 Task 4

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species differentiated by marker shape. The D3 v7 code uses `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to position points and assign shapes, while custom modules `axes.js` and `shapeLegend.js` add labeled axes and a species legend. Data is loaded from a remote CSV and parsed with `csvParse`.

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers on a two-dimensional chart. Each colored circle represents a single iris, with grey, skyblue, and red points distinguishing the setosa, versicolor, and virginica species. The visualization uses D3.js version 6, loading data from a remote CSV file, and leverages D3's scaleLinear for axes, extent for domain calculation, and axisLeft/axisBottom for chart ticks.

Activity 6_5_Histogram_Vizualization

This histogram visualizes the average Body Mass Index (BMI) grouped by age, using a dataset loaded via D3's `csv` import. The chart employs D3 v7 APIs such as `scaleLinear`, `bin`, `axisBottom`, and `axisLeft` to bin the data, compute per-bin averages, and render axes and pink rectangular bars as SVG. The visualization also uses custom `g.selectAll('rect').join('rect')` appending and includes axis labels with rotated text.

Activity6_4_Transforming the Data

This example demonstrates how to transform the Iris flower dataset by computing the average sepal length for each species using D3's `flatRollup` and `sum` functions. The resulting summary is displayed as a JSON-formatted text block via `select`, `data`, and `join`. The visualization loads CSV data with `csvParse`, coerces numeric fields, and uses local ES6 modules alongside D3 v7 loaded from UNPKG.

Activity6 Task4

This example displays the text "Hello VizHub!" centered on a plain background, demonstrating the basic workflow of a VizHub project. It loads D3.js version 5 from a CDN and uses the `select` API to target the `#message` div and set its text content. The page imports a local ES6 module, `myMessage.js`, which exports the displayed string, and applies styling through an external CSS file. The example shows how to combine global library imports, local module imports, and D3 DOM manipulation in a minimal setup.

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length across three flower species distinguished by color. Built with D3.js, the visualization uses SVG circles and a reusable scatterPlot function that cycles through different column combinations on the x-axis every few seconds via setInterval. The code employs d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisBottom/axisLeft for tick marks, while custom labels, a color legend, and a title are appended directly to the SVG.

MuscleCars tree

This interactive visualization presents a hierarchical tree of muscle car models, organized by brand with nodes for Ford, Dodge, and their respective models. Built with D3 v3 and SVG rendering, it uses `d3.layout.tree` to compute the layout and supports zooming and dragging via `d3.behavior.zoom`. The color-coded nodes correspond to hierarchy depth, and clicking a node triggers a collapsible animation with a duration of 800 milliseconds. Data is loaded from a local JSON file.

Activity 8 Country

This example displays a map of India as an SVG graphic. It fetches world country boundaries from a TopoJSON source and uses the `topojson.feature` API to isolate India. The map is rendered with a Mercator projection via `d3.geoMercator` and drawn using `d3.geoPath`. The visualization relies on D3 v5 and the TopoJSON client library.

Activity 8 Map

This example displays a world map using an equirectangular projection, with countries filled in light green and bordered by indigo. It demonstrates how to load geographic data from the World Atlas TopoJSON file and render it as SVG paths using `d3.geoPath` and `d3.geoEquirectangular`. The map supports pan and zoom interactions via `d3.zoom`, and countries change color to maroon on hover through CSS. The code imports D3 modules and the `feature` method from TopoJSON.

Area Chart Activity 8

This area chart displays the cost of sales from 2000 to 2013, with a smooth curve highlighting trends over time. The visualization loads CSV data via d3.csv, parses the year column into Date objects, and uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates. The chart combines a line generator and an area generator, both using d3.curveBasis, with custom axis labels and tick formatting via d3.format.

linechart

This line chart visualizes the cost of sales from 2000 to 2013 using data loaded from a CSV file. The chart renders as an SVG with a light green stroke, employing d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with axis labels added via d3.axisBottom and d3.axisLeft. The line is drawn using d3.line, mapping each year to its corresponding cost value, with red axis labels and a centered title.

Activity8 Task3

This example demonstrates a simple text display that outputs the message “Hello VizHub!” centered on the page. It shows how to load D3.js from a CDN and combine it with local ES6 modules for code organization. The visualization uses D3’s `select` method to target the `#message` div and set its text content, while CSS styles control the font size and alignment. The data source is a static string exported from a separate module, illustrating modular structure within a minimal D3 setup.

Pie Chart

A pie chart displays the count of students from each major at the University of North Texas, using a dataset fetched from a GitHub gist via `d3.csv`. The visualization renders SVG paths with `d3.pie` and `d3.arc` to create slices, while `d3.scaleOrdinal` assigns distinct colors to each major. A legend, positioned to the right, lists each major with its corresponding color and student count, formatted in thousands with a custom tick format.

Assignment1

This example demonstrates loading a CSV file and displaying its first ten rows as JSON in the browser. It uses D3 v5 via UNPKG to fetch data with the `csv` function and to append formatted text to the DOM with `select` and `append`. The rendered SVG displays a fixed background image embedded as a data URL in the HTML.

Jun 30, 2023

Activity 6

This example uses D3 to load a CSV dataset from a GitHub gist, displays the first 10 rows as JSON in a `<pre>` element, and includes an ES6 module exporting a greeting message. The SVG background contains an embedded base64-encoded image, and the page uses plain HTML styling along with D3’s `select`, `csv`, and `csvFormat` functions.

Jun 14, 2023