pavithranamburi24@gmail.com

@pavithranamburi·15 public vizzes

question1

This example shows the distribution of sepal lengths across iris species using a pie chart, with each species (setosa, versicolor, virginica) colored distinctly and accompanied by a legend and percentage tooltips. It loads the Iris dataset from a GitHub gist via `d3.csv`, parses numeric fields, and uses `d3.pie` and `d3.arc` to generate the chart. The visualization is rendered as an SVG, with colors assigned by species and a title displayed above the chart.

Nov 6, 2024

Loading thumbnail…

question 2

This example displays petal length distribution across iris species using a stacked area chart. It loads data from a remote CSV file and renders an SVG visualization. The code imports D3 functions including `csv`, `scaleBand`, `scaleLinear`, `stack`, and `area`. It constructs an area generator with band scale positioning, adds axes via `axisBottom` and `axisLeft`, and labels the chart with a title. The visualization shows how petal lengths vary among species, with steelblue filling for the area.

Nov 6, 2024

Loading thumbnail…

act 6 q4

This visualization is a bubble chart that explores the correlation between sepal length, sepal width, and petal length in the classic Iris dataset. Each circle represents a flower specimen, with its position along the x- and y-axes determined by sepal length and width, and its size scaled by petal length. The color of each bubble indicates the species of iris, with a legend identifying the categories. The chart is rendered as an SVG using D3 v7, with interactive tooltips that display species and petal length on mouseover.

Oct 22, 2024

Loading thumbnail…

act 6 t4

A bubble chart shows the correlation between average horsepower, torque, and highway MPG across car makes, with bubble size encoding MPG and color distinguishing manufacturers. The visualization, rendered as SVG with animation, loads D3 from UNPKG and uses `d3.csv` to import data. It builds axes with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, while `d3.scaleOrdinal` and `d3.interpolateTurbo` assign colors. Interactive tooltips appear on hover via mouse events, and a legend scales bubble sizes for MPG values.

Oct 22, 2024

Loading thumbnail…

act 6 q3

This interactive scatter plot visualizes a car dataset, plotting horsepower against highway MPG, with each dot colored by the car's make through a Tableau 10 ordinal scale. The chart uses d3.csv to load remote data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for tick marks. A legend is rendered as colored rectangles with text labels, and the plot spans the full browser window via window.innerWidth and window.innerHeight. The visualization is built with d3.v6, rendered as SVG, and includes axis labels for both dimensions.

Oct 22, 2024

Loading thumbnail…

act 6 t3.2

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol from d3.symbol and symbolsFill. The visualization loads data from a remote CSV file via d3.csvParse, converting numeric columns before rendering. The code demonstrates the use of local ES6 modules—importing axes and shapeLegend components—alongside d3.axisLeft, d3.axisBottom, d3.scaleLinear, and d3.scaleOrdinal to manage scales, axes, and a custom shape legend.

Oct 22, 2024

Loading thumbnail…

act 6 t3

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width for each sample. Circles are colored by species—sky blue for setosa, light green for versicolor, and orange for virginica—while additional sepal dimensions are incorporated into the markers’ rx and ry attributes. Built with D3 v6, it loads CSV data via `d3.csv`, uses `scaleLinear` for axes, and renders an SVG with `axisLeft` and `axisBottom` labels. The visualization demonstrates local ES6 module imports and dynamic data parsing within a full-screen browser viewport.

Oct 22, 2024

Loading thumbnail…

act 6 q2

This example visualizes the percentage distribution of the Iris dataset across its three species (setosa, versicolor, and virginica) using a stacked horizontal bar chart. The chart displays the proportion of each measurement type—sepal length, sepal width, petal length, and petal width—per species, with each bar segmented by color and labeled along the x-axis. The visualization uses D3 v7’s `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom` to construct the plot. Interactive tooltips, styled via CSS, appear on mouseover to show the exact percentage for each segment. The data is loaded from a local `iris.csv` file.

Oct 22, 2024

Loading thumbnail…

act 6 t2

A stacked horizontal bar chart visualizes IMDb rating distributions across six film genres, with each genre’s percentages segmented into five rating brackets from “below 5.0” to “above 8.5.” The chart uses d3.stack to compute the stacked series, d3.scaleBand for genre categories, and d3.scaleLinear for percentage widths, rendered as SVG rectangles with an ordinal color scale. Interactive tooltips display exact percentages on mouseover, while axis labels and a title annotate the visualization. Data comes from the provided CSV file.

Oct 22, 2024

Loading thumbnail…

Fork of ACT 6 Q1.1

This interactive bar chart displays the population figures for 20 countries in 2010, using a horizontal layout with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization loads data from a remote CSV file using `d3.csv` and renders SVG rectangles. The code leverages `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis, with formatted tick labels using `d3.format`.

Oct 22, 2024

Loading thumbnail…

ACT 6 Q1

A horizontal bar chart displays population figures for ten countries from a CSV dataset, using SVG rectangles scaled by d3.scaleLinear. D3’s scaleBand positions categorical country labels along the y-axis, while d3.format shortens tick values to billions. React manages the component state, loading data asynchronously via d3.csv, and custom axis components render ticks and labels. The visualization highlights population magnitudes with green bars and includes tooltips showing formatted values on hover.

Oct 22, 2024

Loading thumbnail…

ACT 6 T1

This visualization displays the 2020 population estimates for 30 countries using a horizontal bar chart. Built with React and rendered as an SVG, it loads population data from a CSV file and uses D3's `scaleBand` and `scaleLinear` to map countries and population values to coordinates. The chart features blue tick lines, gray labels, and green bars, with hover tooltips showing formatted population values in billions. The code demonstrates local ES6 module imports for axes and marks, along with D3's `csv` loader, `format` for number formatting, and `max` for domain calculation.

Oct 22, 2024

Loading thumbnail…

SDV PAVITHRA Q3

This visualization displays a large, intricate SVG path of a Buddha-like figure overlaid on a floral background image. The React app renders a single `<svg>` element with the path drawn using a complex `d` attribute, thick stroke, and scaled transform. The black page background and responsive centering frame the composition. The code uses React and ReactDOM to mount the visualization, with styling applied directly via inline styles for the background image.

Oct 15, 2024

Loading thumbnail…

Fork of BUDDHA PAVITHRA

A dense field of thousands of randomly positioned, rotated diamond-shaped polygons fills a black SVG canvas, each shape filled with a bright RGB color sampled from a wide range. Built with React and rendered as SVG, the visualization uses nested array maps to generate the overlapping geometry and the `Math.random()` function for both coordinates and color values. The piece also layers a detailed Buddha line-art path on top, scaled and translated into the composition.

Oct 14, 2024

Loading thumbnail…

BUDDHA PAVITHRA

A dense field of overlapping, translucent circles in varied hues fills a black canvas, generated from a nested array map. Above this, a single large SVG path renders a Buddha figure with a thick stroke, layered via an SVG transform. The visualization uses React with ReactDOM, constructing SVG elements programmatically, while the Buddha path data is embedded directly in the code.

Oct 14, 2024