S

sriyaalugupalli@my.unt.edu

@SriyaAlugupalli·27 public vizzes

Loading thumbnail…

Fork of A7-Q1. samp

This visualization displays a responsive bar chart showing the population of countries for the year 2000, with each bar labeled on the y-axis and horizontal bar lengths representing population values. The chart uses D3 scales to map data to screen coordinates, with React components (AxisBottom, AxisLeft, Marks) rendering SVG elements for ticks and bars. Data comes from a CSV file loaded via d3.csv, with population values transformed in a row function. The bars include tooltips showing the formatted population value when hovered, and the chart is styled with green fills and blue tick lines.

Loading thumbnail…

A7-Q1

This visualization displays a pie chart comparing the population of ten countries for the year 2000. Built with React and D3 v5, it renders an SVG with colored slices, percentage labels, and a legend. The code uses d3.pie, d3.arc, and d3.schemeCategory10 for the chart, while data is loaded via d3.csv and transformed in a custom useData hook.

Loading thumbnail…

A7-Q2

This stacked area chart displays the proportional distribution of IMDb ratings across six movie genres. The visualization reveals how genre influences rating patterns, showing that documentaries have a notably higher percentage of high ratings while action films skew toward lower scores. Hovering reveals exact percentage values in pop-ups, with each genre's total summing to 100%. Built with d3.v7, the chart uses `d3.area()` with `d3.curveBasis` for smooth curves, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.csv()` to parse the data. The SVG output includes a legend and rotated genre labels.

Loading thumbnail…

Activity7-tutorial

This animated scatter plot visualizes the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) while keeping sepal length on the y-axis. The SVG renders colored circles by species, with a legend and axis labels updated on an interval. It uses D3's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` reusable component to handle data parsing and chart rendering.

Loading thumbnail…

Fork of Activity6-Q4.9

This bubble chart visualizes how movie ratings are distributed across six genres, with each circle representing the proportion of films in a genre falling into a rating category. The circle size encodes the proportion value using `d3.scaleLinear`, while genre colors come from `d3.schemeSet2` via `d3.scaleOrdinal`. Rendered as SVG with D3 v7, the chart uses `d3.scaleBand` axes and interactive tooltips shown on mouseover. The dataset includes genres like Documentary and Action, with rating bands from below 5.0 to above 8.5.

Loading thumbnail…

Activity6-Q4.9 2

This bubble chart shows the relationship between electric car brands and their maximum price in euros. Each bubble’s vertical position and size encode the price, while color uses a plasma gradient to provide an additional visual cue. The chart is built with D3 v7, using the `d3.csv` loader to fetch data, `d3.group` and `d3.max` to aggregate by brand, and `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleSequential` for the scales. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity6-Q3.6

This dot plot shows how IMDb movie ratings are distributed across five genres, with each genre’s ratings broken into five percentage categories that sum to 100%. Hovering over a dot reveals the exact percentage for that rating category. The visualization uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, and d3.scaleOrdinal to map values, with mouseover and mouseout events controlling a tooltip. The SVG chart includes a legend and axis labels.

Loading thumbnail…

Activity6-Task3

This scatter plot visualizes the Iris dataset by mapping petal length and petal width for each sample, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Additional sepal length and width values are encoded but not directly displayed. The data is loaded from a GitHub gist and rendered across the full browser window with rotated axis labels for petal length.

Loading thumbnail…

Fork of Activity6-Q3.6

