S

shettisowmya01@gmail.com

@Sowmi0101·32 public vizzes

Loading thumbnail…

Activity 7.2_Question 2

This example shows an area chart of star absolute magnitude by luminosity, using a light green, semi-transparent filled region to highlight the relationship between the two variables. The visualization loads CSV data from a GitHub repository and renders it as an SVG using D3 v6, with a logarithmic x-axis for luminosity and a linear y-axis for absolute magnitude. The code employs `d3.csv`, `d3.scaleLog`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, applying `curveMonotoneX` for smooth area boundaries.

Loading thumbnail…

Activity 7.2_Question 1

This pie chart visualizes the distribution of star luminosity across five defined ranges, from "Very Low (0-0.1)" to "Very High (100+)". It aggregates data from a CSV file of stars, counting how many fall into each luminosity bin, and colors each slice with a corresponding gray-to-yellow ordinal scale. The visualization uses d3.csv for data loading, d3.pie and d3.arc for generating the SVG paths, and d3.scaleOrdinal for color mapping. An interactive HTML legend displaying each range and its count is positioned outside the chart.

Loading thumbnail…

Activity 7.1_Tutorial

This interactive scatter plot visualizes the Star DataSet, mapping stellar temperature (K) on the x-axis against luminosity (L/Lo) on the y-axis. Each circle represents a star, with its fill color determined by the star’s spectral color category (e.g., red, blue, yellow, orange) via a custom color map, falling back to gray for unknown colors. The visualization uses d3.csv to load the remote dataset, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for the labeled axes, with margins and axis labels provided in green. The chart renders as an SVG, sized to the full browser window, and includes a descriptive title above the plot.

Loading thumbnail…

Act7

This example demonstrates a reusable scatter plot of the Iris dataset, showing the relationship between two numeric variables with circular marks. It uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and render axes, while the custom `scatterPlot` module controls width, height, margins, and radius through a fluent API. Data is loaded via `d3.csv` from a remote gist URL. The plot displays unlabeled axes but includes a static 'TEXT' label on the x-axis, with styling handled through CSS for fonts and colors.

Loading thumbnail…

Activity6_population_Q1.2

This visualization displays the population of 20 countries in 2010, using horizontal bars to compare values. Built with React and rendered as an SVG, the chart uses D3 v5 functions like `scaleBand` and `scaleLinear` for axes, and `format` to abbreviate tick labels. Data is loaded from a CSV file via `csv()`, and tooltips reveal each bar’s exact population.

Loading thumbnail…

Activity6_population_Q1.1

This example shows the population of ten countries in the year 2000 using a horizontal bar chart, where bar length encodes population and a tooltip displays the formatted value. The visualization is built with React and D3 v5, using `d3.scaleBand` for the country categories on the y-axis and `d3.scaleLinear` for the population scale on the x-axis. The chart loads CSV data from a GitHub repository via `d3.csv`, formats axis tick labels with `d3.format`, and renders the bars and axes as SVG elements. The code demonstrates the use of local ES6 modules for axis and mark components, alongside React’s `useData` hook for data loading.

Loading thumbnail…

Activity 6_Task 4_Question

A bubble chart compares men’s and women’s enrollment across U.S. universities, with bubble size encoding the enrollment gap. The visualization uses D3 v7 to render SVG circles, scales, axes, and a size legend. Hovering over a bubble displays a tooltip with exact values via mouse events. The data comes from a CSV file, and each school is colored using a categorical color scale.

Loading thumbnail…

Activity 6_Task 4_Tutorial

This visualization is an animated bubble chart that explores the relationship between average horsepower, torque, and highway MPG across different car makes. Each circle represents a car brand, with its horizontal position mapping to horsepower, vertical position to torque, and size encoding highway MPG. Color further distinguishes the makes. The chart uses D3.js v7 with the `d3.scaleLinear` and `d3.scaleOrdinal` APIs, rendered as an SVG. Interactive tooltips, implemented via `d3.select`, appear on mouseover. A legend uses sized circles to communicate the MPG scale.

Loading thumbnail…

Activity 6_Task 3.2_Question

This scatter plot visualizes star data from a CSV file, showing the relationship between Temperature (K) on the x-axis and Luminosity (L/Lo) on the y-axis. Each star is represented by a distinct symbol, colored according to its star color category, with a legend indicating the mapping. The visualization uses d3.scaleLinear for axis scaling, d3.scaleOrdinal with d3.symbolsFill for shape assignment, and d3.symbol to generate the shapes for both the marks and legend. Data is loaded via fetch and parsed with d3.csvParse.

Loading thumbnail…

Activity 6_Task 3.1_Question

