Skip to main content
Log in
S

Shiva Sai Reddy

@ShivaSaiReddyKodandapuram·15 public vizzes

Loading thumbnail…

Activity7_Q2

A stacked area chart displays population trends by continent over time, aggregating country-level data into five continental groups. D3 v6 loads population data from a CSV URL and maps countries to continents before stacking the values. The visualization uses `d3.stack`, `d3.area`, `scaleTime`, `scaleLinear`, and `scaleOrdinal` to render smooth curves with a color legend. Data spans multiple years, with axes formatted via `axisBottom` and `axisLeft`. The chart renders as an SVG appended to the HTML body, with the `curveBasis` interpolation applied to the area generator.

Nov 6, 2024
Loading thumbnail…

Activity7_Q1

This pie chart shows the top five causes of death in the United States for 2017, based on data from NCHS. It is built with D3 v6, using the `pie`, `arc`, and `scaleOrdinal` functions from the D3 library. The chart is rendered as an SVG with a legend, and it loads data from a remote CSV file via `csv`.

Nov 6, 2024
Loading thumbnail…

activity_7

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. D3 version 6.7.0 is used via UNPKG, with the `csv` method loading data and `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` powering the axes. Circles are colored by species through custom logic, and a `setInterval` timer updates the plot’s x-value accessor every few seconds, re-rendering the SVG to cycle between four measurement columns.

Nov 6, 2024
Loading thumbnail…

Activity6_question4

This bubble chart visualizes mobile phone specifications, plotting processor speed on the x-axis, battery life on the y-axis, and RAM size as the bubble radius. It uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and includes interactive tooltips for detailed data. The chart features an animated legend for RAM values and reads data from a local CSV file.

Oct 25, 2024
Loading thumbnail…

Activity6_task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle is positioned by its horsepower (x-axis) and torque (y-axis), with the circle’s radius scaled to its highway MPG value, while color encodes the car brand. The visualization uses D3 v7 to load data via `d3.csv`, scales with `scaleLinear`, and renders as SVG. Users can hover over a bubble to see its make via a tooltip. A legend displays MPG values and brand colors.

Oct 25, 2024
Loading thumbnail…

Activity6_question3

A scatter plot displays the relationship between horsepower and fuel efficiency for car models, with each point's shape encoding the model. The visualization loads CSV data from a GitHub repository and uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to render marks. Axes and a shape legend are built with custom modules using `axisLeft`, `axisBottom`, and `symbolGenerator`. The chart dynamically resizes to the viewport and demonstrates modular ES6 imports and state management.

Oct 25, 2024
Loading thumbnail…

Activity6_Tutorial3.2

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis, petal length to the y-axis, and using distinct symbols to represent the three species. The visualization loads data from a remote CSV file using `fetch` and `csvParse`. D3 v7 scales, including `scaleLinear` and `scaleOrdinal`, position the marks and determine their shapes, while `axisBottom` and `axisLeft` render the axes. A custom legend built with `symbolGenerator` and `symbolsFill` identifies each species. Code is modularized into local ES6 modules for axes, plotting, and legend components.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width. Each circle represents one flower, colored by species (setosa, versicolor, or virginica) via a switch statement in the `marker` function. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes and data loading. The plot dynamically sizes to the browser window and renders SVG circles with a radius of 5 pixels, reading data from a remote GitHub-hosted CSV file.

Oct 25, 2024
Loading thumbnail…

Question2_activity6

This visualization shows the distribution of participation percentages across age brackets (Below 15, 15-20, 21-30, 31-40, Above 40) for six sports, using a stacked horizontal bar chart. Each sport’s bar is divided into segments colored by age group, with a legend on the right. Hovering over a segment reveals an interactive tooltip with the specific percentage. Built with D3 v7, the code uses `d3.csv`, `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering to an SVG canvas with data loaded from a local CSV file.

Oct 25, 2024
Loading thumbnail…

Tutorial2_Activity6

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar segment representing the percentage of titles falling into one of five rating ranges. The visualization uses D3 v7’s `d3.stack()` to compute stacked series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each genre-rating combination. Data comes from a local CSV file, and the chart renders as SVG with a custom ordinal color scale.

Oct 25, 2024
Loading thumbnail…

Fork of Activity6_Q1.2

This example displays a horizontal bar chart of 2010 population data for twenty countries, loaded from a CSV file. The chart uses React with D3 v5 scales and axes, including `scaleBand` for the y-axis and `scaleLinear` for the x-axis. SVG rectangles render the bars, with tooltips appearing on hover. The code imports D3 utilities like `csv`, `format`, and `max` to process and format the data, replacing 'G' with 'B' for billion labeling.

Oct 25, 2024
Loading thumbnail…

Activity6_Q1.1

A horizontal bar chart displays the populations of ten countries in the year 2000. The visualization uses React to render an SVG, with D3 v5 providing the scaleBand and scaleLinear functions for positioning bars and axes. Data is loaded asynchronously from a CSV file via d3.csv. Custom React components define the axes and marks, with hover tooltips showing formatted population values.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1

This horizontal bar chart displays the 2020 populations of the top 30 countries, arranged from largest to smallest. The visualization uses React and D3 v5 to render scalable vector graphics (SVG) directly within a React component. Data is loaded from a CSV file via D3’s `csv` function, with population values parsed and formatted using `d3.format`. Axis components generate SVG line and text elements, while rectangle marks include native SVG tooltips to reveal precise population figures on hover.

Oct 25, 2024
Loading thumbnail…

Fork of Hello VizHub

A minimal D3 example demonstrates how to load D3 v5 via UNPKG and use ES6 module imports in VizHub. The code imports `select` from the `d3` package and a local `message` constant from `myMessage.js`, then uses `select('#message').text(message)` to display “Hello VizHub!” in a styled div. The example also includes a regex literal and variable assignment, though these have no visible effect. It shows the basic structure of importing dependencies and local modules within this framework.

Oct 24, 2024
Loading thumbnail…

5 Buddhas

The visualization displays five overlapping Buddha silhouettes, each rendered with a distinct color, set against a dark background with a floral image. Built with React and SVG, the piece uses a static `path` element with a long, complex coordinate string for the Buddha shape, applying different `fill` colors and `stroke-width` values. The code constructs an array using a cubic function but the primary visual is the layered, tinted path rendering within an SVG canvas.

Oct 19, 2024