This D3.js (v7) scatter plot visualizes population data over time, with each circle representing a country-year observation. The plot distinguishes USA data points in blue from other countries in orange, using year on the x-axis and population on the y-axis. The code loads CSV data from a GitHub repository, converts numeric fields, applies linear scales via `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Circle positions are set using the scaled x and y coordinates, with point radius fixed at 5 pixels. The SVG output automatically sizes to the browser window dimensions.

Loading thumbnail…

Activity6-Q3.6

A scatter plot displays population versus year for a global dataset, with circles colored blue for USA and orange for other countries. The visualization uses D3.js v7 with SVG rendering, loading CSV data from a GitHub repository. D3 scales map Year and Population values to pixel coordinates, while d3.axisBottom and d3.axisLeft generate the axes. Hover interactions are not implemented, and the plot focuses on revealing temporal population trends across countries.

Loading thumbnail…

Fork of Fork of Activity6-Q2.3

This stacked bar chart illustrates the distribution of numerical measurements—sepal length, sepal width, petal length, and petal width—across the three iris species. Each horizontal bar represents a species, segmented by measurement type, with the total length normalized to 100%. Hovering over a segment displays a tooltip with the precise measurement value. The visualization is built with D3 v7, using `d3.stack()` for data aggregation, `d3.scaleBand()` for the categorical axis, and `d3.scaleLinear()` for the continuous axis, rendered as SVG.

Loading thumbnail…

Fork of Activity6_Task2 sample

A stacked bar chart visualizes Iris dataset measurements across four numeric variables—sepal length, sepal width, petal length, and petal width—grouped by species. Each horizontal bar shows the cumulative measurement values, with segments colored by variable. Hovering over a segment highlights it and displays the exact measurement value via a tooltip. The visualization uses D3 v7 with SVG rendering. It employs `d3.stack()` for data stacking, `d3.scaleOrdinal()` for colors, and `d3.scaleBand()` for the categorical species axis. Interactive tooltips are implemented using mouse event handlers.

Loading thumbnail…

Activity6-Q3.6

This scatter plot displays car makes on the y-axis against combined performance metrics—horsepower, torque, and highway MPG—on the x-axis, with colored circles distinguishing each category. The visualization loads CSV data from a GitHub repository using d3.csv, then transforms the dataset into combined points for three metrics per car. It renders an SVG using d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-axis placement, and d3.axisLeft/axisBottom for tick marks. A legend and axis labels clarify the grouped metric values.

Loading thumbnail…

Fork of Activity6_Q2.3

This stacked bar chart visualizes the Iris dataset, showing the distribution of four flower measurements (sepal and petal length/width) across three species. The visualization uses the d3.stack generator to create the layered bar segments, with d3.scaleBand and d3.scaleLinear handling the categorical and continuous axes respectively. Each species group displays four colored segments corresponding to the measurement variables, rendered as SVG rectangles within the D3.js v6 framework. The chart is interactive only through standard browser zoom, with axis labels and tick marks formatted using D3's axis functions.

Loading thumbnail…

Activity6-Q1.2

This bar chart displays the population of the top 20 countries in 2010, ranked by country name on the vertical axis and population count on the horizontal axis. Built with D3 v5 within a React framework, it renders as an SVG. The chart uses D3's `scaleBand` and `scaleLinear` for axes, utilizes `csv` to load data from a GitHub repository, and formats tick labels with `format`. Hovering over a bar reveals a tooltip with the population value.

Loading thumbnail…

Activity-6_Q1.1

This visualization displays a horizontal bar chart comparing population figures for the top 10 countries in the year 2000, with country names on the y-axis and population values on the x-axis using a band scale and linear scale. The chart is built with React and D3 v5, loading data from a remote CSV via d3.csv, and renders SVG elements including axes and rectangular marks. Hovering over a bar reveals a tooltip with the formatted population value, using d3.format to abbreviate large numbers.

Loading thumbnail…

Activity6-Task4

This D3.js bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position, y-position, and size encode the three metrics, while its color categorizes the brand. The SVG rendering includes a legend for MPG values and a color-coded make key. Interactive tooltips appear on hover via mouse events. The visualization reads data from a CSV file and employs `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette.

Loading thumbnail…

Activity6-Task3.2

