dineshreddy.ravula@gmail.com

@dinred27·17 public vizzes

Assignment 2_Q2

This area chart visualizes annual sales data over time, with a blue filled region under a line that tracks the sales figures across different years. The chart is built using D3 version 7 and renders as an SVG. It loads data from a remote CSV file using `d3.csv` and constructs the visualization by applying a band scale for the x-axis (Year) and a linear scale for the y-axis (Sales). The area is generated with `d3.area`, while axes and labels are added via `d3.axisBottom`, `d3.axisLeft`, and text elements.

Apr 12, 2024

Loading thumbnail…

Assignment 2

This pie chart displays beverage consumption quantities, with each slice labeled by the beverage type. Built with D3.js v7, it loads data from a remote CSV file using `d3.csv`. The visualization uses the `d3.pie()` layout generator and `d3.arc()` for the arc paths, rendered as SVG elements. Each slice is colored using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette, and slice labels are positioned via the arc’s centroid calculation.

Apr 12, 2024

Loading thumbnail…

Assignment 2

This pie chart shows the proportional consumption of different beverages. Each slice is labeled with the beverage name, and the chart is rendered using SVG within a D3.js framework. The visualization fetches data from a remote GitHub gist, parses it using `d3.csvParse`, and computes the pie geometry with `d3.pie` and `d3.arc` APIs. Slice colors come from the `d3.scaleOrdinal` color scale based on the beverage category.

Apr 12, 2024

Loading thumbnail…

question4

This bubble chart visualizes the relationship between vehicle type and fatalities for road incidents, with each circle’s size and vertical position encoding the fatality count. The visualization uses a categorical x-axis for vehicle types and a linear y-axis for fatalities. Built with D3 v7, the chart loads CSV data and renders SVG circles with steelblue fill and 70% opacity. Interactive tooltips display additional incident details, including severity and damage extent, when users hover over individual bubbles.

Apr 5, 2024

Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower and torque for various car makes, using bubble size to represent highway MPG and color to distinguish car brands. Built with D3.js (v7) and rendered as SVG, it reads data from a CSV file and features interactive tooltips that display the car’s make on mouseover. The visualization includes a legend for bubble size (MPG values) and a categorical color legend, with animated hover effects that adjust opacity and stroke width.

Apr 5, 2024

Loading thumbnail…

activity6_question3

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). Using D3 v6, it loads CSV data via `d3.csv`, scales the coordinates with `scaleLinear` and `extent`, and renders circles on an SVG canvas. It also includes axes via `axisLeft` and `axisBottom`, with inverted y-axis scaling and labeled axes. The code processes raw numeric fields—sepal and petal measurements—to position each data point.

Apr 5, 2024

Loading thumbnail…

activity6_task3.2

A scatter plot displays sepal length against petal length for iris flowers, with each point's shape encoding the species category. A legend lists the species names alongside their corresponding symbols. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, and `symbolGenerator` to map data to positions and shapes. Iris data is loaded from a CSV file and parsed with `csvParse`. Axes and labels are rendered with `axisLeft` and `axisBottom`, while the legend is constructed with `symbol` and custom tick elements.

Apr 5, 2024

Loading thumbnail…

Activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, while coloring each circle by species (setosa, versicolor, and virginica). The chart displays all 150 data points using SVG circles, with species-specific colors applied via a switch function. Built with D3 v6, the visualization uses `d3.csv` to load data from a GitHub-hosted CSV, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Axis labels are styled with green text for petal length and sepal length.

Apr 5, 2024

Loading thumbnail…

Fork of Activiy6_question2

This stacked bar chart visualizes how movie genres relate to rating distributions, showing the proportion of each rating category within genres like Pop, Rock, and Jazz. The horizontal bars represent genres, with segments colored by rating level and a tooltip displaying exact percentages on hover. Built with D3 v7, the code uses `d3.stack()` to compute the stacked segments, `d3.scaleBand` for the genre axis, and `d3.scaleLinear` for the percentage scale. Data comes from a static CSV file, and SVG rendering handles the visualization with an interactive tooltip appended to the body.

