nishwitha.1032@gmail.com

activity7_question2

This stacked area chart shows the distribution of IMDb rating levels across movie genres, with each genre’s ratings stacked to total 100%. The visualization uses d3.stack() to compose the data, d3.area() with curveBasis for smooth paths, and d3.scaleBand and d3.scaleLinear for axes. A legend and axis labels clarify the rating categories. The data is loaded via d3.csv from a GitHub-hosted CSV file, and the SVG rendering uses color-coded areas to compare genre-specific rating proportions.

Nov 5, 2024

Fork of Fork of Task 9 question2

This stacked bar chart displays the percentage distribution of IMDb movie ratings across six genres, revealing that documentaries have the highest share of high ratings (above 8.5), while action films concentrate in the lowest rating band. Each bar segment represents a rating category, with the full bar summing to 100%. The visualization uses D3 v7 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG plot, with a legend and axis labels. Data comes from a local CSV file containing genre and rating proportions.

Nov 5, 2024

activity7_question2

This stacked area chart visualizes the distribution of sepal width, petal length, and petal width across different sepal length values, using the classic Iris dataset. The chart shows how these three flower measurements contribute proportionally to the total across the range of sepal lengths, with color-coded categories shown in a legend. The visualization is built with D3.js (v7) and renders as an SVG, using `d3.stack()` for the stacked data, `d3.area()` for the area path generation, and `d3.scaleOrdinal()` for color mapping. The code reads data from a local CSV file and includes custom styling with fonts from Google Fonts.

Nov 3, 2024

activity7_question2

This stacked bar chart shows the percentage of each rating level across different movie genres, with hover interactions revealing exact percentages in tooltips. The visualization uses D3.js v7, rendering SVG elements with the `d3.stack()` function to create stacked bars, `d3.scaleBand()` for the x-axis, and `d3.scaleLinear()` for percentages. A color ordinal scale distinguishes rating levels, while axes and a legend are drawn using `d3.axisBottom()`. Data is loaded from a CSV file using `d3.csv()`, though the source contains iris measurements rather than movie ratings.

Nov 2, 2024

activity7_question1

This example visualizes the distribution of car horsepower across ten manufacturers using a pie chart, with each slice representing a manufacturer and its size corresponding to the car's horsepower value. The visualization is built with React and D3 version 5, using the `pie` API to compute slice angles, `arc` to generate the donut-shaped paths, and `d3.selectAll` for SVG element creation. Data is loaded from a remote CSV via `d3.csv`, and percentage labels and a legend are rendered using D3's `format` and `schemeCategory10` color palette. All marks and text are rendered as SVG elements within a React component.

activity7_question1

This example shows the distribution of highway MPG percentages across car brands using a pie chart, with each brand's name and percentage labeled directly on its corresponding slice. It loads CSV data from a GitHub repository, parses the numeric fields, and generates the pie layout with d3.pie() while rendering arcs via d3.arc() on an SVG canvas. React components define the axes and marks for an additional bar chart, though the main visualization uses D3’s scaleOrdinal for categorical colors and joins data to path and text elements. The chart is titled and styled using inline SVG attributes and CSS classes.

tutorial

This example shows the distribution of highway fuel efficiency across car brands as a pie chart. Each slice is labeled with the brand name and its corresponding percentage of highway MPG. The visualization loads CSV data from a GitHub repository and uses D3’s `pie` and `arc` generators to create the slices, with `scaleOrdinal` assigning colors per brand. Labels are positioned using `arcGenerator.centroid`, and the SVG is centered within the viewport.

activity7_question1

This pie chart visualizes the distribution of Iris flower species (setosa, versicolor, and virginica) within the classic Iris dataset, using color-coded slices and labels that display each species name and count. The visualization is rendered as an SVG using D3.js, loading data from a CSV file hosted on GitHub. The code constructs the pie layout using `d3.pie()` and `d3.arc()`, applies a categorical color scale via `d3.scaleOrdinal()`, and positions text labels at each slice’s centroid.

activity6_question4

This bubble chart visualizes the distribution of movie ratings across six genres using CSV data. The x-axis maps the proportion of ratings below 5.0 while the y-axis maps ratings above 8.5, with circle size representing the 6.5–7.5 rating range. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and includes interactive tooltips on mouseover. A legend and reference circles are rendered alongside the animated SVG, with genre labels positioned to the right of the plot area.

Oct 25, 2024

activity6_question3

This scatter plot visualizes car performance metrics by showing horsepower, torque, and highway MPG values for different car makes along a single quantitative axis. Each metric is color-coded using d3.scaleOrdinal with a Category 10 palette, and the categorical y-axis uses d3.scaleBand. The visualization reads data from a remote CSV file using d3.csv, renders circles with d3.select and join, and includes custom axes, labels, and a legend. The SVG output is generated using D3 v6.

activity6_question2.1

This stacked bar chart displays car specifications—horsepower, torque, and highway mpg—for manufacturers like Scion, Kia, and Ferrari. Each horizontal bar uses segments scaled by value, with a legend mapping colors to specifications. The visualization is built with D3 v7, using d3.stack() to aggregate data and d3.scaleOrdinal() for colors. Hovering over segments dims them and a tooltip shows exact values. Data comes from the included data.csv file and renders as SVG.

activity6_tutorial4

This example visualizes the relationship between average horsepower, torque, and highway MPG for various car makes. The D3.js code loads data from a CSV file and renders it as an animated bubble chart, where each bubble’s position represents horsepower (x-axis) and torque (y-axis), while its size and color encode highway MPG. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo, with interactive tooltips triggered by mouse events and a legend displaying both MPG ranges and color-coded car brands.

