aashishvinayvasala@gmail.com

@Aashish-vinay-vasala·13 public vizzes

Task9_Tutorial

An animated scatter plot of the classic Iris dataset cycles through the four flower measurements on each axis. The D3.js visualization renders colored circles distinguishing iris species and updates every few seconds, rotating which measurement is plotted on the x-axis. The reusable `scatterPlot` function handles scaling, axes, and marks, while the main script appends legends, labels, and a title. Data is loaded from a GitHub-hosted CSV using D3's `csv` method, with SVG rendering and a `setInterval` timer driving the animation.

Apr 28, 2024

Loading thumbnail…

Task9_Question1

This interactive pie chart shows the percentage distribution of various factors by continent, with a dropdown menu to select a continent and update the visualization. Built with React and D3 v7, it loads CSV data from GitHub, computes mean values for each attribute via `d3.mean`, and renders SVG arcs using the `d3.pie` and `d3.arc` generators. A legend with color swatches and numeric labels updates alongside the chart.

Apr 28, 2024

Loading thumbnail…

Task9_Question2

This visualization displays a stacked area chart that plots monthly sales data across multiple product categories, using a categorical color scheme to distinguish each factor within the stacked areas. Implemented with D3.js v7 and React, the code fetches CSV data from a GitHub repository, processes it through the `d3.stack()` API, and renders the chart as an SVG. The visualization incorporates custom margins, rotated x-axis labels, and a legend outside the plot area to improve readability, with axes explicitly labeled "Month" and "Sales".

Apr 28, 2024

Loading thumbnail…

Activity6-Question4

This bubble chart displays the sales information for a group of employees, plotting each person's total sales against their net profit, with the size of each bubble representing the units sold. The visualization uses D3 v7 to load data from a CSV file and render the chart as an SVG. Interactive tooltips appear on mouseover, and it includes axes labels, a bubble size legend, and a color scale using `d3.interpolateTurbo` to differentiate employees.

Apr 15, 2024

Loading thumbnail…

Activity6-Question3

This scatter plot displays product dimensions, plotting product length on the x-axis against product width on the y-axis, with colored circles indicating product categories: smart devices, home furnishings, and kitchen appliances. It loads CSV data from a GitHub repository using d3.csv, applies linear scales with d3.scaleLinear to map data values to pixel coordinates, and renders SVG circles using D3’s selection and join methods. The chart includes labeled axes created with d3.axisLeft and d3.axisBottom, with margins and a custom legend represented by the marker function.

Apr 15, 2024

Loading thumbnail…

Activtiy6-Question2

This example visualizes the proportional sales distribution across five product categories (Clothing, Electronics, Books, Toys, Furniture, Jewelry) for five different time ranges, using a horizontal stacked bar chart. It imports data from a local `data.csv` file and renders the chart as an SVG with D3 v7, employing `d3.stack()` to aggregate the series and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the sales value for each segment, while a legend identifies the time ranges. The axes are labeled “Product Categories” and “Sales,” with the title “Sales by Category of Product” displayed above the plot.

Apr 15, 2024

Loading thumbnail…

Activity6-Question1.2

This example presents a horizontal bar chart comparing the populations of twenty countries using data from a CSV file, with bars colored green and labeled axes. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component renders SVG rectangles for each bar, while `AxisBottom` and `AxisLeft` generate the ticks and labels. Population values are formatted using `d3.format` with a custom tick format that converts billions.

Apr 15, 2024

Loading thumbnail…

Activity6-Question1.1

This horizontal bar chart displays the population of ten countries for the year 2000, ordered along the y-axis with bar lengths encoding values on a linear scale. The visualization is built with React, using D3 v5’s `scaleBand` and `scaleLinear` for layout, and renders SVG rectangles via the `Marks` component. Axes are generated with custom `AxisBottom` and `AxisLeft` components, formatting tick labels with `format('.2s')` to abbreviate large numbers. Data is loaded asynchronously from a CSV file using D3’s `csv` parser.

Apr 15, 2024

Loading thumbnail…

Activity6-Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Each point is rendered as a distinct symbol, with the species of each flower determining its shape. The visualization includes axes with labels and a legend for the species categories. Built with D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scales, `symbolsFill` for shapes, and `axisLeft` and `axisBottom` for axes, loading data from a CSV fetched via URL.

Apr 15, 2024

Loading thumbnail…

Activity6-Task3.1

This scatter plot visualizes the Iris dataset, using petal length and width to position each of the 150 flowers. The plot colors each point by species—setosa, versicolor, and virginica—using distinct hues. Built with D3 v6, the visualization loads CSV data via `d3.csv`, encodes values with `d3.scaleLinear` and `d3.extent`, and renders axes through `d3.axisLeft` and `d3.axisBottom`. The code constructs circular marks within an SVG canvas, with a title and axis labels styled in red and green.

Apr 15, 2024

Loading thumbnail…

Activity6-Task1

This bar chart displays the 2020 populations of 30 countries in descending order, using a horizontal layout for readability. Built with React and D3 v5, it renders as an SVG using `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis. Data is loaded via `d3.csv` from the provided Activity6_Population-1.csv file, with tick labels formatted using `d3.format` to abbreviate large numbers (e.g., "B" for billions).

Apr 15, 2024

Loading thumbnail…

Activity6-Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a car brand, positioned by its horsepower (x-axis) and torque (y-axis), with the circle’s radius encoding highway MPG and its color distinguishing the manufacturer. The visualization is built with D3 v7, using `d3.scaleLinear` for axes and bubble size, a tooltip on mouseover, and SVG animation for interactivity. It includes a legend for both MPG values and color-coded makes.

Apr 15, 2024

Loading thumbnail…

Activity6-Task2

A stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The chart uses d3.stack() to compute the stacked series and d3.scaleOrdinal() for the color encoding, rendering as SVG with d3.axisBottom and d3.axisLeft. Hovering over a segment displays a tooltip showing the exact percentage for that rating category within the genre. Data comes from a local CSV file loaded through D3's data loading methods.

Apr 15, 2024