satishvelaga02@gmail.com

@satishvelaga02·14 public vizzes

satishquestion2

This area chart visualizes the relationship between height in feet and the number of people, using a gradient-filled region beneath the curve to emphasize the trend. The data is loaded from a CSV file hosted on GitHub via `d3.csv`. The chart is rendered as an SVG, with `d3.area()` defining the area shape and `d3.scaleLinear()` mapping the x and y axes. The visualization includes axis labels and a custom linear gradient applied to the area path, demonstrating D3 v7’s file loading and scale functionality.

Apr 22, 2024

Loading thumbnail…

SATISHQUESTION1

This example presents a pie chart of U.S. states and their populations in millions, sourced from a CSV file hosted on GitHub. It uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal assigning colors to each slice. The visualization includes value labels on each section and a legend with colored rectangles and text, all rendered as SVG. Population values and state names are formatted and displayed using d3.format.

Apr 22, 2024

Loading thumbnail…

question1

This animated scatter plot visualizes the Iris dataset, cycling through four different flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis at regular intervals. It uses D3 v6 to load CSV data, render SVG circles colored by species, and scales axes dynamically with `scaleLinear`. The plot updates via `setInterval`, re-calling the custom `scatterPlot` module, and includes a manual color legend. The rendering is a full-window SVG with rotating axis labels and a title.

Apr 22, 2024

Loading thumbnail…

Activity6Question4

This bubble chart visualizes the correlation between sepal length, sepal width, and petal length in the Iris dataset. Each circle’s position maps sepal dimensions, its radius encodes petal length, and color distinguishes the three species (setosa, versicolor, virginica). Hovering reveals a tooltip with species and petal length. The visualization uses D3 v7 with SVG rendering, `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for categorical colors, and interactive mouse events for tooltip display. A legend identifies species colors.

Apr 11, 2024

Loading thumbnail…

Activity6Question3

A scatter plot displays car dataset relationships between horsepower and highway MPG, with each point colored by vehicle make. The visualization loads CSV data from a GitHub repository and uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `schemeTableau10` to render an SVG chart with labeled axes and a legend. Points are positioned using linear scales mapped from the data extent, with a fixed radius of 5 pixels.

Apr 11, 2024

Loading thumbnail…

Activity6Question2

This example displays population changes for several countries from 1950 to 2020 using a horizontal bar chart. Each country is assigned a distinct color, and bars extend horizontally to represent population values for each year, with years arranged vertically. The visualization loads D3 v7 via UNPKG, uses `d3.scaleOrdinal` for color assignment, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Mouse interactions update a tooltip showing the exact year and population. The underlying data comes from a CSV file containing country names, codes, and yearly population figures.

Apr 11, 2024

Loading thumbnail…

Activity6Question1.1

A horizontal bar chart displays the populations of twenty countries in 2010, using D3's `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. The chart is rendered as an SVG with React, where the `Marks` component draws green rectangles with tooltips showing formatted values via D3's `format` function. The data is loaded from a GitHub-hosted CSV using `d3.csv`, and custom `AxisBottom` and `AxisLeft` components generate blue tick lines and styled tick labels.

Apr 11, 2024

Loading thumbnail…

Activity6Question1

This horizontal bar chart displays the top 10 countries by population in 2020, using a dataset loaded as CSV from GitHub via D3’s `csv` function. Built with React and D3 v5, it renders an SVG with categorical bars (using `scaleBand` for the y-axis) and a linear x-axis (via `scaleLinear`), formatted with D3’s `format` for SI units. Interactive hover tooltips show the population values through SVG `<title>` elements. The axes and tick marks are styled with blue lines and gray text, with bars colored light green, all wrapped in a Poppins font layout.

Apr 11, 2024

Loading thumbnail…

Activity6Task4

This visualization shows the correlation between average horsepower, torque, and highway MPG across 31 car makes using an interactive bubble chart. Each bubble is positioned by horsepower on the x-axis and torque on the y-axis, with size encoding highway MPG and color distinguishing car manufacturers. The chart uses D3 v7 to load CSV data, render SVG circles, and implement tooltips on mouseover. It includes axis labels, a size legend for MPG values, and a color legend for car makes, with animations provided through D3 transitions on tooltip opacity.

Apr 11, 2024

Loading thumbnail…

Activity6Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and using different symbol shapes to distinguish species. A custom legend labels each shape with its corresponding species. The visualization loads the data from a raw CSV file, parses it with `d3.csvParse`, and renders the plot using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol`. Axes and labels are generated through a reusable module that calls `d3.axisLeft` and `d3.axisBottom`.

Apr 11, 2024

Loading thumbnail…

Activity6Task3

A scatter plot of the Iris dataset displays petal length and width, with each point colored by species using a manual `switch` statement. The visualization is rendered as an SVG using D3 v6, loading data via `d3.csv`. It uses `d3.select` for DOM selection, `d3.scaleLinear` for axes, and `d3.extent` to compute domain ranges, with `d3.axisLeft` and `d3.axisBottom` for chart labels. Circle radii are set by a fixed constant, while `rx` and `ry` properties are erroneously assigned but not used for ellipse drawing.

Apr 11, 2024

Loading thumbnail…

Activity6Task2

This example visualizes the distribution of IMDb ratings across different movie genres using a stacked horizontal bar chart. Each bar segment represents the percentage of movies within a specific rating bracket (below 5.0, 5.0-6.5, 6.5-7.5, 7.5-8.5, above 8.5) for genres like Documentary, Drama, Comedy, Romance, Animation, and Action. The visualization is rendered as SVG using D3 v7, with data loaded from a CSV file. It uses `d3.stack()` for stacked bars, `d3.scaleLinear()` and `d3.scaleBand()` for axes, and `d3.axisBottom()` for the x-axis. Hovering over a segment displays a tooltip showing the exact rating percentage for that genre and bracket.

Apr 11, 2024

Loading thumbnail…

Activity6Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars extending from a shared baseline and country names on the y-axis. The visualization uses D3 v5 scaleBand and scaleLinear for positioning, with data loaded via d3.csv from a GitHub-hosted CSV file. React renders SVG elements, while helper components AxisBottom, AxisLeft, and Marks generate ticks and rectangles. Hovering reveals formatted population values through SVG title tooltips, and the x-axis uses SI-format abbreviations that convert "G" to "B".

Apr 11, 2024

Loading thumbnail…

5-buddhas

A generative Buddha figure composed of layered SVG polygons and paths renders on a black background. The artwork uses React with ReactDOM to map a numeric array into overlapping diamond shapes with randomized coordinates, colors, and rotations, while a detailed Buddhist figure path is drawn and scaled within an SVG container. The implementation relies on SVG polygon and path elements, demonstrating chaotic pattern generation alongside structured iconography.

Mar 14, 2024