Skip to main content
Log in
G

guttavenkata745@gmail.com

@guttavenkata745·17 public vizzes

Loading thumbnail…

Activity 7 AreaChart

A D3.js area chart visualizes USA CO2 emissions from 2000 to 2024, with a steelblue filled region showing emission changes over time. The chart loads data from a remote CSV file, parses it using `d3.csv`, and renders the area via `d3.area()` with linear scales for both axes. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while labels and a title provide context.

Oct 29, 2024
Loading thumbnail…

Activity 7 PieChart

This D3.js pie chart displays global internet usage by country, with each slice representing a country and its corresponding number of users. The visualization loads data from a remote CSV file and uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Labels are positioned using a custom `labelArc`, and an HTML legend is built dynamically. The SVG chart is rendered with D3's selection and data-binding methods, while styling is applied through external CSS.

Oct 29, 2024
Loading thumbnail…

Activity6_Task4 Question 4

This bubble chart visualizes smartphone specifications by mapping screen size to the x-axis, camera resolution to the y-axis, and price to bubble radius, with color encoding brand identity. The visualization uses d3.csv to load the smartphone dataset, then employs d3.scaleLinear for axes and sizing, d3.scaleOrdinal with d3.schemeSet3 for categorical colors, and d3.axisBottom and d3.axisLeft to render axes. SVG circles are appended and positioned using the scaled values, with opacity and stroke applied for readability.

Oct 18, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes using a CSV dataset. It employs D3 v7 to render SVG circles scaled by highway MPG, colored by car make, and positioned along linear axes for horsepower and torque. Interactive tooltips display each make on hover, while a legend indicates bubble size and color categories. The chart also demonstrates loading D3 via UNPKG and using a local ES6 module.

Oct 18, 2024
Loading thumbnail…

Task 3 Question3

This scatter plot visualizes the relationship between hours studied and exam scores, with points colored blue for male students and pink for female students. Using D3 v6, the code loads CSV data from a GitHub URL, applies linear scales to both axes, and renders SVG circles. Axes are labeled with formatted tick values, and a legend distinguishes the gender categories. The visualization uses D3's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create an interactive-sized plot that fills the browser window.

Oct 18, 2024
Loading thumbnail…

Activity6_Task3.2

This example demonstrates a scatter plot of the Iris dataset, showing sepal length versus petal length with different point shapes representing species. The visualization loads data from a GitHub-hosted CSV file, parses it with `d3.csvParse`, and renders points using D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbol` generators. A custom shape legend, implemented as an ES6 module, displays the three species with matching symbols. Axes are drawn using `axisLeft` and `axisBottom`, with labels positioned via D3 selection methods.

Oct 18, 2024
Loading thumbnail…

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, showing petal length against petal width while color-coding points by species (setosa, versicolor, and virginica). The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` functions to render axes, with data loaded via `d3.csv` from a GitHub-hosted CSV file. Each circle’s position corresponds to petal dimensions, while its fill color maps to species through a custom marker function. The SVG output also includes rotated axis labels and a red-styled title, with data parsed from the CSV’s numeric columns.

Oct 18, 2024
Loading thumbnail…

Activity6_Task2 Question 2

This example presents a stacked bar chart depicting CO2 emissions by vehicle type (Sedan, SUV, Truck, Motorcycle) and fuel type (Petrol, Diesel, Electric, Hybrid). The visualization uses proportional data from a local CSV file, rendered as SVG rectangles. It leverages D3.js v7 APIs, including `d3.stack` for stacking series, `d3.scaleOrdinal` for color coding, `d3.scaleBand` for categorical axes, and `d3.axisLeft`/`d3.axisBottom` for labeled axes. A custom legend and title complete the chart, with all styling handled via external CSS.

Oct 18, 2024
Loading thumbnail…

Activity6_Task2

A stacked horizontal bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segmented into five rating ranges from below 5.0 to above 8.5. The visualization uses D3.js v7 with the SVG rendering framework, employing `d3.stack`, `d3.scaleBand`, and `d3.axisBottom` to construct the chart. A tooltip, implemented with D3's selection and event handlers, displays the precise percentage for each genre-rating combination on mouseover. The proportional widths of each segment allow viewers to compare rating patterns across genres at a glance.

