K

kommineniamarasadasivani2002@gmail.com

@KSivani30·22 public vizzes

Loading thumbnail…

Question_2_Sivani

This visualization by KSivani30 uses a multi-series area chart to display the proportion of ratings across various music genres. It shows how rating proportions differ per genre, with each colored area representing a separate data column from the loaded CSV source. The chart is rendered as an SVG using the d3 framework and draws the areas with the `d3.area` generator, applying a category-10 color scheme for differentiation. Axes are labeled "Genres" and "Rating Proportion" via appended text elements, and a legend identifies each series.

Loading thumbnail…

Question_1_Sivani

This example shows the distribution of video game genres by the count of titles rated above 8.5, using a pie chart with a color-coded legend. It loads CSV data from a GitHub repository via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the slices, rendered as SVG paths with a category10 color scale. The chart includes a manually positioned legend built with SVG `<rect>` and `<text>` elements, and styling is applied via `style('opacity')` and `stroke` attributes.

Loading thumbnail…

Tutorial_Sivani

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling the x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a custom legend. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` module, rendering as SVG with a `setInterval` driving the axis rotation. Data comes from a GitHub-hosted Iris dataset.

Loading thumbnail…

Fork of Activity7_Question1

This pie chart visualizes browser usage statistics, with each slice labeled by its browser name and thickness proportional to its usage percentage. A legend on the right maps the categorical colors from `d3.scaleOrdinal` and `d3.schemeCategory10` to each browser with its numeric value. The chart is built with D3 v7, using the `d3.pie` layout and `d3.arc` for path generation, with data loaded via `d3.csv` from a remote gist. SVG rendering places the chart and legend, with text labels positioned via `arc.centroid`.

Loading thumbnail…

Question 1 Activity 7

This chart shows the distribution of Iris species in a pie chart, displaying each species with its count. The visualization is built with D3.js (v6.7.0) using the `d3.pie` and `d3.arc` layouts, with slices filled using `d3.scaleOrdinal` and `d3.schemeCategory10`. The SVG paths are generated server-side and rendered as inline SVG elements. Data comes from a remote CSV file loaded via `d3.csv` from the author's GitHub repository, and species frequencies are computed with `d3.rollup`. Hovering highlights slices via CSS transforms.

Loading thumbnail…

Activity 7

This animated scatter plot displays the Iris dataset, cycling through four different petal and sepal measurements on the x-axis while the y-axis remains sepal length. It demonstrates a reusable scatter plot component built with D3.js, using the `csv` and `select` modules for data loading and SVG rendering. The plot updates its axis mapping every few seconds via `setInterval`, recoloring each species differently. A custom legend and axis labels are drawn alongside the animated circles, with the entire visualization rendered as an interactive SVG animation.

Loading thumbnail…

Activity 7 sivani

This visualization presents a pie chart displaying categorical data as proportional segments within a circular layout. The chart is rendered as an SVG element sized 500 by 500 pixels, with each slice representing a data category. The code uses D3.js version 7’s pie layout and arc generator to compute the angles and paths for each segment. The chart is constructed using static data defined in the accompanying piechart.js file, with styling applied through an external stylesheet.

Loading thumbnail…

Question2_Sivani

This visualization uses a stacked horizontal bar chart to show the percentage distribution of the iris dataset attributes (sepal length, sepal width, petal length, and petal width) across three iris species. The D3.js v7 code loads data from a CSV file and uses `d3.stack()` to compute the stacked values, with `d3.scaleBand()` for the categorical y-axis and `d3.scaleLinear()` for the percentage x-axis. An interactive tooltip displays the exact percentage value when hovering over each segment, while the color scale assigns distinct colors to each attribute.

Loading thumbnail…

Question4_Sivani

This interactive bubble chart visualizes the Iris dataset, showing the correlation between sepal length, sepal width, and petal length. Each circle's x/y position encodes sepal length and width, while its radius encodes petal length, and its color distinguishes the three iris species. The D3.js chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for species colors, and includes a legend and interactive tooltips.

Loading thumbnail…

Tutorial_4_Sivani

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes using data from a CSV file. The D3 v7 visualization renders circles as SVG elements, with x and y axes mapping horsepower and torque while bubble size and color encode MPG and car make. Users can hover over individual bubbles to reveal tooltips displaying the make, and a legend demonstrates how circle size corresponds to MPG values using d3.scaleLinear and d3.scaleOrdinal with interpolated turbo colors.

Loading thumbnail…

Fork of Question3_Sivani

This scatter plot visualizes car dataset attributes, showing the relationship between horsepower and highway fuel efficiency (MPG) for different vehicle makes. Each circle represents a car, colored by its manufacturer using a Tableau10 ordinal color scale. The visualization is built with D3 v6, using `scaleLinear` for axes, `extent` to compute domains, and `axisLeft`/`axisBottom` for tick marks. Data is loaded asynchronously from a remote CSV file, with the legend manually constructed and positioned to identify each make.

Loading thumbnail…

Question3_Sivani

This scatter plot visualizes the relationship between horsepower and highway MPG for cars in a bubblechart dataset, with each point colored by car make. The visualization uses D3 v6 to load CSV data from a GitHub repository, then renders SVG circles scaled via `scaleLinear` for both axes. Axes are generated with `axisLeft` and `axisBottom`, while colors are assigned using `scaleOrdinal` with `schemeTableau10`. A legend is appended to distinguish makes, and all elements are drawn directly to the SVG canvas.

Loading thumbnail…

Tutorial_3.2_Sivani

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each point shaped according to species. It uses a customized D3 module system, importing the `axisLeft`, `axisBottom`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill` APIs to render axes, scales, and categorical shapes. The chart employs a shape legend to map species to symbols, and it loads data from a remote CSV file, parsing and converting the numeric columns before plotting. The visualization is built using D3 v7 within the VizHub framework, with a modular structure separating scatter plot, axes, and legend logic.

