V

VarunKumarKambhampati@my.unt.edu

@Varun4327·16 public vizzes

Loading thumbnail…

Fork of Varun_6_Question1

This example displays a horizontal bar chart of 2010 population data for ten countries, loaded from a remote CSV file. The visualization uses React for component structure and D3 v5 scales (scaleBand, scaleLinear) to map country names and population values to SVG positions. Bars are rendered as SVG rectangles with native tooltips, while styled tick marks and axis labels annotate the chart. The data undergoes a preprocessing step that multiplies the 2000 population column by 1000 to derive the plotted values.

Loading thumbnail…

Fork of Varun_tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for the x- and y-axes while encoding species with distinct colors and using sepal dimensions for circle radii. Built with D3 v6 (loaded via UNPKG), it employs `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render an SVG chart. The visualization adapts to the full viewport and includes custom axis labels, demonstrating basic data-joining and margin-based layout.

Loading thumbnail…

Varun_6_Question2

This visualization displays the percentage breakdown of iris flower measurements by species using a stacked horizontal bar chart. The chart, rendered with SVG, uses D3.js v7’s `d3.stack` to accumulate the four measurement columns (sepal and petal length/width) per species. Each colored segment represents a variable’s proportion, with a tooltip revealing the exact percentage on hover. The data comes from the classic Iris dataset, with axes and labels styled via D3’s `axisBottom` and `scaleBand`.

Loading thumbnail…

Varun_activity7.1_question2

This D3.js area chart visualizes the proportion of ratings across different music genres. It uses multiple overlapping area paths, each colored via a categorical color scheme to distinguish between different rating metrics. The chart loads data from a remote CSV file, renders with SVG, and includes labeled axes for genres and rating proportions, plus a legend mapping colors to data series. The code leverages D3's scaling, area generator, and axis APIs to construct the visualization.

Loading thumbnail…

Fork of Varun_activity_7.1_question1

This example presents a pie chart depicting the distribution of video game genres based on their ratings above 8.5. The chart loads its data from a remote CSV file using `d3.csv`. It employs `d3.pie` and `d3.arc` to compute and draw the slices, with `d3.scaleOrdinal` and `d3.schemeCategory10` assigning colors per genre. An accompanying legend uses SVG rectangles to map the colors, and a custom ES6 module, `myMessage.js`, is imported as a demonstration.

Loading thumbnail…

Varun_activity_7.1

This example renders a pie chart from CSV data using D3 v6, visualizing the distribution of values above 8.5 across music genres. It loads data asynchronously via `d3.csv`, converts string values to numbers, and computes arc positions with `d3.pie()` and `d3.arc()`. An ordinal color scale maps genres to `d3.schemeCategory10`, and the SVG output includes a legend built with appended rectangles and text labels. The chart appears within an HTML div, with dimensions and margins set explicitly in the script.

Loading thumbnail…

Varun_6_Question3

This scatter plot visualizes a car dataset, mapping horsepower on the x-axis against highway MPG on the y-axis, with points colored by car make using a legend. Built with D3 v6, it loads CSV data via `d3.csv`, scales axes with `scaleLinear` and colors with `scaleOrdinal`, and renders circles as SVG elements. The chart includes labeled axes and a color legend, demonstrating data loading, scaling, and SVG rendering within a full-screen viewport.

Loading thumbnail…

Varun_6_Question1

This example demonstrates a minimal D3.js web application that renders the text "Hello VizHub!" in a large, centered format. It shows how to import D3 functions like `select` to manipulate the DOM, alongside a local ES6 module that supplies a message string. The code loads D3 via the UNPKG CDN and uses a simple `message` div with CSS styling to display the output.

Loading thumbnail…

varun_6_Question4

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length in the Iris dataset. Each circle's position is determined by sepal dimensions, its size encodes petal length via a linear scale, and its color indicates species using a categorical turbo color scale. The D3.js code loads data from a CSV, renders the SVG, and includes an interactive tooltip that appears on mouseover. Axes, labels, and a legend for species colors are also generated using D3's scale and axis utilities.

Loading thumbnail…

Varun_6_Tutorial4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across multiple car makes. Each circle encodes horsepower on the x-axis, torque on the y-axis, and highway MPG through both bubble size and color via a turbo color scale. Hovering reveals a tooltip with the car make. The visualization uses D3 v7 with SVG, linear scales, ordinal color mapping, and a custom legend for bubble sizes and categories.

Loading thumbnail…

Activity_6_tutorial3.2

A scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct shape (circle, square, etc.). The plot includes axes with labels and a legend identifying the species categories. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to map data values to positions and shapes, while the `axes` and `shapeLegend` components construct the chart and legend. Data is loaded from a remote CSV file and parsed with `csvParse`.

Loading thumbnail…

Varun_tutorial3.2

This example demonstrates a minimal D3.js setup that renders the text “Hello VizHub!” inside a centered HTML div. It shows how to import functions from the D3 library using ES6 module syntax and also load a custom local module, myMessage.js, which exports the displayed string. The code uses `select` from D3 to target the `#message` element and update its text content. Styling is handled through an external CSS file, with the page initialized via a bundled JavaScript file.

Loading thumbnail…

Varun_6_tutorial2

This example visualizes the distribution of IMDb movie ratings across different genres using a stacked horizontal bar chart, where each bar segment represents the percentage of movies within a specific rating range. The chart is rendered using D3.js v7, with data loaded from a CSV file containing genre and rating category proportions. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.stack` to create the stacked segments, and `d3.scaleOrdinal` to assign colors to rating categories. Interactive tooltips provide detailed percentage values on hover, implemented through D3 event handlers and a custom HTML overlay.

Loading thumbnail…

Varun_6_Tutorial1

This example shows a horizontal bar chart of 2020 population data for 30 countries, sorted by country name. It uses React with SVG rendering through D3 v5, employing D3’s `scaleBand`, `scaleLinear`, `csv` parser, and `format` for axis labels. The axes are custom components (AxisBottom and AxisLeft), and bars are drawn as `<rect>` elements with tooltips using `<title>`. Data is loaded asynchronously via a remote CSV URL, and the chart is styled with a Poppins font and minimal styling.

Loading thumbnail…

Varun_6reflections

A generative React and SVG artwork renders a grid of randomly placed, semi-transparent colored rectangles layered over a large, ornate black-and-white Buddha path. The composition uses nested array maps to generate hundreds of overlapping shapes with randomized x/y coordinates, sizes, and RGB fill values, while the central figure is drawn with a complex SVG path. The piece contrasts chaotic, colorful geometric noise with a structured, detailed silhouette, creating a visually busy and immersive digital mosaic. The code relies on React's component model and SVG elements for rendering, with no external data source.

Loading thumbnail…

5_budha_varun

This visualization layers thousands of semi-transparent, randomly colored polygons on a black SVG canvas, with coordinates and fill values generated from repeated calls to `Math.random()`. A large Buddha outline path is rendered atop the chaotic polygon field, creating an overlapping, colorful composition. The code uses React to render the SVG elements and draws the Buddha figure from an embedded path dataset.