H

Harsha vardhan reddy Yarmareddy

@Harsha-1718·18 public vizzes

Loading thumbnail…

Assignment2_Question2

This area chart visualizes the consumption of five fuel types—solid, liquid, gas, cement production, and gas flaring—over time, with each category overlaid as a semi-transparent colored area. The chart uses D3 v7 to fetch CSV data from a GitHub repository, parse it into numeric values, and render the areas using `d3.area` paths. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and a separate SVG legend maps colors to labels. The visualization compares consumption magnitudes across categories while the overlapping areas reveal relative trends.

Loading thumbnail…

Assignment2_Question2.1

This visualization displays the annual consumption of different fuel types—solid fuel, liquid fuel, gas fuel, cement production, and gas flaring—as a series of overlaid area charts. The chart uses a time-based x-axis and a linear y-axis to show the magnitude of each fuel source over time. Built with D3 v7, the code loads CSV data from a GitHub repository, parses it, and creates five separate semi-transparent area paths using `d3.area()`, each with its own color, to render the SVG output.

Loading thumbnail…

Assignment2_Question1.1

A pie chart visualizes the distribution of car makes from a CSV dataset, displaying each manufacturer’s share as a colored slice with percentage labels offset outside the chart. Hovering over a slice triggers a tooltip showing the same percentage. Built with D3 v7, the code loads data via `d3.csv`, groups records with `d3.group`, and renders the chart using `d3.pie`, `d3.arc`, and a `d3.scaleOrdinal` color scale with `d3.schemeCategory10`.

Loading thumbnail…

Assignment2_Question1

This visualization is a pie chart that displays the distribution of car types, focusing on the top three most frequent categories from a CSV dataset. The chart shows each car type’s percentage share, with labeled slices and a legend. The data is fetched from a GitHub repository using `d3.csv` and processed to calculate counts and percentages. The pie layout is generated with `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, and SVG elements render the chart and legend.

Loading thumbnail…

JUST FORK

This example demonstrates how to create and position circles within an SVG canvas using D3.js. It shows a data-driven approach where an array of circle objects, each with coordinates, radius, and fill color, is rendered using the `select` function and the `.join('circle')` method with method chaining to set attributes like `cx`, `cy`, `r`, and `fill`. The visualization uses a General Update pattern, allowing the code to run repeatedly without duplicating SVG elements.

Loading thumbnail…

Activity_6_Question 4

A bubble chart visualizes the correlation between population, area, and GDP for various countries. Each circle's x-axis position maps to population, its y-axis to GDP, and its radius to area, with color encoding the country. Interactive tooltips display the exact values for each country on hover. The visualization uses D3.js v7 with linear scales for all axes, an ordinal color scale for countries, and SVG for rendering. It also includes a legend for both area sizes and country colors, with hover effects increasing bubble opacity and stroke width.

Loading thumbnail…

Activity_6_Question 3

This interactive scatter plot visualizes the relationship between age and salary across genders in an income dataset. Each circle represents a person, colored by gender (green for male, yellow for female, red for other), with hover tooltips showing detailed records. The visualization uses d3.csv to load external data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks. SVG circles and event listeners handle mouseover interactions, while the tooltip div transitions opacity to display information. The plot includes labeled axes for salary and age, rendered with custom axis label styling.

Loading thumbnail…

Activity_6_Question 2

This stacked horizontal bar chart shows the distribution of product costs across eight categories, with each bar divided into six price ranges from below $50 to above $1000. The visualization uses d3.stack() to compute the layered segments and d3.scaleBand for the categorical y-axis. d3.axisBottom with custom tick sizes renders the percentage scale, while a custom tooltip appears on mouseover to display exact percentage values. The chart is rendered as SVG using d3.v7, with color scaling via d3.scaleOrdinal and data loaded from a CSV file.

Loading thumbnail…

Activity_6_Question1.2

This example shows a horizontal population bar chart for 20 countries using 2010 data, with bars colored light green and axes labeled in blue. The visualization uses React to render SVG elements, with D3 v5 APIs including `scaleBand` and `scaleLinear` to map categorical and quantitative data. The `csv` function loads data from a GitHub-hosted CSV file, while custom `AxisBottom` and `AxisLeft` components generate ticks. Each bar includes a native SVG `<title>` tooltip displaying formatted population values using D3's `format` function.

Loading thumbnail…

Activity_6_Tutorial 4

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG, scaled linearly via d3.scaleLinear. Color is mapped to car make using a d3.scaleOrdinal with interpolated turbo colors. The SVG includes axes with labels, a size legend for MPG, and a color legend for makes. Interactive tooltips appear on mouseover, showing the make, using d3 event handlers. Data is loaded from a CSV file and animated with D3 v7 transitions.

Loading thumbnail…

Activity_6_Tutorial 3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length with points shaped according to species. The visualization includes labeled axes and a shape legend for the three species categories. Built with D3 v7, the code creates linear scales, applies an ordinal color shape scale using `symbolsFill`, and renders SVG symbols via `symbolGenerator`. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse` before being passed to the chart.

