tejaswiteju9811@gmail.com

Activity 7.1.2

This area chart visualizes the relationship between age and weight, plotting individual data points as a filled pink area. The visualization loads a CSV file from GitHub and sorts the data by age. It uses D3.js v7 with `d3.csvParse` and `d3.extent` for scale domains, then draws the area with the `d3.area` generator. The SVG includes labeled axes for age and weight, plus a title.

Nov 4, 2024

Activity7-Q1

This example displays the Iris dataset as a pie chart, with each slice representing a species type and its corresponding sepal length value. The visualization uses D3.js version 7 to fetch the CSV data from a GitHub repository, calculate the pie arc segments with `d3.pie`, and render the chart as SVG paths. A legend with color-coded rectangles and text labels is positioned on the right side, and all text elements are styled through CSS classes defined in the accompanying stylesheet.

Nov 1, 2024

Activity6_task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes using a CSV dataset. Each bubble’s position encodes horsepower and torque on the axes, while its radius represents highway MPG and its color identifies the manufacturer. The D3 implementation uses `d3.csv` to load data, `scaleLinear` for axes and bubble sizing, and `scaleOrdinal` with `interpolateTurbo` for color mapping. Animated tooltips appear on mouseover, and a legend displays the MPG scale and color-coded makes.

Activity6_task4- Tej

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car make, respectively. Using d3.v7 and SVG, the chart includes interactive tooltips on mouseover, a legend for MPG values, and a color-coded make legend. The data is loaded from a CSV file, and axes, scales, and legends are rendered programmatically with D3’s standard API.

Activity6_task 4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes, using bubble size to represent fuel efficiency and color to distinguish manufacturers. It uses D3.js (v7) with SVG rendering and enables interactive exploration through hover tooltips. The chart employs `d3.scaleLinear` for axes and bubble scaling, `d3.scaleOrdinal` for color mapping, and D3's `.join()` operator for element creation. Data is loaded from a CSV file, and the visualization includes a legend for both bubble size and categorical color coding.

Activity6_task4

A bubble chart visualizes the correlation between average torque, horsepower, and highway MPG across 31 car makes, with circle size encoding MPG and color distinguishing brands. The visualization includes a tooltip on hover and legends for bubble size and categorical colors. Built with D3 v7, it uses SVG rendering, `d3.scaleOrdinal` for color mapping, and `d3.scaleLinear` for axes and bubble radius, reading data from a CSV file.

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position encoding horsepower and torque while its radius and color represent MPG and make. Hovering reveals a tooltip with the make name. The visualization uses D3 v7 to append SVG elements, scaleLinear for axes and bubble size, scaleOrdinal for color, and transition-based tooltip interactions, reading data from a CSV file. A legend displays MPG values and color-coded makes.

