Skip to main content
Log in
H

HarinathChakali33@gmail.com

@C-Harinath123·38 public vizzes

Loading thumbnail…

scatter plot and area chart

This example combines a scatter plot and an area chart to visualize COVID-19 data for Indian states and union territories. The scatter plot maps confirmed cases on the x-axis and deaths on the y-axis, with each circle representing a data point. Tooltips provide detailed state-specific information on hover, implemented via the `d3.select` and `d3.csv` APIs. The area chart, rendered with SVG, displays the data's distribution using D3 scales and axes. The code uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the charts.

Apr 26, 2024
Loading thumbnail…

covid-19 bar chart

This bar chart displays total COVID-19 case counts for different countries, with bars colored using a categorical palette and labeled with case numbers. It shows tooltips on hover containing country and total case information. The visualization uses D3 v7 to build the SVG, employing `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.schemeCategory10` for bar colors. The underlying data is embedded directly in the source code.

Apr 26, 2024
Loading thumbnail…

covid deaths

This example displays a bar chart of total COVID-19 deaths for fourteen countries, with a steelblue bar per nation and a numeric label above each bar. The chart uses D3 v7’s `scaleBand` and `scaleLinear` to map countries and death counts, while `d3.axisBottom` and `d3.axisLeft` render the axes. Interactive tooltips appear on mouseover, showing the country name and formatted death total. The visualization is rendered as an SVG, with data hard-coded in the script.

Apr 26, 2024
Loading thumbnail…

population per year_10

This visualization compares population data across countries for 1980, 2000, 2010, and 2022. It shows the relationship between 1980 and 2022 populations via a bubble chart, with circle size encoding the 2022 value, alongside a grouped bar chart breaking down each country's figures for all four years. The code uses D3 v7 APIs such as `d3.csv`, `d3.select`, `d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleBand`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to render SVG charts. Data is loaded from a remote CSV file, and tooltips are added via SVG `<title>` elements.

Apr 26, 2024
Loading thumbnail…

population density_9

