Skip to main content
Log in
M

manju.972@gmail.com

@viteshc·15 public vizzes

Loading thumbnail…

Task 8 T3_Vitesh Chalicheemala

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius reflects highway MPG and its color distinguishes the car make. The chart includes a legend for MPG bubble sizes and a color-coded make legend. Built with D3 v7, it renders as an SVG with hover tooltips showing the make. The code uses d3.csv to load data, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping.

Oct 22, 2024
Loading thumbnail…

Task 8 T3.2_Vitesh Chalicheemala

This example shows a scatter plot of iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis, with species encoded by five distinct D3 symbol shapes and a custom legend. The visualization loads CSV data from a GitHub-hosted file using `csvParse` and renders marks via `d3.symbol`. Axes and legend are built with reusable ES6 modules for `axisLeft`, `axisBottom`, and a custom `shapeLegend`, while scales are created with `scaleLinear` and `scaleOrdinal`.

Oct 22, 2024
Loading thumbnail…

TASK 9&10 Q2 VITESH CHALICHEEMALA

This example presents a multi-series area chart that visualizes rating proportions across different genres, with each genre represented by a distinct colored area. The chart loads CSV data from a GitHub repository, parses ratings for each genre column, and renders overlapping areas using the D3.js v6 library via `d3.area`. It utilizes `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and applies `d3.schemeCategory10` for color coding. The visualization includes axis labels, a legend positioned to the right, and uses `d3.axisBottom` and `d3.axisLeft` to construct the axes, all within an SVG canvas.

Apr 18, 2024
Loading thumbnail…

TASK 9&10 Q1 VITESH CHALICHEEMALA

This pie chart visualizes the distribution of genres among data entries where values exceed 8.5, using a CSV file loaded from GitHub. It renders an SVG with a categorical color scale and a legend, with each slice’s arc and fill determined by `d3.pie` and `d3.arc`. The chart employs D3 v6’s data binding to generate paths and labels, with opacity and stroke styling for clarity.

Apr 18, 2024
Loading thumbnail…

Task 8 T3.1_Vitesh Chalicheemala

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using SVG circles. The code loads data from a GitHub-hosted CSV, parses numeric fields, and uses D3 v6 scales such as `scaleLinear` and functions like `extent`, `axisLeft`, and `axisBottom` to render axes and labels. Circle radii are fixed, while the `rx` and `ry` attributes are set from sepal measurements, though these do not visually alter the circles’ appearance. The visualization fills the browser window and includes custom axis labels.

Apr 12, 2024
Loading thumbnail…

Task 8 T3_Vitesh Chalicheemala

This scatter plot visualizes a car dataset, plotting horsepower against highway MPG, with each point colored by car make. The visualization uses D3 v6 to load CSV data from a GitHub repository and render SVG circles through scales and axes. It employs `scaleLinear` for both axes, `scaleOrdinal` with `schemeTableau10` for categorical colors, and `axisLeft`/`axisBottom` for tick marks. A legend maps color values to makes, and the layout adapts to the window size.

Apr 12, 2024
Loading thumbnail…

Task 8 Q4_Vitesh Chalicheemala

This interactive bubble chart visualizes the classic Iris dataset, exploring correlations between sepal length, sepal width, and petal length across three flower species. Each circle’s x-position represents sepal length, y-position represents sepal width, and radius encodes petal length, while color distinguishes species. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with interpolateTurbo for color mapping, and includes an interactive tooltip that displays species and petal length on hover. Data is loaded via d3.csv from iris.csv, with SVG rendering and a species legend.

Apr 9, 2024
Loading thumbnail…

Task 8 Q2_Vitesh Chalicheemala

This visualization displays the percentage distribution of iris species across the entire dataset using a 100% stacked bar chart. Each horizontal bar represents a species, segmented by color-coded proportions of the four measured attributes. The chart uses D3.js v7 with an SVG rendering approach, employing `d3.stack()` to compute stacked values, `d3.scaleLinear()` and `d3.scaleBand()` for axes, and `d3.scaleOrdinal()` for color mapping. Hovering over any segment reveals the precise percentage contribution of that attribute to the selected species via an interactive tooltip.

Apr 8, 2024
Loading thumbnail…

Task 8 T2_VITESH CHALICHEEMALA

This example visualizes the distribution of IMDb movie ratings across six genres, using a stacked horizontal bar chart where each bar segment represents the percentage of movies falling into one of five rating categories. The chart is rendered with D3 v7 using SVG, with rectangles stacked via `d3.stack()`, positioned by `d3.scaleLinear` and `d3.scaleBand`, and colored via a `d3.scaleOrdinal` with a custom palette. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination. Data is loaded from a CSV file containing precomputed proportions.

Apr 8, 2024
Loading thumbnail…

Task 8_VITESH CHALICHEEMALA

This example demonstrates a minimal VizHub project that integrates D3.js with local ES6 modules. It uses the D3 `select` function to locate a `div` element with the ID `message` and sets its text content to a string imported from a separate JavaScript file. The page loads D3 from UNPKG and displays the greeting "Hello VizHub!" in centered, large type, with styling defined in a linked CSS file.

Apr 8, 2024
Loading thumbnail…

Task 8 Q1.2_VITESH CHALICHEEMALA

A horizontal bar chart displays the 2010 populations of 20 countries, ranked by name along the y-axis with population values extending along the x-axis. The visualization uses React components for structure and D3 v5 scales, including `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. Population data is loaded from a remote CSV file and rendered as SVG rectangles with native tooltips. The chart includes a formatted bottom axis that converts large numbers to abbreviated labels using D3's `format` function, with green bars and blue tick lines on a white background.

Apr 8, 2024
Loading thumbnail…

Task 8 Q1_VITESH CHALICHEEMALA

This horizontal bar chart displays the population of the top 10 countries in the year 2000. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population scale, rendering SVG rectangles for each bar. Data is loaded via D3’s `csv` parser from a GitHub-hosted CSV file, with population values converted from thousands. The visualization includes formatted tick labels (using `format('.2s')`), axis components, and tooltips showing exact population figures via SVG `<title>` elements.

Apr 8, 2024
Loading thumbnail…

Task 8 T2_VITESH CHALICHEEMALA

This example demonstrates the core capabilities of VizHub by displaying the text "Hello VizHub!" in the center of the page. It shows how to load D3.js from a CDN and import specific API functions like `select` from the D3 module. The visualization also illustrates the use of local ES6 modules through the import of a `message` constant from a separate file. The code uses D3’s `select` method to set the text content of the designated HTML div element, with styling controlled by local CSS.

Apr 8, 2024
Loading thumbnail…

Task 8_VITESH CHALICHALICHEEMALA

This horizontal bar chart displays the 2020 population for 30 countries, sorted by country name. Rendered as an SVG within a React component, the visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for tick labels. Data is loaded via D3’s `csv` from a raw GitHub URL. Tooltips show the formatted population on hover.

Apr 8, 2024
Loading thumbnail…

Vitesh Buddha

A dense, decorative Buddha mandala emerges from the chaos of nested loops: three layers of React’s `map()` generate thousands of translucent triangles, each randomized in position, size, and color, then rotated around a common center. The SVG polygons are composed with a vibrant, neon palette—RGB values well beyond standard ranges—creating a saturated, almost hallucinatory glow against a black background. Superimposed on this generative storm is a single, intricate path tracing a serene Buddha silhouette, its organic curves contrasting with the geometric cacophony. The work juxtaposes algorithmic excess with a recognizable icon, inviting contemplation of order within chaos.

Mar 19, 2024