G

gnitishreddy0245@gmail.com

@nithish0301·18 public vizzes

Loading thumbnail…

activity7 question2

This example visualizes customer churn from a Telco dataset, showing the distribution of customer tenure (in months) split by churn status. Two overlapping area charts compare the counts of churned versus non-churned customers across tenure durations. The visualization loads data via `d3.csv`, preprocesses it using `d3.rollup`, and renders SVG areas with `d3.area`, scaled axes via `d3.scaleLinear`, and an ordinal color scale. A legend distinguishes the two categories, with labels applied directly to the chart.

Loading thumbnail…

actvity 7 .1 q1

A pie chart displays the distribution of customer churn, categorizing data into two segments with a legend and percentage labels. The visualization uses D3.js v6 to fetch a CSV dataset from GitHub, processes the data with d3.rollup and d3.sum, and renders the chart using d3.pie and d3.arc. Interactive tooltips appear on mouseover, showing category and count, with colors and white text for contrast.

Loading thumbnail…

Activity6_task4

This interactive bubble chart displays the correlation between average horsepower, torque, and highway MPG for sixteen car makes. Each bubble’s size encodes highway MPG, while its color distinguishes the car manufacturer, with hover tooltips revealing the make. The visualization uses D3 v7 to load CSV data, create linear scales for axes and bubble radius, and render SVG elements with an ordinal color scale for legend mapping.

Loading thumbnail…

Activity6_task4

This example demonstrates a minimalist "Hello World" visualization that renders text at a large, fixed font size using the VizHub V3 Runtime Environment’s `main` function, which receives a container element and sets its inner HTML. The code uses plain HTML and inline CSS to center the text, with no external libraries or data sources. It highlights the runtime’s simplified entry point and real-time editing capability, where holding the Alt key and dragging the number adjusts the font size interactively.

Loading thumbnail…

Activity6_Question3_1

This scatter plot visualizes automobile data from an auto-mpg.csv file, mapping horsepower on the x-axis and weight on the y-axis. Each data point uses a distinct symbol shape and color to represent the number of cylinders (3, 4, 5, 6, or 8). The visualization is rendered as SVG using D3 v6, with axes, labels, and a bottom legend created through d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal color and shape scales. A legend with corresponding shapes identifies each cylinder category.

Loading thumbnail…

ACTIVITY6_TASK3

This example displays the Iris dataset as a scatter plot with sepal length on the x-axis and petal length on the y-axis, using distinct symbols to represent the three iris species. It demonstrates custom visualization components built with d3.v7, including a reusable scatter plot module, axis rendering, and a shape legend. The code loads data from a remote CSV file using d3.csvParse and employs d3.scaleLinear, d3.scaleOrdinal, d3.symbol, and d3.axisLeft/axisBottom to construct the chart.

Loading thumbnail…

Activity6_Question2_3

This stacked bar chart compares home and away cricket match wins across teams, using horizontal bars where each team’s total wins are segmented into two colored parts. The visualization loads CSV data from GitHub, employs d3.stack for data stacking, and uses D3 v7 with SVG rendering to draw the chart, including axes, labels, a legend, and a tooltip that shows team and win-type details on hover.

Loading thumbnail…

Activity6_Question2_1

This example demonstrates the VizHub V3 runtime environment’s "Hello World" template, which serves as a blank slate for interactive coding with continuous hot reloading. It renders a single line of text whose font size can be adjusted live by holding the Alt key and dragging the numeric value directly in the editor. The code exports a `main` function that takes a container element and sets its inner HTML, showing how the platform eliminates the need for an `index.html` file. The visualization uses no external libraries, relying solely on the container’s `clientWidth` and `clientHeight` properties for layout.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the proportion of films within rating brackets from below 5.0 to above 8.5. The chart uses d3.stack() to compute stacked series and d3.scaleOrdinal for color mapping. Interactive mouseover events update a tooltip displaying the exact percentage for each genre-rating combination, while d3.axisBottom and d3.axisLeft provide labeled scales. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Activity6_Task2