This example presents two side-by-side SVG charts analyzing population data from a CSV file loaded from GitHub. A scatter plot maps population density per square mile against growth rate, with circle size proportional to 2023 population, while a bar chart displays total population per country. Both charts include interactive tooltips and axis labels. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`/`d3.axisLeft`, rendering entirely with SVG elements.

Apr 26, 2024
Loading thumbnail…

population per year_10

This example visualizes population data per year using a simple D3.js setup. It loads D3 v5 via UNPKG and uses the `import` statement to access the `select` function from the D3 module. The code also imports a local ES6 module to display a text message, rendering it to a styled div element. The visualization demonstrates basic module loading and DOM manipulation with D3, though no actual population data or chart is rendered.

Apr 26, 2024
Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub presents two D3.js charts analyzing population data from a CSV file: a bubble chart comparing populations in 1980 against 2022, and a grouped bar chart displaying population values across multiple years. The visualization uses `d3.csv` to load the data, `d3.scaleLinear` for axes and `d3.scaleSqrt` for bubble sizing, with both charts rendered as SVG elements. Axes are added via `d3.axisBottom` and `d3.axisLeft`, while the bar chart employs `d3.scaleBand` and a categorical color scale. The code also demonstrates importing from D3 and local ES6 modules, with the message displayed using `d3.select`.

Apr 26, 2024
Loading thumbnail…

task_9&10_question2

This visualization shows how movie ratings are distributed across genres using a stacked area chart, with each genre on the x-axis and percentage of films falling into rating buckets (below 5.0 to above 8.5) on the y-axis. The chart uses d3.stack to compute the stacked series and d3.area with d3.curveBasis to render smooth areas for each rating category. It sets scales with d3.scaleBand and d3.scaleLinear, and adds axes via d3.axisBottom and d3.axisLeft. The data is embedded directly in the code and rendered as SVG.

Apr 22, 2024
Loading thumbnail…

Task_9&10_questions_2

This area chart displays the distribution of movie ratings across six genres, with each genre’s proportional share of five rating categories stacked over the rating scale. The visualization uses D3.js v7 with a stacked area generator, `d3.stack()`, `d3.area()`, and `d3.scalePoint()`/`d3.scaleLinear()` for axes. Data is loaded from a remote CSV via `d3.csv()`, and the SVG render includes gridlines from axis tick marks, colored genre regions, and a legend listing each genre.

Apr 18, 2024
Loading thumbnail…

Task_9&10_question1

A pie chart visualizes the distribution of movie genres by the proportion of films rated above 8.5, using data parsed from an inline CSV string with d3.csvParse. Six genres (Documentary, Drama, Comedy, Romance, Animation, Action) are encoded as colored arcs generated by d3.pie and d3.arc, with each slice labeled by its genre name. A legend built with SVG rect and text elements maps the ordinal color scale to genres, while the chart renders as static SVG within a styled container.

Apr 18, 2024
Loading thumbnail…

Task_9_questions

This pie chart visualizes the average ratings of six movie genres, with each slice derived from the sum of rating-band percentage values. Driven by client-side `d3.csv` data loading, the visualization uses D3’s `pie` layout and `arc` generator to construct the SVG paths. A sequential color scheme via `d3.scaleOrdinal` and `d3.schemeSet3` differentiates genres, with labels positioned using `arc.centroid` to display the computed average rating. A static legend, built with SVG rectangles and text, maps each color to its genre.

Apr 12, 2024
Loading thumbnail…

Activity_9_task_9

This animated scatter plot cycles through pairs of Iris flower measurements, highlighting sepal length on the y-axis while rotating through petal width, sepal width, petal length, and sepal length on the x-axis. Circles are color-coded by species (setosa, versicolor, virginica) using a legend. Built with D3 v6, it loads CSV data from GitHub, uses local ES6 modules for a reusable `scatterPlot` function, and leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with a `setInterval` driving the axis updates.

Apr 12, 2024
Loading thumbnail…

task_4_questions

This bubble chart visualizes the prevalence of AIDS across six of the most-infected countries, plotting years on the x-axis, the number of individuals living with AIDS (in thousands) on the y-axis, and new diagnoses as bubble radius. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.extent` for domain calculation, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.format` for number labeling. Data comes from the CORGIS AIDS dataset, provided by UNAIDS. The chart includes a legend for both bubble size and country-specific colors, with side scrolling required to view the full visualization.

Apr 11, 2024
Loading thumbnail…

activity_8_task_4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position is determined by its horsepower and torque, while its size represents highway MPG, and its color distinguishes the vehicle manufacturer. The chart includes a legend for bubble size and make color. The visualization is built with D3.js v7, using SVG with interactive tooltips that display a car's make on hover.

Apr 11, 2024
Loading thumbnail…

activity_6_task# questions

This example visualizes the classic Iris dataset as a scatter plot, with petal length on the horizontal axis and sepal length on the vertical axis. Each flower’s measurements are represented as a circle, using the raw data fetched from a GitHub Gist via `d3.csv` and parsed with custom row-handling logic. The visualization leverages D3 v6’s `scaleLinear` to map data values to pixel coordinates, `axisLeft` and `axisBottom` for axes, and the `.join` operator to efficiently bind the marks to SVG circles. The chart fills the entire browser window, using `window.innerWidth` and `window.innerHeight` for sizing.

Apr 11, 2024
Loading thumbnail…

activity_6_task_3questions

A scatter plot displays the relationship between acceleration and top speed for various car makes, with each point colored by its manufacturer using a categorical color scheme. The D3.js code loads data from a CSV file, applies a linear scale to both axes, and renders circles on an SVG canvas. The visualization includes labeled x and y axes, with color differentiation achieved through `d3.scaleOrdinal` and `d3.schemeCategory10`.

Apr 11, 2024
Loading thumbnail…

Activity_6 task4

A bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. The visualization uses D3.js (v7) with SVG and animation, reading data from a CSV file. Bubble position maps horsepower and torque, while bubble size and color encode highway MPG and car make, respectively. Interactive tooltips appear on mouseover, showing the car make. The chart includes legends for both bubble size (MPG) and color-coded makes, rendered through D3's `scaleLinear` and `scaleOrdinal` APIs.

Apr 11, 2024
Loading thumbnail…

activity_6_task3_questions

This example shows a scatter plot of iris flower measurements, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded by symbol shapes and a legend. The visualization is built using D3 v7, employing `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbolGenerator` to render marks. Data is loaded asynchronously from a CSV file via `csvParse`, and the chart includes custom axes and shape legend modules. The rendering updates when the window resizes.

Apr 11, 2024
Loading thumbnail…

activity_6_task3

This example presents a scatter plot of the Iris dataset, visualizing the relationship between petal length on the x-axis and petal width on the y-axis, with circles colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. The chart also encodes sepal length and width as circle radii properties on the SVG elements. It loads CSV data from a GitHub repository, parses numeric fields, and uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to render axes and circles in an SVG canvas sized to the browser window.

Apr 11, 2024
Loading thumbnail…

activity_6 question2

This example presents a stacked horizontal bar chart that visualizes the distribution of low, moderate, and excellent product ratings as percentages, with each bar segment representing a rating category. The chart uses D3 v7's stack, scaleLinear, scaleBand, and axisBottom APIs to construct the visualization from a local CSV file. Interactive tooltips display the exact percentage of each rating when hovering over a segment, achieved through event listeners that calculate the value from the underlying data. SVG rendering handles the output, and the chart is enhanced with custom styling from an external stylesheet.

Apr 11, 2024
Loading thumbnail…

activity_6task2

This example shows a stacked bar chart of IMDb movie ratings across six genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" on a percentage scale. The visualization uses D3 v7 to load CSV data, stack series with `d3.stack`, and render SVG rectangles with `d3.scaleOrdinal` for color encoding. Interactive tooltips appear on mouseover, and axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the data sourced from the included CSV file.

Apr 11, 2024
Loading thumbnail…

Activity_6 question_1.2

This horizontal bar chart displays the populations of 20 countries for the year 2010, sorted by country name. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from a CSV file loaded via `d3.csv`. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components, with bars colored light green and tooltips showing formatted population values.

Apr 11, 2024
Loading thumbnail…

Fork of Activity_6 question_1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars scaled by population value. Built with React and D3 v5, the visualization loads CSV data via `d3.csv` and renders as an SVG. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis, with tick marks and labels generated by custom components.

Apr 11, 2024
Loading thumbnail…

Activity_6 task 1

This example displays a horizontal bar chart ranking the populations of 30 countries for 2020, with country names on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom React components render the axes and marks as SVG rectangles. Population data comes from an external CSV file, formatted using D3’s `format` function to display values in billions. Hovering over any bar reveals its exact value through a native SVG `<title>` tooltip.

Apr 11, 2024
Loading thumbnail…

Activity_6task2

This example displays a centered “Hello VizHub!” message using D3.js v5, loaded via UNPKG. It demonstrates importing the `select` function from the `d3` module and a local ES6 module containing the message text. The code sets the text content of a `div` element with the ID `message` and applies heavy styling through a linked CSS file. It also declares unused variables, including a regular expression, though these do not affect the visible output.

Apr 11, 2024
Loading thumbnail…

Activity_8_task_1

This visualization displays a horizontal bar chart of 2020 population data for various countries, allowing viewers to compare values at a glance. The chart uses a band scale for countries along the y-axis and a linear scale for population on the x-axis, with axis labels formatted using `d3.format`. The visualization is built with React and D3 v5, rendering SVG elements through reusable components like `AxisBottom`, `AxisLeft`, and `Marks`. Styling applies blue grid lines, green bars, and a custom Poppins font, with data loaded via a custom `useData` hook.

Apr 10, 2024
Loading thumbnail…

Activity_6_task_1

This example demonstrates a minimal HTML page that displays a large, centered text message. The page uses plain CSS to style the message with a specific font size and text alignment, while the content itself is static HTML. It serves as a basic starter template for experimenting with web technologies, using no external libraries or data sources, and relies solely on standard HTML and CSS for its rendering.

Apr 10, 2024
Loading thumbnail…

Activity_6 task2

This example visualizes IMDb movie ratings by genre as a stacked horizontal bar chart, showing the proportion of titles falling into five rating brackets from below 5.0 to above 8.5. The chart uses d3.stack with d3.scaleOrdinal for color encoding and d3.scaleBand for the categorical genre axis, rendering SVG rectangles per segment. Interactive tooltips display exact percentages on hover using d3.select and mouse event handlers. Data comes from a CSV file with pre-aggregated genre-wise rating distributions.

Apr 10, 2024
Loading thumbnail…

Activity_6_task1

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with each bar labeled by country name and values formatted in billions. The visualization uses React with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis), rendering SVG rectangles via the Marks component. Data is loaded as CSV from a GitHub repository and processed with d3.csv, with population values multiplied by 1000. The chart includes axis components for bottom and left ticks, plus an "POPULATION-2020" axis label.

Apr 10, 2024
Loading thumbnail…

ACTIVITY_6_TASK1

This example demonstrates a minimal VizHub project that initializes a D3.js visualization by setting the text content of a designated HTML element. The code imports the `select` function from D3 v5 and a custom message from a local ES6 module, then applies it to render the text “Hello VizHub!”. Styling is handled via an external CSS file, and the project relies on loading D3 from a CDN.

Apr 9, 2024
Loading thumbnail…

Fork of ACTIVITY_6_TASK1

This example demonstrates a minimal Hello World visualization built with D3.js v5 and an ES6 module. It uses `select` from D3 to set the text content of a `div` element, displaying “Hello VizHub!”. The code imports a local `message` constant from `myMessage.js` and also defines an unused regular expression. The HTML page loads D3 via UNPKG and applies centered, large-font styling through `styles.css`. It primarily shows basic DOM manipulation with D3, not a data-driven chart.

Apr 9, 2024
Loading thumbnail…

ACTIVITY_6_TASK1

This example demonstrates how to integrate D3.js with ES6 modules and local CSS in a VizHub project. It loads D3 version 5 from UNPKG and uses the `select` API to target the `#message` div, setting its text content from a custom local module. The visualization is minimal, displaying a static text message centered on the page, with a regular expression and numerical constant defined but unused. The rendering relies on standard HTML DOM manipulation rather than graphical data visualization techniques.

