KeerthiAnnem

Assignment 2_Activity-7 (2)

This social network graph visualizes friendships among eight individuals, with nodes representing people and directed links indicating friendship connections. The graph uses a physics-based layout where nodes repel each other while links maintain a fixed distance, creating an organized spatial arrangement. Users can drag nodes to explore the network structure, and hovering over a node highlights it with a green border. Built with D3 v6, the visualization employs `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, with arrow markers indicating link direction. Data comes from an external JSON file, rendered as SVG with interactive drag and hover behaviors.

Jul 22, 2023

Activity 2_Ques 7 (Tree)

This interactive tree diagram organizes Korean dramas into hierarchical categories, beginning with a root node for “Korean dramas” that branches into action and school genres, then to specific titles like *Vagabond* or *School 2017*, and finally to leading actors. The visualization uses D3.js’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw connecting links, with animated transitions of 1000 milliseconds as nodes expand from their parent’s position. The SVG rendering applies color-coded fills per hierarchy level (black root, blue categories, red titles, green actors) and relies on `node.enter()` and `transition()` for smooth appearance and movement. Data is hardcoded in the `Aboutkoreandrama` array, with a `README.md` source reference and styling from `styles.css`.

Assignment 2_task 6(ii)

This example displays a single-path SVG map of Canada, rendered using a Mercator projection fitted to the country’s boundaries. The code loads world country geometries from the world-atlas TopoJSON file, filters for Canada via `topojson.feature`, and projects it with `d3.geoMercator` and `d3.geoPath`. The resulting vector shape is appended to an SVG element with no additional styling or interactivity.

Assignment 2_Task 5

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Users select which columns map to the X and Y axes via dropdown menus, allowing them to compare variables like miles per gallon, displacement, and weight. The visualization uses d3.scaleLinear for axis scaling, d3.axisLeft and d3.axisBottom for tick marks, and SVG circles with transitions that animate from the center to their positions over two seconds. Axis labels update dynamically based on user selections.

Assignment 2_Task 3(scatter plot)

This scatter plot shows the relationship between penguin flipper length and body mass, with each point colored by species (Adelie, Gentoo, and other, rendered as red). The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file fetched via `d3.csv`, and renders circles as SVG elements. The code calculates x and y positions from the raw numeric fields and applies a custom color function per species, with axes and labels styled via CSS and SVG text elements.

Activity 5_task 6(1)

This visualization displays a map of South Korea using a Mercator projection. The code loads world country geometries from a TopoJSON file, extracts the South Korea feature, and renders it as an SVG path. It uses `d3.geoMercator` and `d3.geoPath` to project and draw the map, with the data sourced from the `world-atlas` package. The resulting visualization shows just the country outline, fitted to the 960x500 pixel canvas.

Activity 2_Task 6

This interactive map visualizes the countries of the world on an equirectangular projection, rendering landmasses in limegreen over an aqua ocean. Using D3 v5 and TopoJSON, the code loads country boundaries from the world-atlas dataset and draws them as SVG paths via `d3.geoPath`. The map supports zooming and panning through `d3.zoom`, and hovering over any country turns it crimson. The styling is defined in external CSS, while the map updates dynamically in response to user interaction.

Assignment 2_Task 1 (Bar chart)

This horizontal bar chart displays the cosmetic industry revenue across ten countries, with the United States leading in spending on beauty products and Russia trailing. The bars are sorted in descending order, with each bar’s length proportional to the spending value. The chart is rendered as an SVG using D3 v7, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file, and axes are generated with `axisBottom` and `axisLeft`.

Assignment 2_Task 4

This bubble chart shows the correlation between a car's make cost, selling price, and profit percentage across fourteen brands. Each circle’s position maps cost and selling price, while its radius encodes profit percentage and its color identifies the brand. Built with D3 v7, the visualization loads data from a CSV file, uses `d3.scaleLinear` for axes and bubble sizing, and renders as an SVG with an interactive tooltip that displays the brand name. A legend decodes both the color categories and bubble size scale.

Assignment 2 _Task2

A stacked bar chart visualizes the distribution of ratings across six Korean TV shows, with each bar divided into five percentage categories. The chart uses D3 v7 to load CSV data, stack the categories with `d3.stack`, and render SVG rectangles scaled by `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Hovering over a segment triggers a tooltip showing the exact percentage. The data is sourced from `data.csv`, with colors assigned via `d3.scaleOrdinal`.

Jul 20, 2023

....................

This horizontal bar chart visualizes the top 10 countries by beauty product spending from a 2018 United Nations population estimate, highlighting the cosmetic industry's revenue. The D3 v5 code uses `scaleLinear` and `scaleBand` to map spending values and country names, with `axisLeft` and `axisBottom` for customized axes. The bars are rendered as SVG rectangles, colored steelblue via CSS, and a `format('.3s')` tick label transforms numbers into readable units. Data is loaded from a CSV file, and the chart title and axis label are added as SVG text elements.

Jul 16, 2023

Activity 7_Task 3

This scatter plot displays the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species distinguished by different symbol shapes. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `axisLeft`, and `axisBottom` to render marks, axes, and a custom shape legend. Data is loaded asynchronously via `fetch` and parsed with `csvParse` from a remote CSV file. The chart updates responsively to the browser window dimensions.

Activity 7_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes engine performance values, while its size represents fuel efficiency. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `interpolateTurbo` for color mapping, along with SVG rendering and hover tooltips. Data from `bubblechart.csv` is loaded via `d3.csv`, and the chart includes axes, circle legend for MPG, and categorical color legend.