This example shows a scatter plot of star data, mapping temperature on the x-axis and luminosity on the y-axis. Each circle’s color corresponds to the star’s color category, using a fixed color map with gray as a fallback. The visualization loads CSV data from a GitHub URL, parses numeric fields with custom row handling, and renders SVG circles using D3 v6’s `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs. Axis labels are added manually, and the plot fills the full browser window.

Loading thumbnail…

Activity 6_Task 3.2_Tutorial

A scatter plot displays iris flower measurements, with sepal length on the x-axis and petal length on the y-axis, while distinct D3 symbol shapes (from `symbolsFill`) encode the flower species. The visualization uses D3 v7's `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to construct the chart and a custom legend. Data loads asynchronously from a CSV file of the classic Iris dataset hosted on GitHub, which is parsed and typed using `d3.csvParse`.

Loading thumbnail…

Activity 6_Task 3.1_Tutorial

This scatter plot visualizes the Iris dataset, mapping petal length and width as the x- and y-axes, with each point colored by species (setosa, versicolor, or virginica). D3 v6 loads the CSV via `d3.csv`, and uses `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to render axes. Circles are drawn with SVG, and their radii are fixed, but the `rx` and `ry` attributes are set to sepal length and width, creating elliptical markers. Data is sourced from a GitHub-hosted CSV file.

Loading thumbnail…

Activity 6_Task 2_Question

This stacked horizontal bar chart shows the proportional distribution of participation across seven fitness class types, broken down into five intensity levels from “Very Low” to “Very High.” The bars are color-coded by intensity, with tooltips revealing exact percentages on hover. The visualization uses D3’s stack function to build the segments, scaleLinear for the x-axis, scaleBand for the y-axis, and d3.format to render percentages, all drawn as SVG elements within a simple HTML page.

Loading thumbnail…

Activity 6_Task 2_Tutorial

A stacked horizontal bar chart from D3 v7 visualizes the distribution of IMDb rating categories across six film genres, with each bar segment proportionally sized by a percentage from the loaded CSV data. The chart uses d3.stack() to compute layer positions, d3.scaleBand() for the categorical axis, and d3.scaleLinear() for the percentage scale. Interactive hover effects trigger a custom tooltip displaying genre-specific percentage values, while d3.axisBottom and d3.axisLeft provide labeled axes. The SVG rendering uses ordinal color mapping for rating bands and supports the documentary, drama, comedy, romance, animation, and action genres.

Loading thumbnail…

task4.1

This bubble chart visualizes the relationship between sepal length, sepal width, and petal length across three flower species, with petal length encoded by bubble size and species indicated by color. Built with D3.js v7, it uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` for species colors, and includes interactive tooltips on `mouseover`. Data comes from a CSV file with 15 flower samples. The chart displays an SVG with animated hover effects, a legend for petal length, and a black tooltip showing species on interaction.

Loading thumbnail…

tutorial_4

This chart visualizes the correlation between average torque, horsepower, and highway MPG across several car makes. Each bubble’s position is determined by its horsepower and torque, while its radius and color encode highway MPG and car brand, respectively. The code uses d3.csv to load data, d3.scaleLinear for axes and size, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Interactive tooltips appear on mouseover, and a legend explains the size scale for highway MPG.

Loading thumbnail…

Activity 6_Task 4_Question

This bubble chart visualizes the relationship between horsepower, torque, and highway fuel efficiency for various car brands. Each bubble’s x-position represents horsepower, y-position torque, and radius signifies MPG. The visualization uses the Chart.js library with a canvas rendering context, drawing data from an embedded CSV-like array. Hover effects increase bubble opacity and stroke width via CSS, while axis titles clearly label the quantitative scales.

Loading thumbnail…

act6_shapeplot

This example visualizes the Iris dataset by plotting sepal length against petal length, with each of the three iris species distinguished by a different symbol shape. The scatter plot uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position points and generate the distinct marker shapes, while a custom shape legend explains the species mapping. The chart is built with reusable D3 modules for scatter plot rendering, axes, and legend, and it loads data via `fetch` and `csvParse` from a raw GitHub CSV file.

Loading thumbnail…

task3 Scatter Plot with Shape

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each of the 150 data points is rendered as a distinct shape—circle, square, or triangle—based on the flower's species, with a shape legend identifying the mapping. The visualization is built using D3 version 7, leveraging the library's `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` to assign shape encodings. A legend, constructed via `symbolGenerator`, appears in the lower right, and axis labels clarify the measured attributes.

Loading thumbnail…

activity 6_tutorial3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length. Points are colored by species using distinct shapes and a legend. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and SVG symbols. Data is loaded asynchronously via `csvParse` from a remote URL, with axes and labels generated through modular functions.

Loading thumbnail…

activity 6_q3

