greeshmareddy135@gmail.com

test

This example presents a dynamic area chart showing trends for three categories—CategoryA, CategoryB, and CategoryC—across different years. The visualization uses Plotly.js to render the data, which is fetched from a remote CSV dataset hosted on GitHub. Each category is displayed as a filled line trace, with CategoryA filling to zero and the others stacking on top. The chart includes axes labeled "Year" and "Values," with a title indicating the dynamic nature of the category trends.

Apr 11, 2024

Assignment2_Q1.2

This area chart displays the proportional distribution of chocolate ratings across six chocolate types, showing the cumulative proportion of ratings from "Less than 3" through "More than 6" for each category. The visualization uses a fixed SVG canvas with D3.js v7, employing `d3.area()` to generate the area path, scaleBand for the categorical x-axis, and scaleLinear for the y-axis. The data is embedded directly in the code and rendered as a single filled path, with rotated axis labels and margin-based layout.

Apr 11, 2024

Assignmenr2_Q1.1

This pie chart visualizes favorite fruit preferences using data loaded from a CSV file. Each slice represents a fruit category, with its size proportional to the recorded "Less than 3" value, and is colored using D3's `scaleOrdinal` with a custom palette. The chart includes a legend, value labels on each slice, and a title. Built with D3 v7, it leverages the `pie` and `arc` APIs to generate the arcs, while a simple `select` approach appends SVG elements to the page.

Apr 11, 2024

test

This pie chart visualizes the distribution of fruit consumption categories, with each slice representing a genre's value from data loaded via `d3.csv` from a remote CSV file. The chart uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path shapes, with `d3.scaleOrdinal` assigning categorical colors. Interactive tooltips appear via appended `title` elements, while value labels are positioned at each arc's centroid using `arcPath.centroid()`. A legend and title are rendered within the 600×600 SVG, demonstrating a reusable pie chart function.

Apr 10, 2024

Activity6_Question1.1

This bar chart displays the population of ten countries in the year 2000, with bar lengths proportional to population values and country names listed along the vertical axis. The visualization uses React components with D3 v5’s `scaleBand` and `scaleLinear` for positioning, `csv` for data loading from a GitHub-hosted CSV, and `format` for abbreviating tick labels (e.g., replacing “G” with “B”). SVG rectangles render the bars, and each bar includes a native `<title>` tooltip showing the formatted population value. The axes are drawn with custom components, and the chart is framed by margins with a labeled x-axis.

Activity6_Task1_Q1.1

This example shows the ten most populous countries in the year 2000 as a horizontal bar chart ordered by country name, with each bar’s length representing population in billions. The visualization uses React components to render SVG rectangles and axes, with D3 v5’s `scaleBand` and `scaleLinear` computing positions and scales. Data comes from a remote CSV loaded via `d3.csv`. The y-axis labels country names, while the x-axis formats tick values using D3’s `format` with a custom abbreviation replacing ‘G’ with ‘B’. Axis components (`AxisBottom`, `AxisLeft`) and `Marks` display the chart, including tooltips via SVG `<title>` elements.

Fork of Hello VizHub

This bubble chart visualizes the relationship between screen size and price for electronics, with bubble radius encoding horizontal resolution. It uses D3.js v7 to load CSV data and render SVG circles. The chart includes axis labels, a green-to-red color scheme, and interactive tooltips that display brand, resolution, processor speed, and price on mouseover. The tooltip positioning relies on the `event.x` and `event.y` properties from D3's event handling.

Fork of Activity6 Question4

This bubble chart visualizes the relationship between screen size, price, and horizontal resolution for electronics from multiple brands. Circles positioned by screen size on the x-axis and price on the y-axis have radii scaled by resolution, colored green with red strokes. A tooltip displaying brand, resolution, processor speed, and price appears on mouseover. The chart uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG circle elements with interactive mouse events.

Activity6_Question4

This bubble chart displays the relationship between screen size, price, and resolution for various electronics brands. The visualization uses D3.js v7 to render circles on an SVG canvas, with bubble size representing horizontal pixel resolution. Interactive tooltips appear on mouse hover, displaying detailed specifications including brand, screen dimensions, processor speed, and price. The chart includes labeled axes for screen size and price, with data sourced from a local CSV file containing thirty records across multiple brands.

Activity6_4Q