Apr 9, 2024
Loading thumbnail…

Activity_6_task_1

This bar chart displays the population of 30 countries in 2020, sorted by country name along the y-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a CSV file via D3's `csv` function, with population values formatted using `d3.format` to abbreviate large numbers. The SVG rendering includes custom axes, tooltips via `<title>` elements, and a green fill for each bar.

Apr 9, 2024
Loading thumbnail…

Activity_6

This example presents a horizontal bar chart visualizing the 2020 population of various countries. The chart uses a diverging bar layout, with countries listed on the y-axis and population values on the x-axis, rendered as an SVG within a React component. It leverages D3 v5 modules including `scaleBand`, `scaleLinear`, `max`, and `format` to compute scales and format axis tick labels with a 'B' suffix for billions. The data is loaded asynchronously via a custom `useData` hook, and the visualization includes labeled axes with a "POPULATION-2020" title.

Apr 9, 2024
Loading thumbnail…

Activity_6 task 1

This example renders a simple text message, "Hello VizHub!", centered on a plain web page. It demonstrates the fundamental integration of D3.js v5 into a VizHub project by loading the library via the UNPKG CDN and using the `d3.select` API to set the content of an HTML `<div>` element. The code also showcases local ES6 module imports, pulling the displayed string from a separate `myMessage.js` file, and applies basic text styling through an external CSS file. The visualization itself is minimal, serving primarily as a template for D3 project structure.