This example demonstrates the VizHub V3 runtime environment's interactive development workflow, showing a "Hello World" message with a font size that can be adjusted in real time by holding the Alt key and dragging on the numeric value in the editor. The `main` function, exported from `index.js`, receives a container DIV and uses its inner HTML to render the text with inline CSS styling, with the font size defined as a plain JavaScript variable. This serves as a minimal starting point for building more complex visualizations with the platform's continuous hot reloading and widget-based controls.

Loading thumbnail…

Activity6_Question1.1

This visualization is a horizontal bar chart that displays the population of ten countries in the year 2000. The chart ranks the countries by population, with bars extending from the left axis, and it uses a tooltip to show the exact population value for each bar. The visualization is rendered as an SVG using React and D3 v5. The code uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data loaded via `d3.csv` from a remote GitHub source. The `AxisBottom`, `AxisLeft`, and `Marks` components are custom React components that generate ticks and rectangles for the chart.

Loading thumbnail…

Activity6_Question1.2

This example shows a bar chart of population sizes for 20 countries in 2010, with each country listed along the y-axis and population values extending horizontally. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis, `scaleLinear` for the numeric scale, and SVG `rect` elements for the bars. Data is loaded asynchronously via `d3.csv` from a GitHub repository, and axes are rendered with custom components using D3’s tick formatting to abbreviate large numbers.

Loading thumbnail…

Activity6_Question1.2

This example shows the foundational "Hello World" for the VizHub V3 Runtime Environment, rendering a customizable text message. It exports a `main` function that receives a `container` DIV, using that element's properties to set its inner HTML. The code directly sets a font size within a styled div, demonstrating the new simplified runtime. This setup highlights the platform's shift away from an `index.html` file toward a purely function-based entry point that supports continuous hot reloading.

Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the population of 30 countries in 2020, ordered alphabetically from top to bottom. Each green bar’s length represents population, with a tooltip showing the exact value on hover. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` for positioning, while `csv` loads data from a GitHub-hosted CSV file. SVG rendering includes custom `AxisBottom` and `AxisLeft` components to draw axes with labeled ticks.

Loading thumbnail…

Activity6_Task1

This example demonstrates the VizHub V3 runtime’s interactive hot-reloading capability through a minimal “Hello World” visualization. The main function sets the container’s inner HTML to display the text using an inline style with a font size of 217 pixels. Holding the Alt key and dragging the numeric value in the editor updates the font size in real time, showcasing the platform’s immediate feedback loop for code changes. No external libraries are used.

Loading thumbnail…

Fork of budha 2

The visualization depicts a large, monochromatic line-art portrait of Buddha, overlaid on a floral background image. It uses React and ReactDOM to render an SVG canvas containing a single complex path element with hundreds of coordinate points. The path is drawn with a black fill and no stroke, creating a detailed silhouette. The underlying image is sourced from an external URL and is scaled to cover the entire SVG viewport, with the Buddha path layered on top.

Loading thumbnail…

Fork of budha

A Buddha-like silhouette emerges from a dense field of randomly placed, semi-transparent circles over a black background. The circles are generated by three nested array maps, with positions, colors, and opacity determined by `Math.random()`. The central figure is drawn as a single complex SVG path, rendered via React JSX within an `<svg>` element, using the `react` and `react-dom` libraries.

Loading thumbnail…

Buddha

A black-backed Buddha portrait emerges from overlapping colorful diamond polygons, with the figure rendered in vivid multicolored paths. The visualization uses React to generate a three-level nested array mapping that produces hundreds of random polygons with varying fill colors and rotations. The SVG drawing combines this generative geometric overlay with a detailed Buddha path traced from vector data, all displayed at 960 by 1000 pixels with React 16.10 and ReactDOM.