Skip to main content
Log in
A

AP19110020041-Pavan Kumar

@pavanmanam846·15 public vizzes

Loading thumbnail…

Activity 6-2

This area chart visualizes monthly sales data, with the x-axis displaying months and the y-axis representing sales in dollars. Built with D3 v7, the visualization uses `scaleBand` and `scaleLinear` to map the data, while an `area` generator with `curveMonotoneX` creates a smooth filled region. The SVG rendering includes rotated x-axis labels and custom axis titles. Data is loaded from a GitHub Gist CSV file, and the chart is styled with a steelblue fill against a clean white background.

Nov 6, 2024
Loading thumbnail…

Activity 6

This pie chart visualization displays the proportional breakdown of categorical data loaded from a remote CSV file. Constructed with D3.js v7, the SVG graphic uses `d3.pie` to compute arc segments and `d3.arc` for path geometry, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing categorical colors. A legend, including color swatches and labels, is positioned on the left side, while the chart title appears above. The code loads data via `d3.csv` and renders all elements as SVG paths and text nodes.

Nov 6, 2024
Loading thumbnail…

activity6 question-4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 20 car makes. Each circle represents a car make, positioned by horsepower and torque on the x and y axes, with circle size encoding highway MPG and color distinguishing the make. The visualization uses D3 v7 with SVG rendering, featuring a tooltip that displays the car make on hover and a legend for bubble size. The chart is built using `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft`, with smooth opacity transitions on mouse events.

Oct 25, 2024
Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position is determined by its horsepower (x-axis) and torque (y-axis), while the bubble size scales with highway MPG. The chart uses D3.js v7 to render SVG graphics, with color encoding categorical car makes and a custom tooltip providing specific details on hover. It includes legends for bubble size and color, and animates user interactions smoothly.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3 question

This example shows a scatter plot of the Palmer Penguins dataset, displaying flipper length (mm) on the x-axis and body mass (g) on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The code loads CSV data from a GitHub gist and uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` to map the values, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with rotated axis titles. Circles are appended to an SVG group with a margin-based layout, and the color scale assigns distinct pastel colors to each species.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3

This visualization is a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each circle’s color encodes the species: skyblue for setosa, lightgreen for versicolor, and orange for virginica. Built with D3 v6, the code loads CSV data from GitHub, uses scaleLinear and extent for axis scaling, and renders circles as SVG. The left and bottom axes are drawn with axisLeft and axisBottom, while circle radius is fixed, and the chart title is displayed in red.

Oct 25, 2024
Loading thumbnail…

activity6 question3

This example demonstrates a minimal VizHub project that displays the text “Hello VizHub!” centered on a blank page. It shows how to build a simple D3-based web application by importing D3 functions and local ES6 modules. The code uses the D3 select API to target the HTML element with ID "message" and set its text content, while CSS styles control the font size and alignment. A regular expression and a constant variable are also defined but not used in the visualization.

Oct 25, 2024
Loading thumbnail…

activity6 task-3.2

This example displays the classic Iris dataset as an interactive scatter plot, mapping sepal length on the x-axis, petal length on the y-axis, and using different filled shapes (from `d3.symbolsFill`) to distinguish the three species of iris flowers. It loads data from a remote CSV file via `fetch` and parses it with `d3.csvParse`. The visualization is built entirely with D3 v7, using `scaleLinear`, `scaleOrdinal`, and `symbol` to construct the marks, along with custom local modules for drawing axes and a shape legend. The plot resizes to fill the browser window.

Oct 25, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of movie ratings across six genres, with each bar segmented by five rating bands from “below 5.0” to “above 8.5.” The visualization reveals genre-specific trends, such as Horror having a larger share of low ratings compared to Musical. Built with D3 v7, the chart uses `d3.stack()` to compute stacked segments and `d3.scaleLinear` for the percentage axis. Hovering over a bar segment triggers `mouseover` and `mousemove` events, displaying a tooltip with the exact percentage for that genre and rating level. Data comes from an external CSV file, rendered as SVG.

Oct 25, 2024
Loading thumbnail…

Activity_6_Task_1_Q1.1

A horizontal bar chart displays the population of the top 10 countries in the year 2000, using a linear scale for population values and a band scale for country names. The visualization is built with React and D3 v5, rendering SVG elements through reusable components for axes and marks. Data is loaded from a remote CSV file using D3’s `csv` function and formatted with the `format` utility. Each bar includes a tooltip showing the population value via a native SVG `<title>` element.

Oct 25, 2024
Loading thumbnail…

Activity_6_Task_1_Q1.2

This chart presents a horizontal bar chart comparing the populations of 20 countries in 2010, using D3 v5 within a React framework. The bars are rendered as SVG rectangles, with the country names on the y-axis and a linear population scale on the x-axis; hovering reveals a tooltip with the formatted value. The code builds axes using `scaleBand` and `scaleLinear`, formats tick labels with `format('.2s')`, and loads data via `d3.csv` from a GitHub-hosted CSV file. Styling is applied through CSS classes for marks and gridline ticks.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This chart displays the 2020 populations of 30 countries, ranked from largest to smallest by descending value. Each country is represented as a horizontal bar, with bar length proportional to population, and the x-axis labeled “POPULATION-2020” with tick labels formatted in billions. The visualization is built with React and rendered as an SVG using D3’s `scaleBand` and `scaleLinear` for axes, while `AxisBottom`, `AxisLeft`, and `Marks` components draw the gridlines and bars. Data is loaded asynchronously from a remote CSV via D3’s `csv` import.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This example demonstrates a minimal D3.js visualization setup using ES6 modules, loading D3 v5 from UNPKG and importing both local modules and D3 API functions. The code uses `import { select } from 'd3'` to update the text content of a message div, while also defining CSS styling and a regular expression. The visualization renders a simple text message centered on the page, showing how to structure a basic D3 project with separate files for marks, axes, and data loading. The example does not display any actual data or chart elements beyond the styled text output.

Oct 22, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas displays a grid of five overlapping, translucent Buddhist figures rendered as SVG polygons, each filled with semi-transparent random colors and rotated at varying angles. The visualization is built with React, using ReactDOM to render the SVG elements onto a canvas with a floral green background image. The code iterates through a nested array structure to generate multiple polygon layers, though the specific SVG path data for the Buddha shapes is embedded directly in the code.

Oct 19, 2024
Loading thumbnail…

5 Buddha

Five concentric, overlapping diamond patterns render on a black background, with each polygon filled by a random RGB color and rotated 45 degrees. The visualization is built with React and SVG, using nested array maps to generate hundreds of polygonal elements. A large, detailed SVG path depicting the Buddha silhouette is also included, transformed through translation and scaling. The design combines generative randomness with a fixed geometric composition.

Oct 13, 2024