Skip to main content
Log in
S

srilekhasridasyam@my.unt.edu

@SrilekhaSridasyam·15 public vizzes

Loading thumbnail…

assg2_q2

This area chart visualizes the relationship between wine quality and alcohol content, using data from a CSV file of red wine samples. The chart plots quality on the x-axis and alcohol percentage on the y-axis, with the area filled in light gray. Built with D3.js v7, the code loads data via `d3.csv`, sorts records by quality, and constructs the visualization using `d3.area`, `d3.scaleLinear`, and SVG axis generators (`d3.axisBottom`, `d3.axisLeft`). The SVG canvas is created with dynamic width and height based on specified margins.

Apr 13, 2024
Loading thumbnail…

Assg2_q1_lekha

This example visualizes the distribution of documentary genre ratings across five ranges, from below 5.0 to above 8.5, using a pie chart. The chart is rendered as SVG with D3 v7, loading data from a CSV file hosted on GitHub. It uses `d3.pie()` to compute arc angles and `d3.arc()` to generate the pie slices, with a categorical color scale and a legend. Labels are positioned at each slice's centroid for readability.

Apr 13, 2024
Loading thumbnail…

Activity6_q4

This interactive bubble chart visualizes the correlation between vehicle weight and height across 35 car models, with bubble size representing vehicle length and color distinguishing each model. Built with D3 v7 and rendered as SVG, the chart features animated hover tooltips that display model details. The visualization includes dual legends for length and color-coded models, using scales such as d3.scaleLinear for axes and bubble radius, d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and d3.axisBottom and d3.axisLeft for the coordinate axes. Data comes from a local CSV file.

Apr 6, 2024
Loading thumbnail…

Activity6_q3

This scatter plot visualizes penguin species by body mass against flipper length, with each data point colored by species (Adelie, Gentoo, or Chinstrap). The D3 v5 code loads CSV data from a GitHub repository, scales the x- and y-axes using `scaleLinear`, and renders circles in an SVG. It demonstrates `import` from D3 and local ES6 modules, with axis labels and a title styled via CSS.

Apr 6, 2024
Loading thumbnail…

Act6 q2

A stacked bar chart displays product sales across four quarters, broken down by category (Electronics, Office Supplies, Furniture). The chart uses D3 v7 APIs like `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear`. Data loads from a CSV file, and hover interactions reveal category sales via a tooltip. The visualization renders in SVG with color-coded segments per category and an ordinal color scale.

Apr 6, 2024
Loading thumbnail…

Activity6_task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's x-axis position represents horsepower, the y-axis represents torque, and its size encodes highway MPG. The chart uses D3.js (v7) with SVG rendering, implementing a tooltip on mouseover and a legend. Data is loaded from a CSV file, with bubble size scaled using `d3.scaleLinear` and colors assigned via `d3.scaleOrdinal` with `d3.interpolateTurbo`.

Apr 5, 2024
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species using different D3 symbol shapes, with a legend for the shapes. The visualization loads data from a remote CSV file via `fetch` and `csvParse`, then uses `scaleLinear`, `scaleOrdinal`, and `symbol` to map data to positions and shapes. It builds the chart using `svg.call` with reusable modules for axes and legend, and updates dynamically through a state-based render loop.

Apr 5, 2024
Loading thumbnail…

Activity6_Task3 .1

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Points are colored by species using a switch statement mapping setosa to darkgreen, versicolor to yellow, and virginica to red. The visualization loads CSV data from a GitHub repository using d3.csv, then creates SVG circles positioned with d3.scaleLinear scales. Axes are generated with d3.axisLeft and d3.axisBottom, while width and height adapt to the browser window. The code also reads sepal dimensions but does not use them in the current rendering.

Apr 5, 2024
Loading thumbnail…

Activity6_q2

This stacked bar chart visualizes the distribution of ratings across different movie genres, with each bar segment representing a rating category’s proportion of the total. The chart aims to show how ratings are composed within each genre, with hovering over a segment revealing the exact percentage via a tooltip. Built with D3 v7, the code uses `d3.stack()`, `d3.scaleLinear`, and `d3.scaleBand` to render the SVG, while `d3.axisBottom` and `d3.axisLeft` provide the axes. The data is loaded from a CSV file, and percent values are formatted with `d3.format`.

Apr 4, 2024
Loading thumbnail…

Activity6_Task2

This visualization shows how movie ratings are distributed across six genres, with each genre’s stacked horizontal bar representing the percentage of films falling into five rating bands (below 5.0, 5.0–6.5, 6.5–7.5, 7.5–8.5, above 8.5), summing to 100%. The chart uses D3.js v7’s `d3.stack` to build the stacked bars, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom`/`d3.axisLeft` for axes. Hovering over any segment triggers a tooltip that reveals the exact percentage for that rating band within the genre, using D3’s event handlers on SVG rectangles.

Apr 4, 2024
Loading thumbnail…

Activity6_q1_2

This bar chart displays the population of 20 countries in 2010, sorted by country name along the vertical axis. Each bar’s length encodes the population value, with a formatted x-axis label converting SI units (e.g., “1.2B”) for readability. The visualization is built with React and D3 v5, using `scaleBand` for the categorical axis and `scaleLinear` for the population scale. Data is loaded asynchronously from a CSV file via `d3.csv`, and SVG rectangles render the marks with a native tooltip showing the population value.

Apr 4, 2024
Loading thumbnail…

Activity6_q1_1

A horizontal bar chart displays population figures for ten countries in the year 2000, sorted by country name on the y-axis. The chart uses D3 v5’s `scaleBand` for the categorical axis and `scaleLinear` for the numeric axis, with React components rendering SVG `<rect>` marks. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers (e.g., “1.2B”). Axis ticks and bar tooltips are built from custom React components, while the styling applies a green fill and blue tick lines.

Apr 4, 2024
Loading thumbnail…

Activity6 Task-1

This bar chart displays the population of various countries for the year 2020, with countries listed on the y-axis and their population values on the x-axis. The data is loaded from a remote CSV file via D3's `csv` function, with the population values multiplied by 1000. The visualization is rendered as an SVG using React, with D3's `scaleBand` and `scaleLinear` for axis scaling. Horizontal bars are generated as `rect` elements in the `Marks` component, and tooltips using the `title` element show the formatted population value.

Apr 4, 2024
Loading thumbnail…

6 Buddhas

Six Buddhas overlap in a colorful, layered SVG composition, with each figure rendered as a repeated path element in varying opacities against a floral background image. The visualization uses React to generate nested arrays and map over them, producing random RGB fills and positions for each iteration. The code imports React and ReactDOM, and renders the scenes through JSX with SVG `<path>` and `<g>` elements, applying transforms for scaling and translation.

Apr 4, 2024
Loading thumbnail…

5 Buddhas

Five Buddhas arranges overlapping diamond shapes in a five-by-five grid over a dark background, with each polygon filled by a random RGB color and rotated 45 degrees. The piece layers a Buddha head drawn as an SVG path on top of this generative pattern, creating a dense, colorful composition. Built with React and ReactDOM, the code maps over arrays to produce hundreds of polygons with randomized coordinates, colors, and opacity, while the path data provides the central figure. The result is a vibrant, procedural take on sacred iconography rendered entirely in SVG.

Apr 4, 2024