Apr 9, 2024
Loading thumbnail…

Activity-6_task_1

This example demonstrates how to import D3.js and local ES6 modules within a VizHub project. It uses D3’s `select` function to set the text content of a `#message` div, displaying “Hello VizHub!”. The page loads D3 v5 from UNPKG via a script tag in `index.html`, while `index.js` pulls in `select` from the `d3` package and a custom `message` constant from `myMessage.js`. Styling is applied through an external CSS file, showing a minimal modular setup.

Apr 9, 2024
Loading thumbnail…

5 Buddhas

This visualization, rendered with React and SVG, presents a generative, kaleidoscopic mandala of five overlapping Buddha-like forms. The piece layers thousands of randomly generated, semi-transparent polygons in a dense, radial arrangement. Each polygon’s position, color, and rotation are derived from a grid of numeric values (A) via randomized calculations, producing a vibrant, chaotic interplay of translucent shapes over a black background. A central, meticulously detailed Buddha silhouette anchors the composition, while the surrounding generative geometry creates a sense of depth and infinite repetition. The work blends structured iconography with algorithmic randomness, resulting in a visually rich and contemplative piece.

Mar 17, 2024
Loading thumbnail…

5 Buddhas

Five translucent Buddha silhouettes overlap in a dark SVG canvas, with each figure positioned at a different scale and location to create depth. The backdrop is rendered in black, while each Buddha is filled with randomized red, green, and blue channels at low opacity, producing layered, multicolored forms. In addition, a dense field of small, semi-transparent circles—each with random coordinates and colors—overlays the composition, adding texture and visual noise. The 20-level nested loops in the React code generate a scattered constellation of dots that floats above the repeating Buddha paths, creating a striking contrast between geometric precision and organic randomness. This piece explores the interplay between repetition, color variability, and sacred geometry within a generative art context.

Mar 17, 2024