Activity6_Task4

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each vehicle brand represented by a colored circle positioned by horsepower and torque while its size encodes fuel efficiency. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleOrdinal` with `d3.interpolateTurbo` for color assignment, `d3.scaleLinear` for positional and size scales, and interactive tooltips triggered by mouse events. Data comes from a CSV file containing per-make averages, and the chart includes dual legends for bubble size and make-color mapping. Animation is not present despite the metadata listing.

Activity6_Task3.2

This interactive scatter plot uses the D3.js library (v7) to visualize the classic Iris dataset, fetched from a remote TSV file. The visualization maps sepal length to the x-axis and petal length to the y-axis, with the iris species encoded using different shapes via `d3.symbol` and a shape legend. It employs D3's `scaleLinear` and `scaleOrdinal` for scaling, and utilizes `d3.axisLeft` and `d3.axisBottom` to render the axes with labels.

Question4

A bubble chart displays the Iris dataset, showing petal length through bubble size and species through color, with sepal length and width on the x and y axes. Hovering over a circle reveals a tooltip with species and petal length. The visualization uses D3.js v7 with SVG rendering, `d3.scaleLinear` and `d3.scaleOrdinal` for mapping, and animated transitions for the tooltip. A legend distinguishes the three Iris species, and the chart includes axis labels and a title.

Question3

This scatter plot visualizes the Iris dataset, plotting horsepower against highway MPG. Each point is colored by the vehicle's make, using a categorical color scheme to distinguish groups. The visualization is built with D3 v6, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeTableau10` for colors, and `axisBottom`/`axisLeft` for ticks. Data is loaded from a remote CSV file, and the SVG output includes a legend, axis labels, and a red title.

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, positioning each flower sample based on its petal length and width, with colors indicating the three species (setosa, versicolor, and virginica). The visualization uses D3 v6 APIs including `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG chart. Data is loaded asynchronously from a remote CSV file stored on GitHub, with numeric fields parsed from string values. Points are drawn as circles with fixed radius, while the chart includes labeled axes rotated for readability and a capitalized red title.

Activity6_task4

Question4

This visualization displays the correlation between horsepower, torque, and highway MPG for different vehicle makes, using a bubble chart where the x-axis shows average horsepower, the y-axis shows average torque, and bubble size represents highway MPG. Each car make is colored using a distinct color from the `d3.interpolateTurbo` scale, and hovering over a bubble reveals the make via a tooltip. The chart includes a legend for the MPG bubble sizes and a color-coded key for the makes. It is built with D3.js v7, reading data from a CSV file and rendering as an SVG with interactive animations.

Question3

This visualization is a scatter plot of the Iris flower dataset, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species. It uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to position points and assign shapes, while the `axisLeft` and `axisBottom` functions render labeled axes. A custom shape legend, built with `shapeLegend` and D3's `symbol` generator, identifies each species. The plot is rendered in a full-window SVG, with data loaded via `csvParse` from an external source.

Question2

This example displays a horizontal stacked bar chart that breaks down the percentage of horsepower, torque, and highway MPG values for various car makes, using a dataset loaded from a CSV file. The chart encodes each metric as a colored segment within each bar, allowing for quick comparison across the different manufacturers. Implemented with D3 v7, the visualization uses the `d3.stack` function to normalize the data, while `d3.scaleOrdinal` maps colors to each metric, all rendered as SVG elements. On hover, an interactive tooltip displays the precise decimal value for that segment.

Question1.1

This interactive bar chart visualizes the population of ten countries in the year 2000, sourced from a CSV file hosted on GitHub. Built with React and D3 v5, it renders SVG elements, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The chart displays a horizontal bar for each country, with axis ticks and tooltips formatted using D3's `format` function. The left axis lists country names, while the bottom axis shows population values with a custom tick format that converts billions notation.

Activity6_Task3.1

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with species differentiated by symbol shapes and a corresponding legend. It loads CSV data via `fetch` and `csvParse`, then renders using D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` generators. Axes and labels are drawn with `axisLeft`, `axisBottom`, and custom text elements, while the shape legend is built manually with `symbol` and tick groups.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, with its x-position mapped to horsepower, y-position to torque, and radius scaled proportionally to highway MPG using a d3.scaleLinear. The SVG is rendered with d3.v7, featuring interactive tooltips on mouseover via event listeners. A legend displays the MPG scale and color-coded car makes, while the color encoding uses d3.interpolateTurbo and d3.scaleOrdinal based on CSV data.

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar segmented into five rating categories from “below 5.0” to “above 8.5.” The visualization reveals how genres like Documentary skew toward higher ratings while Action concentrates in lower ranges. Built with D3 v7 and SVG, the chart uses `d3.stack()` to compute the stacked segments and `d3.scaleLinear` and `d3.scaleBand` for positioning. Mouse hover triggers a tooltip displaying the exact percentage for each rating segment within a genre, using `d3.select` event handlers.

Question2

A stacked bar chart visualizes the distribution of horsepower, torque, and highway MPG metrics across 31 car makes, with each bar segmented to show the proportional contribution of each metric. The chart uses D3.js v7 with SVG rendering, employing `d3.stack()` to generate stacked series and `d3.scaleOrdinal` to assign colors. Hovering over a segment displays a tooltip showing the exact metric value formatted with `d3.format('.2f')`. The data comes from a CSV containing average specifications, with axes labeled "Value" and "Rating" for clarity.