activity 8_task 1

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three species color-coded as skyblue, lightgreen, and orange. The chart cycles through different x-axis dimensions every few seconds using setInterval, updating both axes and data points. Built with D3 v6, the visualization uses scaleLinear for axis scaling, axisBottom and axisLeft for tick rendering, and a reusable scatterPlot function that accepts configurable width, height, data, and margin parameters. SVG circles represent individual flowers, with a legend and axis labels styled via CSS.

Activity 8_Task6(graph)

This interactive network graph, built with D3.js (v6) and rendered as SVG, visualizes a social network of friends. Nodes represent people, and lines indicate "Friend with" relationships. The graph is constructed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position the nodes. Users can drag nodes, while hovering highlights them. The data is loaded from a JSON file, with line thickness reflecting relationship strength.

Assignment 8_Task 2

A pie chart displays the count of students from each major at UNT, with proportional slices labeled in thousands and a legend mapping colors to majors. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.format` to generate SVG paths and text. Data is loaded asynchronously from a CSV hosted on GitHub Gist via `d3.csv`, and the chart renders with custom tick formatting and color-coded legend entries.

Activity 8_task 4

This area chart displays the cost of sales from 2000 to 2013, with the x-axis representing years and the y-axis showing cost values. The visualization uses D3 v5 to create a smooth curved line and filled area beneath it, employing `d3.line`, `d3.area`, and `curveBasis` for the path generation. The chart includes labeled axes with tick marks, and the data is loaded from a CSV file hosted on GitHub. The SVG rendering uses `scaleTime` and `scaleLinear` to map data points to coordinates.

Fork of Activity 8 _Task 6

This interactive visualization displays a hierarchical tree of muscle car makes and models, showing the relationships between manufacturers like Ford and Dodge and their respective vehicles. The data is loaded from a JSON file and rendered using d3.v3’s tree layout, with SVG rectangles and animated transitions on click. The code also implements zooming and drag behavior via `d3.behavior.zoom`, while colored nodes and tooltips are styled through CSS classes. The visualization uses the `treeBoxes` function to manage the tree layout, collision detection, and node updates.

Activity 8 _Task 6

This interactive visualization displays a hierarchical tree of muscle car manufacturers and their models, using data loaded from a JSON file. Built with D3.js v3, it renders nodes as colored rectangles connected by links, with each node colored by its depth in the hierarchy. The tree layout positions nodes vertically, and users can click nodes to expand or collapse children, with animated transitions. The visualization includes zoom and drag capabilities via `d3.behavior.zoom`, and uses SVG elements with tooltips for additional information display.

Activity 8_Task 5

This interactive world map visualization uses a D3.js geo projection to render countries from a TopoJSON dataset. The map is drawn as SVG paths using the `d3.geoEquirectangular` projection and `d3.geoPath`, with pan and zoom enabled through the `d3.zoom` API. Countries appear in light green with indigo borders, and hovering changes their fill to maroon. The background sphere is filled with sky blue, and the map loads geographic boundary data from the world-atlas package.

Activity 8_Task 3

This example visualizes the annual cost of sales from 2000 to 2013 using a line chart rendered as an SVG. The chart loads data from a CSV file and uses D3 v7’s `d3.scaleBand` for the year axis and `d3.scaleLinear` for the cost axis, with the line drawn via `d3.line`. It includes labeled axes and a red title. The code demonstrates importing D3 from UNPKG and local ES6 modules, with styling applied through embedded CSS.

Activity 7_Task3

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with circles colored by species (red, light green, and orange). It uses d3.csv to load the data from a GitHub gist, then applies d3.scaleLinear and d3.extent to establish the scales, rendering circles as SVG elements with d3.axisLeft and d3.axisBottom for the axes. The code also encodes sepal length and width as attributes, though they do not affect positioning or radius.

Jul 8, 2023

Activity7_Task2

This stacked bar chart visualizes the distribution of movie ratings across six genres, with each genre’s bar segmented into five rating categories from “below 5.0” to “above 8.5.” Hovering over a segment reveals the exact percentage for that rating level within the genre. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked series, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for the categorical y-axis. Data is loaded from a CSV file, and the chart is rendered as SVG with interactive tooltips.

Jul 5, 2023

Assignment - 1

This example demonstrates the loading and display of a CSV dataset within a VizHub project, presenting the first ten rows as formatted text on a black background. The code imports `select`, `csv`, and `csvFormat` from D3 v5 to fetch and process the data, while a static SVG containing a base64-encoded JPEG image serves as a background. The implementation also includes ES6 module imports, showcasing modular code organization alongside D3’s charting capabilities.

Jun 29, 2023

BMI by Age

This visualization shows the average Body Mass Index by age, with data binned into age groups and rendered as violet rectangles. D3 v7 is used to compute the scales, bin the data, and generate axes and labels. The chart is drawn as an SVG using the `bin` and `sum` functions from the D3 library, with data sourced from the CDC dataset.

Jun 14, 2023

Activity 6

This example loads a CSV file from a GitHub gist and displays the first ten rows as formatted JSON in a black, aqua-colored `<pre>` block. The code uses `d3.csv` to fetch and parse the data, `csvFormat` to calculate its size, and D3 selections to append elements to the body. The page also includes an embedded SVG image and a separate ES6 module exporting a greeting message. It runs in a Vue project with D3 v5 loaded via UNPKG, demonstrating local module imports and SVG rendering.

Jun 14, 2023

Transforming Data

This example demonstrates transforming the classic Iris dataset by computing the average sepal length for each species. The visualization renders a JSON summary of the aggregated results as text. It loads data from a CSV file using `d3.csvParse` and leverages `d3.flatRollup` with `d3.sum` to calculate the averages. Data loading is managed through a state-based render loop, highlighting VizHub's reusable ES6 module pattern with `import` statements from D3 v7.

Jun 14, 2023