Skip to main content
Log in
R

reachtoshasidhar07@gmail.com

@VenkataShasidharReddy·14 public vizzes

Loading thumbnail…

Activity-VII-Q2(11713131)

This area chart displays the distribution of car origins from the mpg dataset, counting vehicles per origin category. The code fetches a CSV file and aggregates rows by the origin column. Using Chart.js, it renders a line chart with filled background to create an area effect on a canvas element. The chart is configured with custom colors, a title, and a y-axis starting at zero, with responsive rendering disabled to maintain fixed dimensions.

Nov 6, 2024
Loading thumbnail…

Activity-VII-Q1(11713131)

This pie chart visualizes the distribution of car origins from the `mpg.csv` dataset. It counts occurrences of each unique value in the 'origin' column and displays them as proportional slices using Chart.js on an HTML5 Canvas. The code fetches the remote CSV, splits it into rows, and tallies origin frequencies before rendering with semi-transparent colors and a title plugin. The chart is static, with a fixed 400x400 pixel canvas and no interactive features.

Nov 6, 2024
Loading thumbnail…

Activity-VII-Q1(11713131)

This example shows the distribution of cars by their country of origin as a pie chart. It fetches a CSV file from a GitHub Gist, parses the data, and counts occurrences of each origin value. The chart is rendered on an HTML canvas using the Chart.js library, with a white card layout, a legend at the top, and three color-coded slices. The visualization reads the origin column from the seventh field of each row and displays the resulting proportions.

Nov 6, 2024
Loading thumbnail…

Assignment-6_Question-4

This bubble chart visualizes the correlation between number of mentions, engagement rate, and reach for various hashtags. Each circle’s position maps mentions on the x-axis and reach on the y-axis, while its radius encodes engagement rate and its color distinguishes hashtag categories. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `d3.csv`, and event handlers for interactive tooltips. Axes, a legend for engagement-rate sizes, and a color legend are rendered in SVG, with hover effects that increase opacity and display detailed tooltip data.

Oct 25, 2024
Loading thumbnail…

Assignment-6_Activity-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble's position on the x- and y-axes representing horsepower and torque, and its size and color encoding MPG and car make, respectively. Rendered as an SVG using D3 v7, the visualization includes interactive tooltips on hover and legends for bubble size and categorical colors, with the dataset loaded from a CSV file.

Oct 25, 2024
Loading thumbnail…

Assignment-6_Question-3

A scatter plot visualizes the relationship between age and salary in a gender-based occupations dataset, with each point colored blue, pink, or orange to indicate gender. The chart uses D3 v6 with `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes, while interactive tooltips display age, gender, and salary on mouseover. Data loads from a remote GitHub-hosted CSV file, and the visualization includes custom axis labels and a colored legend

Oct 25, 2024
Loading thumbnail…

Assignment-6_Activity-3.2

This example shows a scatter plot of iris flower measurements, with sepal length on the x-axis, petal length on the y-axis, and species encoded by different symbol shapes. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to map data values to positions and shapes, with custom axes and a shape legend drawn via `axisLeft`, `axisBottom`, and a manually constructed legend group. Data is fetched as a CSV from a remote GitHub repository and parsed with `csvParse`.

Oct 25, 2024
Loading thumbnail…

Assignment-6_Activity-3

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Points are colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica), with a fixed radius of 5 pixels. The visualization uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded from a remote CSV URL containing sepal and petal measurements, and rendered as SVG circles. Axis labels are added using SVG text elements. The code also retrieves sepal length and width values for each datum but does not use them for positioning. The chart is sized to the full browser window.

Oct 25, 2024
Loading thumbnail…

Assignment-6_Question-2

This stacked bar chart shows the distribution of Walmart product ratings across six product categories, with each bar segmented by five rating bands from "below 5.0" to "above 8.5". The visualization uses D3.js v7 with SVG rendering, employing the `d3.stack()` and `d3.scaleBand()` APIs to create the horizontal stacked bars from the CSV data. The ordinal color scale maps the rating bands, and a hover tooltip displays the exact percentage for each segment. The chart includes axis labels and a title, with the percentage values formatted to two decimal places.

Oct 25, 2024
Loading thumbnail…

Assignment-6_Activity-2

This stacked bar chart shows the distribution of IMDb movie ratings across five genres, with each bar representing 100% of ratings for that genre, broken down into five rating categories from below 5.0 to above 8.5. Using d3.v7, the visualization employs `d3.stack()` to create the stacked segments, `d3.scaleOrdinal()` for color encoding, and `d3.axisBottom()` and `d3.axisLeft()` for axes. Hovering over a bar segment triggers a tooltip displaying the precise percentage via a `mouseover` event handler. The data comes from a CSV file containing genre and rating percentage columns.

Oct 25, 2024
Loading thumbnail…

Activity-6_Question-1.2

A horizontal bar chart displays the top 20 countries by population in 2010, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to position bars, while `AxisBottom` and `AxisLeft` render the axes. Population data is loaded from a CSV file via `d3.csv`, with tooltips showing formatted values using `d3.format`.

Oct 25, 2024
Loading thumbnail…

Activity-6_Question-1.1

This example shows a horizontal bar chart of the population of the first ten countries in the year 2000, using data from a CSV file loaded with `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous population x-axis, rendering blue rectangles as bars via SVG. React and `d3` APIs manage the component state and data fetching, while tick labels are formatted with `d3.format`.

Oct 25, 2024
Loading thumbnail…

Activity-6_Task-1

This horizontal bar chart displays the top 30 countries by population in 2020, using green bars sorted alphabetically with a tooltip showing the formatted population value. The visualization is built with React, uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.format to convert large numbers into billions. It loads population data via d3.csv from a GitHub-hosted CSV file and renders the chart as an SVG with custom axis components.

Oct 25, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas renders five ornate SVG Buddha silhouettes against a floral background image, arranged in a responsive grid using React and ReactDOM. The code generates a scatter of translucent colored circles via nested array mappings with random coordinates and RGB values, while each Buddha path is drawn with complex vector data using SVG `<g>` transforms. The composition uses a green flower backdrop from an external URL, with CSS grid layout and hover transitions enhancing the visual presentation.

Oct 19, 2024