This D3.js v7 bubble chart visualizes the correlation between screen size, resolution, processor speed, and price for various TV brands. Color encodes brand identity while circle radius represents processor speed, with tooltips revealing brand names on hover. The visualization uses d3.csv to load data, d3.scaleOrdinal for color mapping, and d3.axisBottom/d3.axisLeft for axes. An SVG legend displays highway MPG value ranges and brand color keys, with styled tooltip interactions for enhanced data reading.

Activity6_Question2

This stacked bar chart displays the distribution of chocolate ratings across five brands, showing the proportion of ratings in five percentage-based categories from “below 5.0” to “above 8.5.” The code uses d3.stack() to generate the stacked series and d3.scaleOrdinal for color mapping, with d3.axisBottom and d3.axisLeft for axes. Interactive tooltips appear on mouseover, showing the exact percentage per rating category. The data comes from a local CSV file loaded with d3.csv, and the visualization is rendered as SVG with a linear x-scale for percentages and a band scale for categories.

Activity6_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a car brand, positioned by horsepower and torque, with its size encoding highway MPG and color distinguishing makes. The visualization uses D3.js v7’s `scaleLinear` for axes and bubble scaling, `scaleOrdinal` with `interpolateTurbo` for colors, and SVG rendering with interactive tooltips on hover. A legend shows bubble size values, while color coding identifies each make.

Activity6_Q3

This scatter plot visualizes the Iris flower dataset, mapping petal length and width for individual data points on a two-dimensional grid. Each circle is colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica) using D3 v6’s `csv` loader and `scaleLinear` scales. The SVG rendering uses `axisLeft` and `axisBottom` for axes, with custom label text for petal length and sepal length. The code imports D3 from UNPKG and demonstrates local ES6 module usage through the `main` async function.

Activity6_Question3

This scatter plot visualizes the relationship between pollution levels, life expectancy, and respiratory disease rates across fictional cities. Circles are color-coded by pollution severity (green, orange, red) with radii scaled to respiratory disease prevalence. The visualization uses d3.scaleLinear for x, y, and radius scales, d3.axisBottom and d3.axisLeft for axes, and appends SVG circles via d3.selectAll. Data is hardcoded in the script rather than loaded from the provided CSV file, with axis labels for pollution level.

Apr 5, 2024

Fork of Activity6_Tutorial3.2

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length against petal length while encoding the three iris species through distinct symbol shapes. The plot uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to position and shape the marks, with a custom `axes` module and a shape legend generated via `symbolGenerator`. Data is loaded from a remote CSV file using `csvParse`, and the visualization updates dynamically as the window resizes.

Apr 5, 2024

Activity6_Tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. The visualization uses d3.v6 to load the CSV data, scaleLinear for axes, and axisLeft/axisBottom to render the scales. Points are drawn as SVG circles, and while the code references sepal dimensions, the visible plot only displays petal measurements.

Activity6_Tutorial2

