phanisrivinnakota@gmail.com

@Phanisriv·18 public vizzes

Activity - 6_Task - 1

This bar chart displays population data for 30 countries from the year 2010, sourced from a CSV file loaded via d3.csv. Using React with D3 v5, the visualization maps country names to a d3.scaleBand y-axis and population values to a d3.scaleLinear x-axis. SVG rectangles render the marks, with axis components from local ES6 modules, and formatted tick labels using d3.format. Interactive tooltips appear on hover via SVG title elements.

Apr 6, 2024

Loading thumbnail…

Activity-6_Question-4

This bubble chart displays the relationship between average horsepower, average torque, and highway MPG for various car makes. Using D3.js version 7, the visualization maps horsepower to the x-axis and torque to the y-axis, with each make represented by a colored circle sized at a constant radius of 600 pixels. The code loads data from a CSV file and employs `d3.scaleLinear` for both axes, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns distinct categorical colors to differentiate car manufacturers.

Apr 6, 2024

Loading thumbnail…

Activity-6_Task-4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car makes, with each circle's position on the x- and y-axes representing horsepower and torque, respectively, and its radius scaling with highway MPG. The chart uses D3.js v7 to load CSV data, render the SVG, and apply linear scales for axes and bubble size, along with an ordinal color scale assigned per make. Interactive tooltips appear on mouseover, and a legend encodes the MPG scale and color categories.

Apr 6, 2024

Loading thumbnail…

Activity-6_task-4

This bubble chart visualizes the correlation between a vehicle's average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position corresponds to horsepower, its y-position to torque, and its size to highway MPG, while its color uses a categorical scale from `d3.scaleOrdinal` with an interpolated Turbo palette. Data originates from the `bubblechart.csv` file, and the visualization includes interactive tooltips implemented with custom mouse events, alongside size and color legends for reference. The chart is rendered as an SVG using `d3.v7`.

Apr 6, 2024

Loading thumbnail…

Activity-6_Question - 3

A scatter plot shows the relationship between the percentage of movies rated below 5.0 and the percentage rated within the 5.0–6.5 range, across six genres including Documentary, Drama, and Comedy. Each genre is represented by a colored circle, with colors assigned via d3.scaleOrdinal and d3.schemeCategory10. The axes are generated using d3.axisLeft and d3.axisBottom, while the data is parsed from an inline CSV string using d3.csvParse. The plot is rendered as an SVG that fills the browser window, with axis labels styled in green.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Task-3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width while coloring each point by species (setosa, versicolor, or virginica) with distinct fill colors. The plot is rendered as an SVG using D3 v6, loaded via UNPKG, and leverages the `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `join` APIs for data loading, scaling, axes, and circle placement. Data is fetched from a remote GitHub-hosted CSV file.

Apr 6, 2024

Loading thumbnail…

Activity-6-Question-2

This example uses a diverging stacked bar chart to display the breakdown of vehicle types by torque and horsepower. The chart renders as horizontal bars for each vehicle make, with segments colored by rating category. The visualization uses D3 v7 APIs including `d3.stack`, `d3.scaleOrdinal`, and `d3.scaleBand` to construct the layout. Hover interactions reveal precise percentage values via a tooltip. Data comes from a CSV file containing make, horsepower, torque, and highway MPG values, which are transformed into stacked proportions for each bar.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Question - 1.1

This horizontal bar chart displays the population of ten countries in the year 2000, ranked by country name on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-dimension, `scaleLinear` for the numeric x-dimension, and formats tick labels with `format('.2s')` to show values in billions. The data is loaded from a remote CSV file using D3's `csv` function, and the SVG rendering includes tooltips on each bar via the `title` element.

Apr 6, 2024

Loading thumbnail…

Activity-6-question-3

This example demonstrates the core functionality of VizHub, a platform for creating and sharing D3.js visualizations. It loads D3 via UNPKG and uses the `select` API from D3 to set the text content of an HTML element. The visualization also showcases the use of local ES6 modules, importing a message string from `myMessage.js` to display "Hello VizHub!" prominently. The page is styled with a simple CSS rule that centers the message and applies a large font size, resulting in a clean, minimal presentation of the platform's capabilities.

Apr 6, 2024

Loading thumbnail…

Activity-6_task-3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each flower species is distinguished by a unique shape, with a legend detailing the mapping. The visualization uses the D3.js library, specifically employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` to generate the mark paths. The data is loaded from a remote CSV file and parsed with `csvParse`.

Apr 6, 2024

Loading thumbnail…

Fork of Activity - 6_Task-3.1

This scatter plot visualizes the Iris dataset, mapping petal length against petal width for individual flowers, with each point colored by species (setosa, versicolor, or virginica). The plot uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks, rendered as SVG circles. While the code also defines sepal dimensions and attempts to set `rx`/`ry` attributes on circles (which have no effect), the primary visualization clearly shows the petal measurement distribution. The data is fetched from a GitHub-hosted CSV file.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Task-3

This scatter plot visualizes the Iris dataset, showing petal length against petal width with each point colored by species (setosa, versicolor, or virginica). It loads CSV data from a GitHub gist using the D3 v6 `csv` function. The visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to screen coordinates, renders circles as SVG marks, and includes rotated axis labels rendered as SVG text elements.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Task - 2

This stacked bar chart shows the distribution of IMDb ratings across six film genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5”. The visualization uses d3.stack() to create the stacked series and d3.scaleOrdinal with a custom color palette for the categories. D3 scaleBand and scaleLinear position the bars and axes, while mouseover events trigger a tooltip displaying the exact percentage for each segment. Data comes from a CSV file loaded and parsed by D3 v7.

Apr 6, 2024

Loading thumbnail…

Fork of Activity - 6_Question - 1.1

This example displays a horizontal bar chart of population figures for ten countries in 2010. It uses React and D3 v5 to render SVG elements, with axes and marks built from modular components. The `scaleBand` and `scaleLinear` functions position the bars, while `d3.csv` loads data from a remote GitHub CSV file. Tooltips show formatted population values using D3’s `format` function.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Question - 1.2

This example shows the population of 20 countries in 2010, rendered as a horizontal bar chart using React and SVG. The chart is built with D3’s `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values, with axis ticks formatted using D3’s `format` to abbreviate large numbers (e.g., “1.2B”). The data is loaded from a CSV via `d3.csv`, and each bar is a `<rect>` with a tooltip showing the exact formatted population value.

Apr 6, 2024

Loading thumbnail…

Activity - 6_Question - 1.1

Apr 6, 2024

Loading thumbnail…

Activity - 6

This example displays the text “Hello VizHub!” centered on the page. It demonstrates loading D3.js from a CDN and importing a local ES6 module. The code uses D3’s `select` to set the text content of a div, styles the message with CSS, and shows basic module imports and regular expression syntax.

Apr 5, 2024

Loading thumbnail…

6 buddha's

Six overlapping buddha silhouettes render in layered, translucent SVG paths on a floral background image. Each buddha is positioned through hardcoded SVG `transform` translations and scales, with random RGB fills and opacity set at 0.8. The React app maps over nested arrays to generate extra colored dots, while the primary visualization shows the six buddhas composed from complex `path` data. The code uses React and ReactDOM to render the SVG elements directly in the browser.

Apr 4, 2024