Skip to main content
Log in
S

saibharath7thota@gmail.com

@Sai2168·15 public vizzes

Loading thumbnail…

task8.1

This example visualizes car auction data by displaying the average selling price for each vehicle make as a bar chart. The dataset is loaded from a remote CSV file and parsed using `d3.csvParse`. The visualization uses D3 v6 to construct an SVG with `scaleBand` for the categorical x-axis and `scaleLinear` for the price y-axis, rendering light blue rectangles for each make. The code also adds rotated x-axis labels and descriptive axis titles for "Make" and "Selling Price."

Apr 26, 2024
Loading thumbnail…

task8.1

This example demonstrates a minimal VizHub setup that loads D3 from a CDN and uses ES6 module imports to display a simple message. The page renders the text “Hello VizHub!” centered in a large font via the `#message` div. The code imports `select` from D3 and a custom `message` constant from a local `myMessage.js` module, using D3’s `select` API to set the text content. A regular expression and a number are also declared but unused, showing basic JavaScript syntax without affecting the output.

Apr 26, 2024
Loading thumbnail…

Task 9

This pie chart visualizes the number of families across five countries, with each slice sized proportionally to its value in the dataset. The chart is rendered as an SVG using D3.js (v7), leveraging the `d3.pie` layout and `d3.arc` generators to draw the slices and labels. Each slice is labeled with its country name, and a separate HTML legend, built with `d3.select`, displays color-coded entries. The color scheme uses `d3.schemeCategory10` for slice and legend colors, sourced from the community.csv data.

Apr 25, 2024
Loading thumbnail…

activity6_task4

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length across three iris species. Each circle’s x-position represents sepal length, y-position represents sepal width, and radius encodes petal length, with color distinguishing species. The visualization uses d3.csv to load the dataset, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.schemeCategory10 for species colors. Tooltips appear on hover, and a legend explains both bubble sizes and species categories. The SVG rendering approach includes interactive mouse events for enhanced exploration.

Apr 15, 2024
Loading thumbnail…

activity6_task4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG and its color distinguishes the manufacturer. A tooltip reveals the make on hover, and legends explain the size and color scales. Built with D3 v7, the visualization uses SVG, linear scales, and ordinal color mapping, with data loaded from a CSV file.

Apr 15, 2024
Loading thumbnail…

Activity6_q3

This example displays a scatter plot of gross income against age for six individuals. Each point is colored distinctly, with opacity set to 0.5, and hover labels reveal the associated gender alongside the x and y values. The visualization is built using Plotly’s JavaScript library, specifically the `Plotly.newPlot` function, which renders the scatter markers into an 800 by 600 pixel div. The data are hardcoded in the script, with age and income values paired directly.

Apr 15, 2024
Loading thumbnail…

Activity6_Task3.1

This example displays a scatter plot of the Iris dataset, using distinct symbol shapes for each species to show petal length against sepal length. It loads D3 v7 via UNPKG and demonstrates modular ES6 imports for local modules like `scatterPlot.js` and `axes.js`. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.symbol` to render shapes, while a custom legend with `d3.axisLeft` and `d3.axisBottom` shows the species mapping. Data is fetched as CSV and parsed with `d3.csvParse`.

Apr 14, 2024
Loading thumbnail…

Activity6_task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with each circle colored by species (setosa, versicolor, or virginica). The SVG visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, loading data from a GitHub-hosted CSV file. Scales map the data domain to pixel ranges, while circles are joined via `selectAll` and `join`. Axis labels and colored points are rendered in a full-window responsive layout.

Apr 14, 2024
Loading thumbnail…

Activity6_Task2.1

This stacked bar chart displays the percentage distribution of movie ratings across different cartoon genres, with each bar segmented by rating categories such as "below 5.0" or "8.0-9.0." Hovering over a segment reveals the exact percentage for that genre and rating level via a tooltip. The visualization uses D3.js v7 with the `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleLinear` APIs to compute and render the stacked bars as SVG rectangles, while `d3.axisBottom` and `d3.axisLeft` generate the axes. Data is loaded from a CSV file containing genre and rating percentage values.

Apr 14, 2024
Loading thumbnail…

Activity6_q2.1

This stacked bar chart shows the percentage distribution of ratings for various cartoon shows, with each bar divided into five rating categories from "below 5.0" to "Above 9.0." The visualization highlights how ratings vary across shows like Ben 10, Pokémon, and Tom and Jerry, with a hover tooltip revealing exact percentages. Built with d3 v7, the chart uses `d3.stack()` to compute stacked segments, `d3.scaleLinear` for the percentage axis, and `d3.scaleBand` for the categorical genre labels. The SVG renders colored rectangles per rating segment, with mouseover events triggering a custom tooltip that displays the precise percentage per show and rating level.

Apr 14, 2024
Loading thumbnail…

Fork of Activity6_Question2

This stacked bar chart shows the percentage distribution of five rating levels within six product categories, visualizing how category influences ratings. Each bar segment represents a rating range, with hover interactions displaying exact percentages via tooltips. The visualization uses D3 v7 with a stacked layout, ordinal color scaling, and a band scale for categorical positioning. Data is loaded from a CSV file containing pre-calculated proportions, rendered as SVG rectangles with interactive mouse events.

Apr 14, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of five IMDb rating levels across six movie genres, revealing how genre affects audience ratings. Each bar segment represents a rating category, with hover interactions displaying exact percentages via a custom tooltip. The visualization uses D3.js v7 with SVG rendering, employing `d3.stack()` for data stacking, `d3.scaleOrdinal` for color mapping, and `d3.scaleBand` for genre positioning. Data comes from an embedded CSV file, with axes labeled for percentage and genre.

Apr 14, 2024
Loading thumbnail…

Activity6_q1.2

This visualization displays population figures for 20 countries in 2010 as a horizontal bar chart rendered with SVG. The chart uses D3 scales (scaleBand for the y-axis, scaleLinear for the x-axis) to position bars, with axes generated via the AxisBottom and AxisLeft components. Data is loaded from population values in a CSV file, which are multiplied by 1,000, and formatted with D3's format function to abbreviate large numbers as billions.

Apr 14, 2024
Loading thumbnail…

Activity6 Q1.1

This bar chart displays the population of the top 10 countries in the year 2000, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis, `scaleLinear` for the numeric scale, and custom `AxisBottom` and `AxisLeft` components for ticks. Data is loaded via `d3.csv` from a remote GitHub URL, with population values formatted using D3's `format` function. SVG rectangles represent each country's population, with tooltips showing exact formatted values on hover.

Apr 14, 2024
Loading thumbnail…

activity6_task 1

This example shows a horizontal bar chart of population figures for 30 countries in 2020, with a green bar for each country and a blue axis grid. The visualization uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to positions. The bar lengths encode the population data, which is loaded from a remote CSV via D3’s `csv` method, and a native SVG `<title>` element provides tooltips on hover. Axis labels are formatted using D3’s `format` helper to abbreviate large numbers.

Apr 14, 2024