H

harsha13638@gmail.com

@nhvv-114·24 public vizzes

Loading thumbnail…

activity 7 , question 2

This interactive scatterplot shows the relationship between age and BMI, with a gradient-filled area chart highlighting BMI trends and a dashed hover line tracking values across the x-axis. The visualization includes a tooltip that displays the exact age, BMI, and category (High or Normal) for the nearest data point, using a bisector to locate the closest value. Built with D3 v7, it loads CSV data and renders SVG elements, incorporating vertical gridlines, labeled axes, and smooth curve interpolation via the `curveCatmullRom` generator. Hover interactions are managed through mouse events that update the tooltip position and visibility.

Loading thumbnail…

Activity 7 , question 1

This visualization shows the distribution of car classes in a dataset using a donut pie chart, with each slice labeled by its percentage and accompanied by a color-coded legend showing category names and counts. The chart is built with D3.js v7, loading CSV data from a GitHub gist, and uses `d3.pie` and `d3.arc` to generate the slices. A categorical color scale maps the four classes, while text labels and the legend are positioned using SVG transformations.

Loading thumbnail…

Activity 7.1

This donut chart visualizes the top 10 most populous countries in 2020, with each slice scaled by population and a hover tooltip showing exact figures and percentages. It uses D3 v7 to load CSV data from a GitHub gist, generate the pie layout with `d3.pie()` and `d3.arc()`, and color slices via `d3.scaleOrdinal`. The chart renders with SVG, includes a loading indicator, error handling, and a detailed legend showing country names and population counts.

Loading thumbnail…

question 1.1

This example shows a horizontal bar chart ranking the populations of ten countries in the year 2000, using a dataset loaded via `d3.csv`. Green rectangles (`<rect>`) represent population values on a linear scale, with countries on a band scale and a formatted tick axis converting values to billions. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` from D3 to compute scales, while `AxisBottom`, `AxisLeft`, and `Marks` are local ES6 modules rendering SVG elements. The chart includes a loading state and SVG tooltips via `<title>` elements.

Loading thumbnail…

Question 1.2

This example shows a horizontal bar chart ranking the top 20 countries by their 2010 population, using a logarithmic-free linear scale from zero to the maximum value. The React code with D3 v5 utilities loads population data from a CSV file, maps it with `scaleBand` and `scaleLinear`, and renders the chart as an SVG with blue tick lines, green bars, and tooltips formatted in billions. The axes and marks are built from custom ES6 modules, with the x-axis labels formatted via `format('.2s')` and the y-axis listing country names.

Loading thumbnail…

question 1.1

A horizontal bar chart ranks the 20 most populous countries by their 2010 population figures. The visualization uses React components to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values to screen coordinates. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, with axis tick labels formatted using D3’s `format` helper. Each bar includes a `<title>` element for native tooltip display, and the chart is styled with green marks and blue axis lines.

Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the populations of 30 countries in 2020, sorted by country name with colored green bars. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with SVG rectangles rendered via the `Marks` component. Population values are loaded from a remote CSV file using `d3.csv`, converted to numbers, and formatted with `d3.format` to abbreviate large numbers (e.g., "1.5B"). Axis labels and ticks are generated by custom `AxisBottom` and `AxisLeft` components, and hovering reveals exact values via SVG `<title>` tooltips.

Loading thumbnail…

Question4

This example visualizes the correlation between movie rating ranges across different genres, plotting bubbles on a scatterplot where the x-axis and y-axis represent the percentage of ratings in the 5.0-6.5 and 7.5-8.5 ranges, respectively. Bubble size encodes the percentage of ratings in the 6.5-7.5 range, while color distinguishes genres. The visualization uses D3 v7 to render SVG elements, with axes formatted as percentages, a tooltip for interactivity, and a custom color scheme. Data is embedded directly in the script.

Loading thumbnail…

Activity6-Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for various car manufacturers. Each circle represents a make, positioned by its horsepower (x-axis) and torque (y-axis), with the circle's size scaled to its highway MPG value and its color mapped by make. Built with d3.v7, the SVG rendering uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and `d3.interpolateTurbo` for the color palette. Interactive tooltips show the make name on hover, and a legend displays MPG values.

Loading thumbnail…

activity6 -question 3

This visualization compares car performance metrics using a scatter plot of horsepower against highway MPG, with points colored by car category (Economy, Standard, Luxury, Sports) and a legend. It loads car data from a CSV file and uses D3 v7 with SVG rendering to create the chart, including axes, labels, and a title. The example demonstrates basic D3 scales, axis generation, and data binding for circular marks.

Loading thumbnail…

Activity6_task3.2

This scatter plot displays the relationship between sepal length and petal length for Iris flowers. The visualization maps petal length on the y-axis, sepal length on the x-axis, with species differentiated by distinct symbol shapes. A legend indicates which shape corresponds to each species. The code uses d3's `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` APIs to construct the plot. Data is loaded from a remote CSV file containing the classic Iris dataset, fetched and parsed with `fetch` and `csvParse`.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping sepal length and width on the axes while coloring each point by species. The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each flower is rendered as an SVG circle with a fixed radius, positioned according to petal length and width, while sepal dimensions and species determine the circle’s fill color. Data is loaded from a remote CSV file on GitHub, and the SVG canvas fills the browser window.

Loading thumbnail…

question 2

A horizontal stacked bar chart displays the average performance metrics—horsepower, torque, and highway MPG—for various car makes, sorted by total performance. The visualization uses Chart.js with a canvas rendering and parses the `bubblechart.csv` data via PapaParse. The bars are color-coded by metric type (light pink, light blue, turquoise) and grouped by make, offering a comparative view of performance characteristics across automotive brands.

Loading thumbnail…

Activity 6_Task 1

This interactive bar chart displays the 2020 population figures for 30 countries, using horizontal bars to rank each nation along a linear scale. The visualization employs React to manage the SVG rendering, with D3 v5 handling data loading, scales, and axis generation through functions like `scaleBand` and `scaleLinear`. Population data is fetched from a CSV file and formatted using D3's `format` utility, converting values to billions for tooltips. The chart features blue tick lines, green bars, and a Poppins font, with the y-axis listing country names and the x-axis labeled “POPULATION-2020.”

Loading thumbnail…

Fork of Activity6_Task2

This visualization shows the distribution of movie ratings across six genres as a stacked bar chart, with each bar representing a genre and segments showing the percentage of films in five rating categories from “below 5.0” to “above 8.5.” The chart highlights how genres like Documentary tend toward higher ratings while Action skews lower. Built with D3.js v7, the SVG uses `d3.stack()` for stacked segments, `d3.scaleOrdinal` for colors, and `d3.axisBottom` for the percentage axis. Hovering over a segment triggers a tooltip that displays the precise rating percentage using `d3.select` and the `d3.format` function. Data comes from the embedded CSV file.

Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, where each bar's segments represent the percentage of ratings falling into five discrete levels from "below 5.0" to "above 8.5." Hovering over a segment reveals a tooltip with the exact percentage for that genre and rating level. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. The chart is rendered as SVG, with data loaded from a CSV file containing computed rating proportions per genre.

Loading thumbnail…

Fork of Activity6_Task2

This stacked bar chart displays the distribution of IMDb movie ratings across six genres, showing the proportion of films within five rating brackets from “below 5.0” to “above 8.5”. Each genre’s bar segments sum to 100%, and hovering over a segment reveals its exact percentage. The visualization uses D3 v7’s `d3.stack()` for data stacking, `d3.scaleOrdinal` for color encoding, and `d3.scaleLinear` and `d3.scaleBand` for positioning. Data comes from a CSV file with pre-aggregated percentages, rendered as SVG with a custom tooltip for interaction.

Loading thumbnail…

Activity6_Task2

This example demonstrates how to integrate D3.js v5 into a VizHub project using ES6 modules. It loads D3 from a CDN and uses the `select` function to update the text content of a `div` element. The visualization also shows the import of a local ES6 module, `myMessage.js`, which exports a string variable, and applies styling through an external CSS file. The code is a minimal scaffolding example illustrating modular code organization with D3 and local ES6 imports.

Loading thumbnail…

Fork of Fork of Activity 6_Task 1

This example shows a horizontal bar chart of population totals for 30 countries in 2020. The chart uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` mapping country names to bar positions and population values to bar widths. Axes are generated by custom React components (`AxisBottom`, `AxisLeft`) that call `xScale.ticks()`. Tooltips appear via SVG `<title>` elements, and population data is loaded from a remote CSV using D3’s `csv` function.