Oct 18, 2024
Loading thumbnail…

Activity 6_Task 1 Question 1.1

This bar chart displays the top 10 countries by population for the year 2000, using horizontal bars to facilitate comparison. Built with React and SVG, the visualization renders population values on a linear scale, with formatted tick labels (e.g., "1.2B") for readability. The code leverages D3.js's `scaleBand`, `scaleLinear`, `max`, and `format` functions for layout and number formatting, while the data is fetched and processed from a CSV file using D3's `csv` method. The chart includes clear axis labels and a title, all styled with CSS.

Oct 18, 2024
Loading thumbnail…

Activity 6_Task 1 Question 1.2

This example displays a horizontal bar chart of the top 20 most populous countries in 2010, using a categorical y-axis for country names and a linear x-axis for population values. The visualization is built with React and D3 v5, where the `scaleBand` and `scaleLinear` functions handle axis scaling, while custom SVG components (`AxisBottom`, `AxisLeft`, and `Marks`) render ticks and rectangle bars. Data is loaded asynchronously from a remote CSV file via D3’s `csv` function, and tooltips are provided through SVG `<title>` elements. The chart includes styled axes, labels, and a title, with formatting that abbreviates large numbers (e.g., “B” for billions).

Oct 18, 2024
Loading thumbnail…

Activity 6_Task 1 Question 1.6

This example shows a horizontal bar chart of 2020 population estimates for the top 10 countries, with the y-axis listing country names and the x-axis measuring population in billions. It uses React with D3 v5, importing `scaleBand` and `scaleLinear` for scales, and renders SVG via React components. The chart loads CSV data from a GitHub repository using `d3.csv`, formats tick labels with `d3.format`, and each bar includes a `<title>` tooltip showing the formatted population value.

Oct 18, 2024
Loading thumbnail…

activity 6_Task 1

This chart displays the population of 30 countries in 2020 using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG rectangles as marks with native tooltips. Data is loaded asynchronously from a CSV hosted on GitHub via `d3.csv` (not `d3.forceSimulation` or other graph APIs), and population values are preprocessed by multiplying the year-2020 column by 1000. The axes are custom components (`AxisBottom` and `AxisLeft`) using D3 ticks and formatting with `format('.2s')` to display values in billions.

Oct 18, 2024
Loading thumbnail…

Task1

This example demonstrates the VizHub V3 runtime environment’s real-time feedback through a simple “Hello World” text display, where a numeric variable controls the font size. The code exports a `main` function that receives a `container` DIV and writes HTML directly into it using template literals. While the video shows Alt-dragging to modify the value, the code does not implement interactivity itself; it only renders static text with a fixed font size. The example highlights the simplified entry point and hot-reloading capabilities of the VizHub platform.

Oct 18, 2024
Loading thumbnail…

Question3

This visualization displays an intricate, mandala-like Buddha silhouette constructed from hundreds of semi-transparent, randomly colored circles overlaid on a floral background image. Clicking anywhere on the screen spawns temporary colored circles that scale up and fade away after two seconds. The SVG rendering uses React for static circle generation and vanilla JavaScript DOM manipulation for interactive click events. The Buddha path is drawn from a fixed SVG path data string, with generative randomness in circle placement and color values.

Oct 16, 2024
Loading thumbnail…

Question3

This example shows a dense, colorful field of randomly generated, semi-transparent polygons layered over a photographic background. The polygons are created with random coordinates, colors, and opacity, and rotated at a fixed angle, forming an overlapping, chaotic composition. The visualization is rendered in SVG using React and ReactDOM, with polygons generated through nested `Array.map` loops and random values. A secondary, hand-coded Buddha silhouette path is also included, though its contribution is visually obscured by the dominant polygon layer.

Oct 16, 2024
Loading thumbnail…

Tutorial

This example overlays a dense, randomized field of small rotated polygons on top of a large, intricate Buddha outline path, creating a busy, colorful visual collage. The application is built with React and uses ReactDOM to render the scene as SVG elements. It maps over arrays to generate hundreds of polygons, each with random positions, sizes, colors, and rotation transforms, while the Buddha shape is drawn using a complex SVG path string. The black background and high opacity create a vibrant, overlapping effect.

Oct 10, 2024