A stacked bar chart visualizes the percentage distribution of IMDb rating categories within each movie genre, using horizontally segmented bars to show proportions that total 100%. Hovering over any segment reveals a tooltip displaying the exact percentage for that rating level and genre. The chart is built with D3 v7, using `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color encoding. Data comes from a CSV file containing genre and rating percentage columns, rendered as SVG with interactive mouse event handlers.

Activity6-Question2

This stacked bar chart depicts the percentage distribution of chocolate ratings across five categories, from "below 5.0" to "above 8.5," for six chocolate brands. Each brand forms a horizontal bar with colored segments representing the proportion of ratings in each category, using a diverging color scheme. Built with D3 v7 and rendered as SVG, the visualization uses `d3.stack()` to generate the stacked data and `d3.scaleOrdinal` for colors, with interactivity via mouseover events that display exact percentages in a tooltip. The chart reads from the CSV file, with axes labeled "Percentage" and a manual legend positioned to the right.

Activity6

A stacked horizontal bar chart titled "Music" visualizes the percentage distribution of music ratings (below 5.0 to above 8.5) across five streaming platforms (Spotify, Youtube, Apple, Amazon, and Tidal). The chart uses D3.js v7’s `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleLinear` to construct layers for each rating category, with an interactive tooltip on mouseover. Data is loaded from a local CSV file and rendered as SVG, with D3’s `axisBottom` and `axisLeft` for axes.

Activity-6_Q2

This stacked bar chart visualizes the percentage distribution of music rating categories (below 5.0 to above 8.5) across five streaming platforms, including Spotify, YouTube, Apple, Amazon, and Tidal. Each horizontal bar segment represents a rating category’s proportion, colored via a categorical scale, with hover tooltips showing the exact percentage for each genre. The visualization uses D3.js v7, employing `d3.stack()` for data stacking, `d3.scaleBand()` for the y-axis, and `d3.axisBottom()` for the x-axis. SVG rendering with custom CSS styles and a legend displays the data from the provided CSV file.

Activity6_Q2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segmented into five rating ranges from below 5.0 to above 8.5. The horizontal bars display the proportional share of each rating category within a genre, summing to 100%. The visualization uses d3.stack() to compute the stacked segments, d3.scaleOrdinal with a categorical color palette, and d3.scaleBand for the genre axis. Hovering over any segment triggers a tooltip showing the exact percentage, formatted with d3.format, for that rating range within the selected genre.

Activity6_Tutorial2

This example demonstrates a minimal "Hello VizHub!" message displayed in large, centered text. It serves as a template for D3.js projects, loading the library via UNPKG and showcasing the use of ES6 modules. The code imports the `select` function from D3 and a custom `message` export from a local module, then applies the text to a div element. It also includes a CSS stylesheet for formatting.

Fork of Activity6_Task1_Q1.2

This horizontal bar chart displays the populations of twenty countries in 2010, sorted by country name along the vertical axis with population magnitude encoded by bar length on the horizontal axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and SVG `<rect>` elements for the bars. Population values are formatted using D3's `format` function to abbreviate large numbers with suffixes like "B" for billions. Data is loaded asynchronously from a remote CSV file via D3's `csv` parser.

Activity6_Task2

This example demonstrates a minimal D3.js setup within VizHub, showing how to load D3 via UNPKG and use ES6 module imports to combine local code with the library. It renders a single text message, “Hello VizHub!”, into an HTML div using `select` from D3, while a separate local module exports the message string. The page also includes a CSS rule for centering large text, and the JavaScript defines a regex and a constant that are not used in the visualization. The rendering approach is straightforward DOM manipulation rather than data binding.

Activity6_Task1

This interactive bar chart displays the population of the top 30 countries in 2020, sourced from a CSV file hosted on GitHub. Built with React and D3 v5, it renders SVG rectangles using the `Marks` component, with the `scaleBand` and `scaleLinear` functions mapping country names and population values to visual coordinates. Interactive tooltips reveal precise population figures via the `<title>` element. Axis ticks and labels are generated dynamically through the `AxisBottom` and `AxisLeft` components, while the chart is styled with custom CSS classes for a clean presentation.

Activity_6_Task_1

This example demonstrates VizHub’s ability to load D3 from a CDN and combine ES6 module imports for a simple DOM update. It displays a static “Hello VizHub!” message centered on the page, styled via CSS. The code imports `select` from `d3` to set the text content of a `div`, and also imports a local `message` variable from `myMessage.js`, which holds the displayed string. The visualization itself shows no dynamic data or rendering, serving only as a minimal proof-of-concept for module-based D3 projects.

Buddha6

A dense, colorful abstraction of a Buddha figure emerges from overlapping, randomly positioned and colored rectangles, rendered as SVG within a React application. The code uses React and ReactDOM to construct the visualization, mapping over numeric arrays to generate each rectangle with randomized fill colors and opacity. The Buddha’s form is traced via a complex SVG path, scaled and translated for placement. A background image of flowers from an external URL frames the composition.

Apr 2, 2024

Buddha5

A vibrant, abstract composition of overlaid, multi-colored diamond shapes forms a dense, chaotic mandala-like field. The artwork is built from hundreds of randomly positioned and rotated polygons, each filled with a color derived from random RGB values, against a black background. This React application uses nested `map` operations to generate the polygon elements, which are rendered as SVG paths. The code also includes a large, complex SVG path that depicts a Buddha figure, placed atop the colorful geometric noise.

Apr 1, 2024

Buddha2

The visualization displays a multicolored, overlapping Buddha silhouette composed of hundreds of small circles scattered randomly across a dark background. The circles are placed using nested JavaScript map functions that generate random x and y coordinates, while their fill colors are derived from randomized RGB values. The Buddha shape is rendered as a detailed SVG path using React and ReactDOM, with the overall scene drawn within an SVG element at a fixed width and height.

Apr 1, 2024