Skip to main content
Log in
J

jaswanthreddy2000@gmail.com

@jashreddy·16 public vizzes

Loading thumbnail…

Assignment 2 Pie Chart

This example visualizes the highest electricity consumption by country as a pie chart, with each slice colored and labeled with its consumption value, alongside a legend listing country names and figures. It loads data from a CSV file hosted on GitHub, using D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to process the data and generate SVG paths, text, and rectangles. The chart is rendered with an inner radius of zero, and styling is applied via external CSS classes.

Apr 10, 2024
Loading thumbnail…

Area Chart

This area chart displays sales data from 2000 to 2023, with the year on the x-axis and sales figures on the y-axis. The chart is rendered as an SVG using D3 v5, loading data from a CSV file hosted on GitHub. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, along with `d3.line` and `d3.area` generators with `curveBasis` to create smooth lines and the shaded region beneath. Axis labels are styled with orange, and gridlines are generated via axis tick marks.

Apr 10, 2024
Loading thumbnail…

Activity 6 Question 4

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and ratings on the y-axis, with bubble size encoding calories and color distinguishing brand names. Built with D3 v7, the SVG visualization includes hover tooltips showing calorie and glucose values, plus legends for bubble size and color categories. The chart reads from an external CSV file and animates interactive mouseover transitions.

Apr 6, 2024
Loading thumbnail…

Activity 6 Task 4

This 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 represents highway MPG and its color distinguishes the car brand. Hovering over a bubble reveals the make via a tooltip built with D3’s event handlers. The visualization uses d3.scaleLinear axes, d3.scaleOrdinal for color, d3.interpolateTurbo for the palette, and SVG circles animated through d3 transitions. Data comes from bubblechart.csv.

Apr 6, 2024
Loading thumbnail…

Activity 6 Question 3

This scatter plot displays the relationship between sepal length and sepal width for the Iris virginica species, using a steelblue circle for each data point. The visualization uses D3.js v7 to load the CSV data from a GitHub repository, scale linearly for both axes, and render SVG elements with axis labels in green. The plot fills the entire browser window and includes left and bottom axes with tick marks, while the data points are positioned based on their numeric values for the two measurements.

Apr 6, 2024
Loading thumbnail…

Activity 6 Task 3

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species distinguished by a distinct shape marker and a shape legend. Built with d3.v7, it uses the `scaleLinear` and `scaleOrdinal` APIs to map data to coordinates and shapes, while `axisLeft` and `axisBottom` render the axes. The data is loaded from a CSV file fetched from a GitHub repository, and the visualization renders shapes using the `symbol` generator from D3’s `symbol` module.

Apr 6, 2024
Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows the percentage distribution of six rating categories within each of six food categories, revealing how genre influences rating outcomes. Mouse hover actions highlight individual bar segments and display exact percentages via tooltip pop-ups. The visualization uses d3.stack() to generate stacked series, d3.scaleOrdinal() for color mapping, d3.scaleLinear() and d3.scaleBand() for axes, and d3.axisBottom() for the percentage axis, rendering in SVG with data from a CSV file.

Apr 6, 2024
Loading thumbnail…

Activity 6 Task 2

This stacked bar chart shows the proportion of ratings across six movie genres, with each bar divided into five rating brackets from below 5.0 to above 8.5. The visualization reveals how genres like Documentary skew toward higher ratings while Action tends toward lower ones. Using d3.stack() and d3.scaleBand(), the chart encodes data from a CSV file as SVG rectangles. Interactive tooltips appear on mouseover, displaying the precise percentage for each rating segment using d3.format() and event handlers.

Apr 6, 2024
Loading thumbnail…

Activity 6 Task 2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar segmented into five rating-level percentages that sum to 100%. Hovering a segment reveals an exact percentage tooltip. The visualization uses d3.v7's `d3.stack()`, `d3.scaleOrdinal()`, and `d3.scaleBand()` to render SVG rectangles, reading data from a local CSV file. Genre labels appear on the y-axis, and a color-coded legend identifies each rating band.

Apr 6, 2024
Loading thumbnail…

Activity 6 Question 2

A horizontal bar chart ranks the top 20 countries by 2010 population, with the US Census data loaded from a CSV. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `format('.2s')` function abbreviates population values (e.g., "1.2B"), while SVG rectangles render the bars with a native tooltip on hover. The chart includes styled tick lines and labels, with axes and marks composed via reusable React components.

Apr 5, 2024
Loading thumbnail…

Activity 6 Question 1

A bar chart displays the population of ten countries in the year 2000, using a horizontal layout with countries on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and scaling. Data is loaded from a CSV file via d3.csv, and axis ticks are formatted with d3.format to display values in billions.

Apr 5, 2024
Loading thumbnail…

Activity 6 Task 1

This example visualizes the 2020 population for 30 countries as a horizontal bar chart using SVG rendering in a React application. The bars are colored green, with blue tick lines and gray labels for readability. The chart loads data from a CSV file, computes population values by multiplying the 2020 figures by 1000, and applies d3's `scaleBand` and `scaleLinear` for positioning and scaling. D3 v5.11.0 is used for data parsing (`csv`), formatting (`format`), and scales, while React 16.9.0 handles the component rendering, with tooltips displaying formatted population values (e.g., in billions).

Apr 5, 2024
Loading thumbnail…

6 buddhas

Six buddhas rendered in overlapping SVG polygons sit against a black background. The code uses React to generate a 20x20x20 nested array of randomly placed, rotated diamonds, each with randomized RGB fill values. A large, detailed Buddha path drawn with SVG coordinates is positioned centrally, while the surrounding chaotic geometry creates a dense, colorful halo. The example demonstrates procedural SVG generation through nested React maps, combining stochastic shapes with a fixed vector icon.

Apr 4, 2024
Loading thumbnail…

6 Buddhas with Background

The visualization displays six stylized Buddha silhouettes, each rendered as a filled SVG path, overlaid and scaled to overlap one another. The paths are drawn with a violet fill and a white stroke. The React application uses `ReactDOM` to render the SVG directly into the page. The background is a floral image loaded via CSS, and the code initializes an array and computes a cubic value, though these are not used in the final output.

Apr 4, 2024
Loading thumbnail…

Activity 6 Task 1

This visualization displays the population of 30 countries in 2020 using a horizontal bar chart rendered as SVG in React. It imports D3 v5 utilities such as `scaleBand`, `scaleLinear`, `max`, and `format` to map country names to bar heights and population values to bar widths. The chart includes labeled axes, with the y-axis listing countries and the x-axis showing formatted population values (e.g., "1.2B") via a custom tick format. Data is loaded asynchronously from a remote CSV using the `csv` function, and tooltips appear on each bar via a native `<title>` element.

Apr 4, 2024
Loading thumbnail…

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

A scatter of 441 randomly positioned SVG circles, rendered in translucent red, green, and blue, overlays a large black-and-white Buddha path on a black background. The circles use `Math.random()` for both coordinates and color values, creating a dense, colorful field above the vector figure. The Buddha is drawn as a single SVG `path` element, fixed via a `transform` translate and scale, while the React app maps over a nested array to generate the circle elements. The visualization combines generative randomness with a static icon in a React and SVG framework.

Apr 3, 2024