Bhavana Sharma

Fork of Assignment2 question 2

This example visualizes monthly sales data as a filled area chart, with the area rendered in translucent steelblue. It fetches CSV data from a GitHub Gist and maps months to the x-axis using `d3.scaleBand` and sales values to the y-axis with `d3.scaleLinear`. The chart is drawn in SVG using the `d3.area` generator, with axes and labels added via `d3.axisBottom` and `d3.axisLeft`. Data parsing is handled by `d3.csvParse`, and the visualization is built entirely with D3 v7.

Apr 12, 2024

Assignment2 question 2

This example shows a monthly sales trend as a filled area chart, with twelve data points from January through December. The visualization uses D3 v7 to render the chart as SVG, employing `d3.scaleBand` for the month axis, `d3.scaleLinear` for the sales axis, and `d3.area` to generate the semi-transparent steel-blue area path. The chart includes labeled axes for both months and sales values. The sample dataset is hardcoded in the script, and the rendering is handled entirely through D3’s SVG manipulation.

Apr 10, 2024

question1

This example presents a pie chart of sector percentage data loaded from a remote CSV file, rendered as SVG using D3.js v7 via the UNPKG CDN. It shows how to fetch and parse CSV data with the Fetch API and `d3.csvParse`, then visualize it using `d3.pie()` and `d3.arc()`. A categorical color scale from `d3.schemeCategory10` fills each slice, and a legend with rectangles and text labels displays the sector names and percentage values.

Apr 9, 2024

Assignment 2 question1

This example displays a pie chart of three sample categories with proportional slices, a legend, and axis labels. It renders as SVG using D3 v7, loading the library from UNPKG. The code uses `d3.pie()` for data layout, `d3.arc()` for path generation, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and appends slices, legends, and labels via D3’s data join methods (`selectAll`, `enter`, `append`). The chart is built dynamically from static, hardcoded data.

Apr 9, 2024

Assignment 2 task1

This interactive visualization displays the Iris dataset through a dynamic scatter plot, cycling through different feature pairs on the x-axis every few seconds. The code uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the plot, while circles are colored by species (setosa, versicolor, virginica) via a custom marker function. The animation leverages `setInterval` to update the x-axis mapping, with axes, labels, and a legend re-rendered through `selection.call`. Data loads from a CSV URL using D3’s `csv` parser, and the SVG graphic updates in place.

Apr 9, 2024

Activity 6 ques4

This bubble chart visualizes the correlation between a motorcycle's average engine power, torque, and fuel consumption for a variety of brands. Each circle’s position encodes its power and torque along the x and y axes, while its size represents fuel consumption, and its color identifies the brand. The visualization uses D3.js to render the SVG, scale the data, and add interactive tooltips that display the brand on hover. A legend clarifies the size mapping, and a custom color scale based on `d3.interpolateTurbo` differentiates the manufacturers.

Fork of Activity 6 ques4

This bubble chart visualizes the correlation between engine power, torque, and fuel consumption across motorcycle brands using D3.js v7. Each circle’s x-position represents average engine power, its y-position average torque, and its radius encodes fuel consumption, while color distinguishes brand. The chart includes interactive tooltips on mouseover, a bubble-size legend, and a categorical color legend. Data is loaded from a CSV file, and the visualization renders as an SVG with linear scales and ordinal color mapping.

Act 6 task1

A horizontal bar chart displays 2020 population estimates for 30 countries, sorted by country name, with green bars and blue tick marks. The visualization uses React with D3 v5 scales (`scaleBand`, `scaleLinear`) to map country names to y-axis positions and population values to bar widths, rendering SVG rectangles via a custom `Marks` component. Data loads asynchronously from a GitHub-hosted CSV file using `d3.csv`, and axis labels are formatted with D3's `format` function to abbreviate large numbers.

ACT6 TASK1

This example demonstrates a minimal "Hello, VizHub!" message displayed on a web page using D3.js v5. It shows how to import D3 functions like `select` from the library via UNPKG and leverage them to set the text content of an HTML element. The visualization also showcases the use of local ES6 modules, importing a `message` string from a separate file. The rendered output is a large, centered text message styled through a CSS file.

ACTIVITY 6 QUES 3

This scatter plot visualizes watch measurements from the Watches_new dataset, mapping strap length on the x-axis and strap width on the y-axis. Circles are colored by watch type (Analog, Smartwatch, or default) using a switch statement, while case width and case thickness are encoded via the rx and ry attributes, producing elliptical marks. The visualization is rendered as SVG using D3 v6, loading data via d3.csv from a GitHub raw URL, with scales from d3.scaleLinear, axes from d3.axisLeft and d3.axisBottom, and extents from d3.extent. It demonstrates local ES6 module imports and dynamic window sizing.

Act4 task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across car makes. Each circle represents a car brand, with x-position indicating horsepower, y-position torque, and circle size scaled to MPG values. The visualization uses D3 v7 to load CSV data, render SVG elements, and implement brushing and zooming. Interactive tooltips display the car make on hover, while legend circles indicate MPG size scaling and colored dots distinguish each brand.

ACT 6 TASK3.2

