Skip to main content
Log in
V

Vasanth Krishna

@kosuriVasanthkrishna·15 public vizzes

Loading thumbnail…

Activity-7.1

This example displays a pie chart showing the distribution of university tuition fees by country, with the title "University Tuition Distribution by Country". It loads data from a CSV file using `d3.csv`, then uses `d3.rollup` to compute the mean tuition fee per country. The chart is rendered as an SVG using D3’s `pie`, `arc`, and `scaleOrdinal` APIs, while a legend lists each country with its corresponding color and average fee. The code also demonstrates ES6 module import with `myMessage.js`.

Nov 5, 2024
Loading thumbnail…

Activity-7.1_Ques2

This example shows a global CO₂ emissions area chart over time, with emissions plotted against year and a steelblue filled region beneath the curve. It uses D3 v7 to load CSV data from a GitHub gist, parse numeric values, and construct an SVG area chart via `d3.area`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The chart includes labeled axes for year and emissions, a bold title, and styled axes with hidden tick lines. Data is fetched using `d3.csv` and rendered entirely as SVG elements.

Nov 5, 2024
Loading thumbnail…

Activity-6_Question-4

This animated scatterplot uses D3.js (v7) to show the correlation between price, weight, and city MPG across 43 car makes. Each circle’s x-axis position maps to price, y-axis to weight, and radius encodes fuel efficiency values read from `bubblechart.csv`. D3’s `scaleLinear`, `scaleOrdinal`, and `d3.interpolateTurbo` assign color per make, while mouse events trigger a styled tooltip with make-specific details. A legend with outlined bubbles and dashed lines clarifies MPG size encoding using SVG rendering.

Oct 23, 2024
Loading thumbnail…

Activity-6_Tutorial-4

This interactive bubble chart visualizes correlations between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower and torque, while its radius represents highway MPG and color distinguishes the manufacturer. Built with D3 v7, the visualization renders SVG elements and includes an interactive tooltip on hover. The code uses d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for color mapping. Data is loaded from the included bubblechart.csv file, with axis labels and a legend for bubble sizing.

Oct 22, 2024
Loading thumbnail…

Activity-6_Ques-3

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for various car brands, with each point colored by brand using a categorical scale. It loads data from a CSV file via `d3.csv`, scales the x and y axes using `scaleLinear`, and maps brands to colors through `scaleOrdinal` with `schemeCategory10`. The SVG rendering uses D3 v6 selections to append circles and axes, with `axisLeft` and `axisBottom` for labeled scales.

Oct 22, 2024
Loading thumbnail…

Activity-6_Task-3_Part-2

This visualization displays Fisher’s iris dataset as a scatter plot of sepal length against petal length, with each species represented by a distinct D3 symbol shape and a corresponding legend. The code uses d3.csvParse to load data from a remote CSV, then applies d3.scaleLinear, d3.scaleOrdinal, and d3.symbol via the axes and shapeLegend modules to render axes, shapes, and labels. The plot updates responsively to the window size, showing how D3 v7 modules compose for interactive data exploration.

Oct 22, 2024
Loading thumbnail…

Activity-6_Task-3_Part-1

This scatter plot visualizes the Iris dataset, showing petal length and width relationships with points colored by species (setosa, versicolor, and virginica). It loads data from a GitHub-hosted CSV file and renders SVG circles using D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. The visualization includes green axis labels and a full-window responsive layout, with circle positions mapped from petal measurements and colors assigned via a custom marker function.

Oct 22, 2024
Loading thumbnail…

Activity-6_Task-2_Ques2

This example shows a stacked horizontal bar chart of activity breakdowns by sport, displaying cardio, strength, and flexibility percentages for ten sports from a CSV file. It uses D3 v7 with SVG rendering, loading data via `d3.csv` and constructing the visualization with `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`. The chart includes a legend, axis labels, and colored segments with numeric scaling from 0 to 100.

Oct 22, 2024
Loading thumbnail…

Activity-6_Task2

This example shows a stacked horizontal 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. The visualization uses D3 v7 to load CSV data and render SVG elements. It employs d3.stack() to compute the stacked series, d3.scaleBand for the genre axis, d3.scaleLinear for the percentage scale, and d3.scaleOrdinal for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each rating segment using d3.format.

Oct 22, 2024
Loading thumbnail…

Activity-6_Ques-1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted alphabetically by country name. The visualization uses React to render an SVG with D3 scales, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The code imports D3 utilities like `csv`, `format`, and `max` to load and process data from a GitHub gist. Interactive tooltips appear on hover via SVG `<title>` elements, and axes are built with custom components using tick marks and labels.

Oct 22, 2024
Loading thumbnail…

Activity-6_Question-1

This bar chart visualizes the population of ten countries in the year 2000 using React and SVG rendering. It leverages d3 v5 functions such as `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `format` to convert tick labels into billions. A CSV file is loaded remotely via d3’s `csv` method, with each bar’s tooltip revealing the formatted population value. The chart includes styled axes and labels for both the population and country name.

Oct 22, 2024
Loading thumbnail…

Activity 6_Task

This interactive bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name along the y-axis and population size on the x-axis using a linear scale. Built with React and rendered as an SVG, the visualization uses D3 v5 APIs such as `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The code fetches CSV data from an external GitHub URL, formats population values with the `format` function (converting billions to “B”), and provides hover tooltips via SVG `<title>` elements. The styling includes green bars, blue tick lines, and the Poppins font.

Oct 22, 2024
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a colorful array of overlapping Buddha silhouette paths, layered with semi-transparent circles and set against a floral background image. Using React and SVG, the code generates random positions and RGB colors for each circle, while the Buddha shape comes from a single SVG path. The background image, sourced from Wallup, scales dynamically via JavaScript, and the entire composition is rendered through React's component model.

Oct 18, 2024
Loading thumbnail…

Fork of Question3

This visualization combines randomly positioned, semi-transparent colored circles with a detailed Buddha silhouette path rendered in SVG. The circles use React's `map` function to generate multiple layers with randomized coordinates and RGB fill values, while the Buddha shape comes from an inline SVG `path` element. The background features a flower image that zooms via JavaScript, and the app runs on React 16.10 with ReactDOM rendering the SVG output.

Oct 18, 2024
Loading thumbnail…

5 Buddhas

Five concentric arrangements of triangular diamonds, generated from a nested array of cubic values, overlay a large black-and-white Buddha outline in this React and SVG visualization. Each polygon’s position, fill color, and rotation are derived from repeated `Math.random` calls, producing a chaotic, multi-layered pattern. The Buddha path is drawn using raw SVG `path` data, while the diamonds are rendered as `polygon` elements within a single `<svg>` container sized 960 by 1000 pixels. The composition blends generative randomness with a fixed sacred figure, creating a dense, colorful mosaic against a black background.

Oct 14, 2024