Loading thumbnail…

Fork of Tutorial_3_sivani

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers, with points colored by species (setosa, versicolor, and virginica). The plot uses a linear scale for both axes and positions each circle using the `scaleLinear` and `extent` functions from D3. Axis labels are added via `axisLeft` and `axisBottom`, while the visualization is rendered as an SVG. Data is loaded from a remote CSV file, and the chart updates its size based on the browser window dimensions.

Loading thumbnail…

Tutorial_3_sivani

This example displays a centered, large-scale text message reading “Hello VizHub!” on a white background. The visualization uses D3.js version 6 to select the HTML div element with the ID “message” and apply the text content from an imported ES6 module. The styling, defined in an external CSS file, controls the text alignment and font size. The code imports the `select` function from the D3 library and demonstrates basic DOM manipulation alongside module-based data sharing.

Loading thumbnail…

Tutorial_2_sivani

A stacked horizontal bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating brackets from below 5.0 to above 8.5. The visualization uses d3.stack() to compute the stacked segments and d3.scaleOrdinal with five distinct colors to differentiate the rating categories. A tooltip appears on mouseover, displaying the exact percentage for each genre-rating combination. The chart is rendered as SVG with d3.v7, using scales like d3.scaleLinear and d3.scaleBand, and reads data from a CSV file containing genre percentages.

Loading thumbnail…

Question1.2_sivani

A horizontal bar chart ranks countries by their 2010 population, with bars extending from a shared left axis for easy comparison. The visualization is built with React, rendering SVG elements through D3 v5's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with population values fetched from a CSV via `d3.csv` and formatted with `d3.format`. Axes are custom components that draw ticks and labels, and each bar includes a tooltip via a `<title>` element showing the formatted population value.

Loading thumbnail…

Fork of Question_1_sivani

This horizontal bar chart displays the population figures for ten countries in the year 2000. Each bar is rendered as an SVG `<rect>` using React, with its length proportional to the population value. The chart’s axes are generated using `d3.scaleBand` for the categorical country labels and `d3.scaleLinear` for the continuous population scale, with tick formatting via `d3.format`. The data is loaded from a remote CSV file using `d3.csv`.

Loading thumbnail…

Question_1_sivani

This example displays a simple centered text message using D3.js v6. The code selects a div element with the id "message" using `d3.select` and sets its text content to a string imported from a separate ES6 module. The text is styled through an external CSS file, which centers it horizontally and sets a large font size. The visualization demonstrates basic DOM manipulation and modular JavaScript organization within a D3-based project setup.

Loading thumbnail…

Fork of Tutorial_1_Sivani

This example shows a horizontal bar chart of 2010 population estimates for select countries, with green bars sorted by country name and labeled axes. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars, `csv` to load data from a GitHub-hosted CSV file, and SVG `rect` elements to render marks. The code defines reusable Axis and Marks components, formats tick labels with `format`, and includes a tooltip title on each bar showing the population value.

Loading thumbnail…

Tutorial_1_Sivani

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, with a green bar for each nation and blue tick lines along the bottom axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `d3.format` to abbreviate large population values (e.g., “1.2B”). Data loads from a CSV via `d3.csv` and renders as SVG rectangles with tooltips on hover.

Loading thumbnail…

Activity 6_Task 1

A grouped bar chart displays categorical data with horizontal bars for each category, colored by series. The chart uses D3.js v6 to scale and position bars, with custom React components for axes and marks. Axes render ticks and labels via `xScale.ticks()` and `yScale.domain()`, while bars are positioned using scale band widths. The visualization reads from an external data file loaded through custom hooks, with styling applied via CSS.