Apr 5, 2024

Loading thumbnail…

Activiy6_task2

This stacked bar chart shows the percentage distribution of IMDb movie ratings across six genres, with each bar segment representing a rating band from "below 5.0" to "above 8.5". Hovering over a segment reveals the exact percentage for that genre and rating level via a tooltip. Built with D3.js v7, the visualization uses `d3.stack()` to compute stacked segments, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the proportional x-axis. Data comes from a CSV file containing genre, rating thresholds, and their associated proportions. The SVG output uses an ordinal color scale to distinguish the five rating categories and includes axis labels, grid lines, and a title.

Apr 5, 2024

Loading thumbnail…

Fork of Activity6_question1.2

This chart displays the 2010 population estimates for 20 countries as a horizontal bar chart, with countries sorted along the y-axis and population magnitudes along the x-axis. The visualization is built using React and D3 v5, with SVG rendering. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. A tooltip, implemented via an SVG `<title>` element, reveals the precise formatted population value for each bar. The data is loaded asynchronously from a CSV file using D3's `csv` function, and the x-axis labels are formatted using D3's `format` utility.

Apr 5, 2024

Loading thumbnail…

Activity6_question1

This visualization displays the population of ten countries in the year 2000, using horizontal bars sorted by country name along the y-axis and population magnitude along the x-axis. Built with React and D3 v5, it employs `scaleBand` and `scaleLinear` to map data, with SVG rectangles for bar rendering and custom `AxisBottom` and `AxisLeft` components for tick labels. The data is loaded via `d3.csv` from a GitHub-hosted CSV file, and each bar’s tooltip formats population values using D3’s `format` function.

Apr 5, 2024

Loading thumbnail…

Activity6_task-1

This example displays a horizontal bar chart of the top 30 countries by 2020 population, using SVG rectangles scaled by a linear population axis and a categorical country axis. The visualization loads data from a CSV file and formats population values in billions with D3's `scaleLinear`, `scaleBand`, and `format` utilities. React components render the axes and marks, with tooltips provided by SVG titles and blue axis ticks styled via CSS. The chart highlights D3 v5 integration within a React framework, demonstrating basic data loading and declarative chart construction.

Apr 5, 2024

Loading thumbnail…

tutorial1a6

This example demonstrates the basic setup of a D3.js visualization within the VizHub framework. It displays the text "Hello VizHub!" in a large, centered style using a local CSS file. The code imports the `select` function from the D3 library and a custom `message` string from a local ES6 module, then uses `select('#message').text(message)` to render the text. It also includes a simple regular expression and a number variable, illustrating basic JavaScript syntax alongside the D3 API.

Apr 5, 2024

Loading thumbnail…

Activity6_task-1

This example demonstrates a minimal D3.js visualization that displays a centered text message on a webpage. It serves as a template for VizHub projects, showing how to import D3 functions and local ES6 modules. The code uses D3 v5 via UNPKG, specifically the `select` API, to target the message div and set its text content. The page renders the text "Hello VizHub!" using CSS styling from an external stylesheet. The example illustrates basic project structure and module importing rather than any complex data processing or rendering techniques.

Apr 5, 2024

Loading thumbnail…

6 budhas

Six rounded, flower-like buddha silhouettes are displayed as violet SVG paths on a black background, each defined by a large, complex path string within a React component. The visualization uses React and ReactDOM to render static SVG elements, including a grid of overlaid flower images and multiple transformed copies of the buddha path with varying scales and positions. The design relies on hardcoded path data rather than external datasets, emphasizing geometric repetition and ornamental styling.

Apr 4, 2024

Loading thumbnail…

5 budhas

Five buddhas emerge from a chaotic field of randomly generated, semi-transparent polygons. The piece uses React's JSX to declaratively construct SVG polygons, with each point's coordinates and fill color determined by calls to `Math.random()`. The five buddha silhouettes are drawn using detailed SVG `<path>` data, which is overlaid and scaled within the animation. The entire composition is set against a black background, creating a stark contrast between the structured, repeated sacred figures and the abstract, computational noise surrounding them.

Apr 4, 2024