This interactive scatter plot visualizes the Iris dataset, showing sepal length against petal length while using distinct filled symbols to encode the three iris species. The chart is built with D3 v7, using `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for the shape encoding, and `symbol()` to generate the custom marker paths. A shape legend, created with `shapeLegend`, labels the species categories, while the data is fetched from a remote CSV and parsed with `csvParse`.

Loading thumbnail…

Activity6-Task3

This scatter plot from the D3 v6 gallery visualizes the classic Iris dataset, mapping petal length and width for each flower sample. The visualization uses color-coded circles to distinguish between the three Iris species: sky blue for setosa, light green for versicolor, and orange for virginica. Built with the D3 `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, the chart loads CSV data from a remote GitHub gist and renders an SVG with labeled axes for petal dimensions.

Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, showing the proportion of films within five rating brackets that sum to 100%. D3.js v7 uses a linear scale for the percentage x-axis and a band scale for genres, with an ordinal color scale mapping each rating category. Hovering over a bar segment triggers a tooltip displaying the exact percentage for that genre-rating combination. The SVG rendering and custom styles are defined in the accompanying CSS and JavaScript files.

Loading thumbnail…

Activity-6_Task 1

This visualization is a horizontal bar chart displaying the 2020 population estimates for 30 countries, sourced from a CSV file hosted on GitHub. The chart uses green bars, with the length of each bar proportional to the population value, and includes a formatted x-axis that abbreviates large numbers (e.g., converting billions to "B"). The code leverages D3's `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and React's `useEffect` hook to asynchronously load and parse the data with `csv`. The rendering is done entirely through SVG elements, with the data plotted using `rect` marks and tooltips provided via `<title>` elements.

Loading thumbnail…

Activity-6_Task 1

This example demonstrates how to combine D3.js v5 with ES6 modules to render a simple text message in a web page. It loads D3 from a CDN and uses the `select` API to target a `div` element and set its content. The message text is defined in a separate local ES6 module, `myMessage.js`, and imported into the main script. Styling is handled through an external CSS file. The visualization showcases modular code organization and D3’s DOM manipulation capabilities.

Loading thumbnail…

Activity_6

This example renders a centered, large-font message reading “Hello VizHub!” on a plain webpage. It demonstrates fundamental VizHub workflows: loading D3.js via UNPKG, importing the `select` function from the D3 module, and importing a local ES6 module (`myMessage.js`) that exports the message string. The code uses `d3.select` to target the `#message` div and set its text content, while CSS styles control the font size and alignment. The visualization is static, showing a minimal integration of D3 with modular JavaScript and external stylesheets.

Loading thumbnail…

Six Buddha Reflections with Flower background

Six Buddha silhouette paths are rendered in overlapping layers over a flower background image. The SVG displays repeated path data with varying transforms and scales, creating a mirrored, kaleidoscopic effect of the Buddha figure. React 16 manages the component hierarchy, while the background uses an HTML image element referencing an external flower photograph. The composition combines the sacred geometric imagery with natural floral patterns in a dark-themed presentation.

Loading thumbnail…

Buddha with flower backgroung

This visualization renders a meditative Buddha silhouette over a floral background image. The SVG graphic is constructed using React and ReactDOM, mapping over a nested array to repeat the flower image multiple times across the canvas. The Buddha figure itself is drawn as a complex SVG path with numerous cubic Bezier curve commands, defining an intricate outline. The code uses `<image>` elements to import the flower photograph and a `<g>` transformation to scale and position the Buddha path within the 960 by 1000 viewport.

Loading thumbnail…

tutorial viz

This visualization layers hundreds of semi-transparent, randomly colored circles over an intricate Buddha line drawing. The circles scatter across the canvas using cascading `Array.map` loops with `Math.random` for positional and color variation. The Buddha path is rendered as an SVG `<path>` with a stroke, translated and scaled via a `<g>` transform. Built with React and ReactDOM, it renders static SVG output without interactions or data bindings.

Loading thumbnail…

Buddha Viz

This visualization renders a Buddha-like form through a dense field of overlapping, randomly colored polygons on a black background. Built with React and SVG, the code maps an array of numbers to nested polygon elements, each with randomized positions, fill colors, and rotation transforms. A separate, precisely defined SVG path traces the Buddha silhouette, displayed atop the generative geometric pattern. The piece combines algorithmic randomness with a structured religious icon.