Loading thumbnail…

Activity_6_Tutorial 3.1

This scatter plot visualizes the Iris dataset, showing petal length and petal width for three flower species, distinguished by color. The visualization is rendered as SVG using D3 v6, with axes labeled for petal length and sepal length. The code loads data from a remote CSV via `d3.csv`, scales the x and y values using `scaleLinear`, and creates colored circles for each data point. It uses `axisLeft` and `axisBottom` for the axes and sets the plot to fill the browser window.

Loading thumbnail…

Activity_6_Tutorial 2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of titles falling into five rating brackets. The visualization uses D3.js (v7) to load CSV data and render SVG elements, employing `d3.stack()` for the stacked layout, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Interactive tooltips display exact percentages on hover, while color encoding via `d3.scaleOrdinal()` distinguishes each rating category.

Loading thumbnail…

Activity_6_Question2

This stacked horizontal bar chart displays the percentage distribution of ratings across five business types, from "Less than 2.0" to "More than 5.5". Each bar is segmented into colored sections representing rating categories, using `d3.stack()` for data transformation and `d3.scaleOrdinal()` for color mapping. The chart renders as scalable vector graphics (SVG) with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. Interactive tooltips, implemented with mouseover events, reveal exact percentages per category on hover, while the data originates from the included `data.csv` file.

Loading thumbnail…

Activity_6_Question1.1

This example shows a horizontal bar chart comparing the population of ten countries in the year 2000, using a dataset loaded from a GitHub-hosted CSV file. The visualization uses React components to render SVG elements, with D3 v5 scales (`scaleBand` and `scaleLinear`) handling the positioning and sizing of the bars. Axis components generate tick marks and labels, while circular tooltips appear on hover via SVG `<title>` elements. The chart formats population values with D3's `format('.2s')` to display numbers in billions.

Loading thumbnail…

Activity_6_Tutorial 1

This example displays a horizontal bar chart of the top 30 countries by 2020 population, with each bar labeled by country name and colored light green. The visualization uses React with D3 v5, leveraging `d3.csv` to load data from a GitHub-hosted CSV, `scaleBand` and `scaleLinear` for positioning, and native SVG elements for rendering. Custom axis components format tick labels using D3's `format` helper, converting values to abbreviated “B” units, while tooltips show the formatted population on hover.

Loading thumbnail…

6 Buddha

The visualization displays six overlapping Buddha silhouettes, each rendered with a distinct color and semi-transparent fill, against a background image of green flowers. Built with React and ReactDOM, the SVG drawing uses a series of complex path data to construct each Buddha figure. The code also generates random decorative elements by iterating through arrays, producing small square nodes with randomized positions and RGB colors, while the overall layout is composed through nested map operations that render multiple instances of these shapes.

Loading thumbnail…

5 Buddhas

Drawing on sacred geometry, the visualization depicts five large, repetitive Buddha-inspired forms arranged over a dark background. It uses plain SVG polygons generated through deeply nested, randomized logic to create colorful, overlapping geometric patterns. Built with React, the code leverages `Math.random()` to compute polygon points, fill colors, and transformations for each shape, producing a vibrant, kaleidoscopic composition from simple primitives.