activity6_question3

This example demonstrates the "Hello World" of the VizHub Version 3 runtime environment, showing how a simple text output is created and rendered. It highlights the new development workflow, where a `main` function in `index.js` manipulates a provided `container` element, replacing the traditional `index.html` entry point. The example showcases continuous hot reloading and interactive widgets, allowing properties like `fontSize` to be adjusted live by Alt-dragging the number in the code editor. The core logic uses simple DOM manipulation via `container.innerHTML` to display text, emphasizing the streamlined, code-first approach of VizHub V3.

activity6_tutorial3.2

This example visualizes the Iris dataset as a scatter plot using D3 v7, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. The visualization loads data from a remote CSV file using `csvParse`, renders axes with `axisLeft` and `axisBottom`, and includes a custom shape legend with `symbol` and `symbolsFill`. The scatter plot is drawn with `path.mark` elements using a `scaleLinear` for axes and `scaleOrdinal` for species shapes, with the entire chart rendered in a full-window SVG.

activity6_tutorial3

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Each of the 150 data points is colored by species (setosa, versicolor, or virginica), and the point size encodes sepal length and width. The visualization uses D3 version 6, loading data from a GitHub-hosted CSV file via the `d3.csv` function. Scales are created with `scaleLinear`, axes are generated using `axisLeft` and `axisBottom`, and data points are rendered as SVG circles.

activity6_tutorial3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by shape according to species. A custom legend shows the shape-to-species mapping. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate the point glyphs, while `axisLeft` and `axisBottom` render the axes. Data is loaded asynchronously via `fetch` from a GitHub-hosted CSV file and parsed with `csvParse`.

Activity6_tutorial2

A horizontal stacked bar chart displays the distribution of IMDb movie ratings across six genres, with proportions for five rating brackets from below 5.0 to above 8.5. Built with D3.js (v7), the visualization uses `d3.stack()` for cumulative bar construction, `d3.scaleOrdinal()` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for axes. Interactive tooltips on mouseover reveal precise percentage values for each genre-rating segment.

Activty6_question1.2

This example displays a horizontal bar chart of the 2010 population for 20 countries. The visualization uses a React front end with D3 v5 modules, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population and country data are loaded from a remote CSV via `csv`, and the bars are rendered as SVG `<rect>` elements, with tooltips showing the population values.

activity6_question1

A horizontal bar chart displays the populations of ten countries in the year 2000, sourced from a CSV file and rendered as SVG rectangles with React. D3’s `scaleBand` and `scaleLinear` position bars, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels using `d3.format`. A title tooltip appears on each bar via an HTML `<title>` element, and the chart applies a green fill with blue axis lines.

Activity6_tutorial

This bar chart displays the 2020 population estimates for 30 countries, sorted by country name. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes built from custom `AxisBottom` and `AxisLeft` components. Population values are loaded from a remote CSV and formatted with a SI prefix, replacing ‘G’ with ‘B’ for billions. Tooltips reveal exact values via SVG `<title>` elements.

Activity6_question2

This example demonstrates a minimal D3.js application that loads a text message into a webpage. It shows how to import both the `select` function from the D3 library and a local ES6 module, then uses `select('#message').text(message)` to replace the content of a div element with a hardcoded string. The code also includes examples of unused syntax like a regular expression and a constant variable. The rendering approach uses plain HTML and CSS for styling, with no external data sources.

Activity 6

This example demonstrates a minimal setup for a VizHub visualization using D3.js v5 and ES6 modules. It loads D3 from a CDN via UNPKG, then uses `select` from the `d3` import to target a `div` with `#message` and set its text content from a local ES6 module. A static message, "Hello VizHub!", is styled with CSS. The code also includes unused variables and a regex, but no dynamic data or rendering is performed.

6 buddhas

A background image of green flowers serves as the canvas for six overlapping Buddha figures, each drawn as a detailed SVG path. The Buddhas are rendered in React, with the path data defined as a long string and transformed via `<g transform="translate(...) scale(...)">`. The background image is repeated through nested `Array.map` calls, and the SVG uses the `href` attribute to load the external image.

Oct 19, 2024

5 buddhas

Five overlapping Buddhas emit a dense field of randomly placed, semi-transparent circles across a black background. The composition layers abstract, hand-drawn SVG path data for each Buddha figure, scaled and translated into a grid-like arrangement. Using React with ReactDOM, the code generates the circle scatter via nested array maps, calculating positions and fill colors with `Math.random()`. The path data is rendered directly as SVG `<path>` elements, producing a vibrant, chaotic mandala-like visualization that blends structured iconography with generative noise.

Fork of 5 buddhas

A generative SVG visualization renders hundreds of randomly positioned, rotated polygons atop a static Buddha path, creating a layered, overlapping composition with vibrant RGB fills. The React app maps over a 21-element array to produce nested polygon clusters, while the embedded path data traces the Buddha figure. Using React 16.10 and ReactDOM, the code applies random coordinates, rotations, and color values, with a black background and no interactivity.

Fork of 5 buddhas

5 buddhas

The visualization depicts a cluster of five abstract Buddha-like figures, constructed from layered, semi-transparent SVG polygons that overlap and interweave. A dense field of small, randomly generated polygons fills the background, creating a textured, chaotic mosaic. The figures themselves are rendered using detailed SVG path data generated through React, with each polygon’s position, color, opacity, and rotation determined by random values. The code relies on React and ReactDOM to build the SVG output, with colors specified as RGB values from randomized calculations.