This horizontal stacked bar chart displays sales data for five beauty products, breaking down total sales into two colored segments: Price and Quantity, with product names on the y-axis and the aggregated sales value on the x-axis. Built with D3.v7, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.stack()` to compose the stacked segments, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering includes color encoding via `d3.scaleOrdinal` for the two stacked categories, with a legend and concise axis labels, drawing from a local dataset where each row specifies product, brand, price, and quantity.

Loading thumbnail…

Activity6_Task3

This example displays the Iris dataset as an SVG scatter plot, coloring each point by species (skyblue, lightgreen, or orange) and mapping petal length and petal width to the x- and y-axes. It uses d3.csv to load the data, d3.scaleLinear and d3.extent for scales, and d3.axisLeft/axisBottom for labeled axes. The code appends circles via d3.selectAll().data().join(), setting separate radii and positions, though the mark also stores sepal dimensions without plotting them. The visualization fills the browser window, with green axis labels for petal length and sepal length.

Loading thumbnail…

Activity6_Task2

This example shows the distribution of movie ratings across genres using a stacked horizontal bar chart, where each bar segment represents the percentage of films falling into rating brackets from below 5.0 to above 8.5. The visualization uses D3 v7 with an SVG rendering approach, employing d3.stack() to compute the stacked series and d3.scaleOrdinal with a custom color palette to distinguish rating categories. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination. The data comes from an external CSV file containing genre names and pre-computed proportional values.

Loading thumbnail…

6 Buddha with flower background

This example displays a large Buddha head at the center of the composition, surrounded by a decorative border. The primary visual element is rendered as an SVG path using React's JSX syntax, with numerous nested loops generating hundreds of random colored dots that fill the background. The visualization uses React and ReactDOM for rendering, while the webpage applies a natural flower image as the background through CSS. The application dynamically creates data arrays and maps over them to produce the colorful, chaotic dot pattern that contrasts with the dark silhouette of the Buddha.

Loading thumbnail…

activity 6 task1

This example displays a horizontal bar chart of the 2020 population for 30 countries, sorted by country name. It uses D3’s `scaleBand` and `scaleLinear` to map the data, which is fetched from a remote CSV file via `d3.csv`. The bars are rendered as SVG rectangles with D3 axes, and a title tooltip shows the abbreviated population value. The code imports D3 functions like `arc`, `pie`, and `max` from the `d3` namespace and leverages React for the UI.

Loading thumbnail…

Fork

This example demonstrates how VizHub supports ES6 modules and D3.js imports. The code uses `import { select } from 'd3'` to select a div element and set its text content, while a local module `myMessage.js` exports a string value. The page renders a large centered message using CSS from `styles.css`, and D3 is loaded via UNPKG. The example shows basic DOM manipulation with D3’s `select` function and modular JavaScript organization.

Loading thumbnail…

6budha

The visualization displays a dense, kaleidoscopic pattern of small rotated polygons in bright, randomly assigned colors on a black background. It generates this effect through nested JavaScript array mappings that compute polygon coordinates and apply random rotations and fills. The piece also includes six green path shapes, arranged in mirrored transforms to create symmetrical reflections across the canvas. Built with React and rendered as SVG, the code uses the `Math.random` function and SVG `polygon` and `path` elements with `transform` attributes to construct the layered composition.

Loading thumbnail…

buddhaaa Reflection

The visualization displays a horizontal row of six Buddha images, where alternating images are mirrored to create a rhythmic reflection pattern. Using a Canvas rendering approach, the code loads a single Buddha image and draws it six times across a 900-pixel-wide canvas. For even-indexed positions, the image appears normally, while odd positions use the Canvas `save`, `scale(-1,1)`, and `restore` methods to flip the drawing horizontally, producing a mirrored effect. The visualization runs on React with a flower-patterned background image applied via CSS.

Loading thumbnail…

6Buddha

The visualization displays six mirrored Buddha reflections arranged in a grid, rendered as SVG shapes composed of repeated hexagon elements. Using React and JavaScript, the code generates random hexagonal patterns with varying colors and opacity, layered over a static Buddha path. The layout uses CSS Grid for reflection symmetry, while the SVG paths depict the Buddha silhouette through detailed coordinate data.

Loading thumbnail…

5buddha

The visualization renders a dense field of overlapping, rotated polygons layered atop a large, intricate SVG path of a Buddha figure. Each polygon’s position, size, and fill color are generated using JavaScript’s `Math.random()`, producing a chaotic, colorful mosaic against a black background. The Buddha path is fixed and scaled, while the polygon grid is created through nested `Array.map` loops in React, with rendering handled via ReactDOM and SVG elements. The entire composition is static, with no interaction or animation.

Loading thumbnail…

Fork of Buddha in colors -overlapping 5Buddha

The visualization layers over 20 randomized, multi-colored polygons with two static Buddha silhouette paths, producing a dense, overlapping composition on a black background. Each polygon is dynamically generated with random coordinates, fill colors, opacity values, and rotations using React’s array mapping. The Buddha paths are rendered as SVG elements with fixed transforms, colored violet and light blue. The code uses React 16 and ReactDOM to render the SVG scene, with random values recalculated on each render, creating a unique, chaotic blend of geometric shapes and sacred imagery.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A kaleidoscopic Buddha image composed of hundreds of overlapping colored polygons stacked at various scales and rotations. Each polygon's position, size, and color are randomly generated from a nested array loop, producing a dense, chaotic visual texture. The SVG paths trace the Buddha silhouette, while React manages the component structure and renders the elements. The visualization uses ReactDOM to mount the app, with all graphics rendered as SVG elements in a black-background viewport.