Question2

This stacked bar chart displays the percentage distribution of IMDb ratings across different movie genres, with each bar segment representing a rating level. The visualization uses d3.stack() to compute stacked bar values, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Hovering over a bar segment triggers d3.select() and tooltip event handlers, showing the precise percentage for that rating level within the genre. The code renders SVG graphics using d3.v7, formatting percentage labels with d3.format('.2f').

Oct 21, 2024

Question2

This stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each bar segment representing a rating bracket from "below 5.0" to "above 8.5." The visualization uses the D3.js library (v7) with SVG rendering to create horizontal stacked bars, where hovering over a segment reveals a tooltip showing the exact percentage for that rating category within the selected genre. The data originates from a CSV file containing proportional rating breakdowns per genre. Color-coded categories are distinguished using `d3.scaleOrdinal`, and the interactive hover effects are implemented through D3 mouse event handlers.

Question2

This example demonstrates a minimal VizHub template that renders the text "Hello VizHub!" centered on the page. It uses D3's `select` API to target the HTML `#message` div and set its text content from a local ES6 module. The code imports `select` from the D3 library via CDN and a custom `message` string from `myMessage.js`, with styling provided by an external CSS file. The visualization showcases how to combine external libraries, local modules, and CSS within a single-page D3 project.

Question2

This stacked bar chart shows the distribution of IMDb ratings across movie genres, with each bar segmented by rating levels and hover tooltips revealing exact percentages. The visualization uses d3.stack() to compute stacked segments, d3.scaleBand() for genres on the y-axis, and d3.scaleLinear() for percentages on the x-axis, rendered as SVG rectangles with d3.scaleOrdinal() color mapping. User interaction highlights bars with opacity changes and displays formatted percentage values via d3.format(), with data loaded from a CSV file containing genre and rating columns.

Question 2

This stacked bar chart visualizes the percentage of each rating level within different movie genres, showing how genre impacts IMDb ratings. Each genre has a horizontal bar divided into colored segments, with the total always summing to 100%. The chart uses D3.js v7's `d3.stack` and `d3.scaleOrdinal` to create the stacked layout, and `d3.axisBottom` and `d3.axisLeft` for the axes. Hovering over a segment triggers a tooltip displaying the exact percentage for that rating and genre, using D3's `.on('mouseover')` event handlers. The data comes from a CSV file with genre and rating percentages.

question3

A stacked bar chart displays the percentage of each rating level across movie genres, showing how genre influences ratings. Horizontal bars represent genres, with color-coded segments for each rating category; hovering reveals exact percentages via tooltips. Built with D3 v7, the visualization uses `d3.stack()`, `d3.scaleBand()`, and `d3.scaleOrdinal()`, rendering SVG elements and reading data from a CSV file where total proportions equal 1 (100%).

Activity6_Task1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart, with bars sorted by country name and lengths proportional to population. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders bars as SVG `<rect>` elements. The data is fetched from a CSV via `d3.csv`, with population values converted from thousands. Tooltips show the exact population values, and axis labels are formatted using `d3.format` with 'G' replaced by 'B' for billions.

Activity_Task2

This stacked bar chart visualizes the impact of movie genre on IMDb ratings, displaying the percentage distribution of ratings across five categories (below 5.0 to above 8.5) for six genres. Using D3.js v7, the chart employs `d3.stack()` to create stacked bars and `d3.scaleBand()` for the genre axis. Interactive tooltips provide precise percentages on hover, with data sourced from a CSV file. The SVG rendering uses `d3.axisBottom()` and `d3.axisLeft()` for axes, while mouseover events trigger opacity changes and detailed pop-ups.

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart where each bar segment represents a rating category from “below 5.0” to “above 8.5.” The chart is rendered with D3 v7 in SVG, employing `d3.stack()` to compute stacked series and `d3.scaleBand`/`d3.scaleLinear` for axes. Interactive tooltips appear on mouseover, displaying each segment’s exact percentage. Data comes from a local CSV file, and the genre labels are shown along the y-axis.