Loading thumbnail…

Fork of Activity 6_Task 1

This example displays a horizontal bar chart of population totals for 30 countries in 2020, using a bar length to encode each country’s population magnitude. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, and `csv` to load data from a GitHub-hosted CSV file. Rendered as SVG, it includes custom axis components, a formatted tick label using `format('.2s')`, and tooltips via the `<title>` element.

Loading thumbnail…

6 buddhas

Six identical Buddha silhouettes overlap and scatter across a flower-patterned background, each rendered as an SVG path with randomized positioning, scale, and translucent colors. Built with React and ReactDOM, the visualization generates multiple copies of the path data via nested array maps, applying random RGB fill values and opacity through JSX attributes. The SVG viewport spans 960 by 1000 pixels, with each Buddha group transformed using translation and scaling.

Loading thumbnail…

6 budhas

Six buddha-like figures emerge from a flat, abstract grid of cube-mapped points, each rendered as a rotated, semi-transparent polygon. The composition uses the same source data across six faceted, geometric clusters, creating a symmetrical, kaleidoscopic pattern. Built with React and rendered as SVG, the visualization maps a three-dimensional cube function onto a two-dimensional plane, with each polygon’s fill color and opacity derived from random values. The code constructs the shapes through nested `map` iterations and `polygon` elements, applying a uniform rotation transform.

Loading thumbnail…

6 budhas

A visualization titled "6 budhas" renders six overlapping Buddha figures as SVG paths against a black background, with red radial lines and randomly positioned and colored circles. The React app uses ReactDOM to render circles with randomized spatial coordinates, radii, and RGB fill values, while the Buddha shapes are drawn via complex SVG path data. The visualization relies on React's component structure and SVG elements to produce a layered, abstract composition.

Loading thumbnail…

5 Buddhas

Five overlapping triangular buddha figures in vivid colors float over a black background, each built from hundreds of semi-transparent polygons rendered with React and SVG. The application maps nested arrays to generate diamond-shaped elements with randomized coordinates, sizes, rotations, and RGB fill values, creating a dense, kaleidoscopic composition. A large geometric path traces a buddha silhouette, while repeated transformations and opacity settings layer the forms for visual depth.