This scatter plot example uses D3 v7 to visualize data points with various shapes, mapping an additional categorical dimension through shape encoding. The visualization implements a custom axes module with axis labels, and a shape legend that displays the mapping between categorical values and symbol types. The code demonstrates importing specialized modules from local ES6 files and uses D3's scales, including `scaleLinear` and `scaleOrdinal`, along with `symbol()` from the `d3` namespace to generate the shapes for each data point.

ACTIVITY6 TASK3

This scatter plot visualizes the Iris dataset, mapping petal length and width as the x and y coordinates. Each point is colored by species (setosa, versicolor, or virginica) and uses an SVG circle with additional radius attributes derived from sepal measurements. The code loads CSV data via `d3.csv`, scales axes with `d3.scaleLinear`, and renders marks using D3's `select` and `join` operations. Axis labels are added manually, and the chart fills the browser window.

Apr 4, 2024

Fork of Acitivity6 ques 2

This example presents a stacked horizontal bar chart showing population percentages for multiple countries from 1950 to 1955. The visualization loads data from a CSV file and uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` with a custom color palette to layer yearly values per country. SVG rendering with `d3.axisBottom` and `d3.axisLeft` displays axes, while interactive tooltips appear on mouseover to reveal exact percentage values, using `d3.select` and event handlers to update a positioned div.

Acitivity6 ques 2

This example visualizes population data for several countries across the years 1950-1955 using a stacked bar chart. The chart displays population counts on the x-axis and countries on the y-axis, with each bar segment representing a different year. Built with D3 v7 and rendered as SVG, it uses `d3.stack()` to compute the stacked series, `d3.scaleOrdinal` for color encoding, and includes interactive tooltips that display the population percentage for each year segment on mouseover. The data originates from a CSV file loaded locally.

Activity6 task2

This example visualizes IMDb movie ratings across six genres using a horizontal stacked bar chart, with each bar divided into five rating brackets from below 5.0 to above 8.5. The chart is rendered as an SVG using D3 v7, loading the data from a CSV file and employing `d3.stack` for the stacked layout, `d3.scaleBand` for the genre axis, and `d3.scaleOrdinal` for color mapping. Interactive tooltips display the exact percentage for each rating segment on hover.

Fork of ACTIVITY6 QUES 1 (PART2)

A horizontal bar chart displays the populations of 20 countries for 2010, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, while D3 v5’s `scaleBand` and `scaleLinear` handle axis positioning, and `d3.csv` loads the dataset from a GitHub repository. Bars appear in light green, with blue tick lines and formatted population labels using `d3.format`.

Fork of Activity 6 question1(part1)

This bar chart visualizes the population of ten countries for the year 2000, sourced from a CSV file. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for axes, while `format` converts tick labels to abbreviated numbers. Each bar includes a SVG `<title>` tooltip, and the visualization is rendered as an SVG. Horizontal bars are sorted by country, showing population with a green fill.

ACTIVITY6 QUES 1 (PART2)

This example displays a horizontal bar chart of 2010 population data for 20 countries, rendered as an SVG using React components. It uses D3 v5 modules including `scaleBand`, `scaleLinear`, `max`, and `format` to process the CSV data loaded from a remote GitHub URL via `csv`. The chart includes custom `AxisBottom` and `AxisLeft` components, with blue tick lines and green bars. Population values are formatted using `format('.2s')` and converted from gigabytes to billions for the x-axis labels.

Activity 6 task 1

This example displays a horizontal bar chart ranking the populations of ten countries for the year 2000. The visualization uses React to render SVG elements, with D3 v5 APIs including `scaleBand`, `scaleLinear`, `csv`, and `format` to load data, position bars, and format tick labels. Country names align on the left axis while population values appear on the bottom axis, and each bar includes a native SVG tooltip showing the formatted population value.

Fork of QUESTION3

A React and SVG visualization renders a flower image repeated across a grid, overlaid with a violet, Buddha-like path shape. The code uses React's `map` function to generate multiple nested `<image>` elements from an array, while a complex `<path>` with a defined `d` attribute draws the central figure. The background and repeated images come from an external flower photograph, and the rendered output is displayed in a full-screen SVG canvas.

QUESTION3

The visualization displays clusters of colorful, rotated polygons layered over a flower background image. Built with React and rendered as SVG, the code generates 21 nested polygon elements whose coordinates, fill colors, and rotation angles are determined by random mathematical expressions derived from an array of indices. The SVG also includes an embedded image of flowers and a complex path element with many bezier curve commands. The example demonstrates how React components can dynamically create and position SVG shapes with randomized styling.

Apr 2, 2024

Fork of 5 budhas

This visualization displays a dense, colorful arrangement of rotated polygon shapes generated from a three-level nested loop, overlaid on a background image of flowers. Using React and ReactDOM, the code maps an array of numbers to produce hundreds of semi-transparent squares with random positions, colors, and rotations, rendered as SVG polygons. The polygons’ coordinates and fill values are calculated with `Math.random()`, while a separate SVG image element imports the flower photo as the backdrop. The project uses React's declarative JSX syntax to build the SVG structure, with no external data sources beyond the embedded image URL.

Apr 2, 2024