Activity6_Task2

This stacked bar chart shows how movie ratings are distributed across six genres, with each bar representing the percentage of films falling into five rating categories from below 5.0 to above 8.5. The visualization highlights that documentaries have the highest proportion of high ratings, while action films tend toward lower scores. Built with D3 v7, the chart uses `d3.stack()` to construct the stacked segments and `d3.scaleOrdinal` for color encoding. Hovering over individual bars triggers tooltips displaying the exact percentage for each rating level within that genre.

Question1.2

This example shows a horizontal bar chart depicting the populations of twenty countries in 2010. Built with React and SVG, it uses D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. The `csv` function loads data from a GitHub-hosted file, and custom `AxisBottom` and `AxisLeft` components render the axes with formatted tick labels. Each bar is a `rect` generated by the `Marks` component, with a `<title>` element for tooltip values.

Question1.1

This example demonstrates a minimal VizHub project that renders the text “Hello VizHub!” in the center of the page using D3.js. The code imports the `select` function from D3 to target a div by its ID and sets its text content, while a separate ES6 module exports the message string. The page loads D3 v5 from UNPKG and includes external CSS for styling. The example highlights basic module imports and D3 DOM manipulation.

Question1.1

Fork of Activity6_Task1

This example demonstrates how a minimal web page can load D3.js from a CDN and use ES6 modules to compose a simple message display. It shows the basic structure of a VizHub project, including an HTML file that links external styles and scripts, and a JavaScript file that imports the `select` function from D3 and a local `message` constant. The code uses D3’s `select` method to set the text content of a `<div>` element, with styling applied via CSS. The example serves as a template for combining D3 with modular JavaScript imports.

Activity 6_Task1

This example presents a horizontal bar chart comparing the populations of various countries in 2020, sourced from a CSV file. Rendered as an SVG within React, it uses D3.js modules to manage data processing and scales: `scaleBand` positions the country names on the y-axis, while `scaleLinear` maps population values to the x-axis. Custom ES6 modules (`AxisBottom`, `AxisLeft`, `Marks`) draw the ticks, labels, and bars, with a "POPULATION-2020" footer label. The code imports D3 from UNPKG, demonstrating modular integration.

Activity 6_Task1

A horizontal bar chart displays population data for various countries in 2020. The visualization uses D3’s `scaleBand` and `scaleLinear` to map country names and population values, with axes rendered as custom React components. The bar lengths encode population magnitude, and tick labels use D3’s `format` function to abbreviate large numbers (e.g., “1.2B”). The chart is rendered as SVG within a React application, drawing data loaded from an external CSV file.

Activity 6

This example displays the text “Hello VizHub!” centered on the page, serving as a minimal demonstration of VizHub’s core capabilities. The code loads D3 v5 from UNPKG and uses the `select` function to target the `#message` div, setting its text content. It also illustrates importing local ES6 modules via `myMessage.js` and includes a CSS file for styling. The visualization itself is static, with no data processing or interactive elements.

6 reflections

A single flower silhouette rendered as an SVG path is repeated six times, each instance scaled and positioned with different translations and rotations to create a layered, overlapping composition. The paths use a violet fill with white stroke outlines, set against a black background with a floral photograph as a CSS background image. The visualization is built with React, using inline SVG elements and ReactDOM to render the path data, with styles defined in index.css and the background applied via a CSS class.

Oct 15, 2024

Fork of Buddha in colors -overlapping Buddha

This visualization displays a dense field of overlapping, randomly rotated polygons rendered in vivid, unpredictable colors against a black background. At the center, a detailed Buddha silhouette is drawn using a complex SVG path, creating a layered, abstract composition. The code generates a grid of polygons by mapping over arrays and using `Math.random()` to determine positioning, fill colors, and rotation. The Buddha path is nested within an SVG group with a translation and scale transform, combining generative art with a traditional iconographic form using React and ReactDOM.

Oct 15, 2024