rishikareddy181@gmail.com

@rishikareddydudipala·13 public vizzes

Act7Question2

A monthly sales area chart visualizes sales figures across twelve months, with a green shaded region emphasizing the trend and volume of sales over time. Built with D3.js v7, it fetches CSV data from a GitHub repository and uses `d3.scaleBand` for the month axis, `d3.scaleLinear` for sales, and an `d3.area` generator to produce the filled path. The SVG rendering includes labeled axes and grid-free styling with a responsive container.

Apr 10, 2025

Loading thumbnail…

Act7Question1

This example shows the distribution of income across five quintiles, from lowest to highest, using a pie chart. The visualization renders an SVG with D3.js v6, employing `d3.pie()` and `d3.arc()` to generate the chart’s slices, while `d3.scaleOrdinal` assigns colors. Each slice displays its quintile label and percentage value, and a legend on the right identifies the categories. The data is hardcoded in the script, not loaded from an external file.

Apr 10, 2025

Loading thumbnail…

Activity7Question1Rishika

This example visualizes the SD23 Inc dataset using a force-directed simulation. It renders a network of labeled nodes, each displaying its name, with the graph layout computed by `d3.forceSimulation`. The visualization applies the simulation to position nodes and handles collision and link forces, while `select` from D3 manipulates the DOM to update node positions. The dataset is loaded from a local file and styled through an external stylesheet.

Apr 10, 2025

Loading thumbnail…

Activity7Rishika

This animated scatter plot explores the Iris flower dataset, cycling through different sepal and petal measurements on the x-axis while consistently plotting against sepal length. The visualization uses D3.js APIs including `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG chart, with a `setInterval` function driving the axis transitions. Species are distinguished through color-coded circles and a static legend, while the D3 `csv` loader imports the data from a GitHub-hosted source file.

Apr 10, 2025

Loading thumbnail…

Fork of IMDb Movie ratings

This stacked bar chart visualizes the distribution of IMDb movie ratings across different genres, showing the percentage of films within each rating category. The visualization uses d3.v7 with SVG rendering, employing `d3.stack()` for data stacking, `d3.scaleOrdinal()` for categorical coloring, and `d3.scaleBand()` for the y-axis layout. Interactive tooltips appear on mouse movement, triggered by event listeners that display exact percentage values using `d3.format()`. The data originates from IMDb movie ratings, with genres mapped along the vertical axis and percentages plotted horizontally.

Apr 4, 2025

Loading thumbnail…

Activity6_2

This stacked bar chart visualizes the distribution of average movie ratings by genre, showing the percentage breakdown across five rating categories. The visualization uses d3.stack() to compute stacked series and d3.scaleOrdinal() for color encoding, with a tooltip revealing exact percentages on hover. The SVG rendering employs d3.axisBottom() with percentage formatting and a custom color palette, while a band scale positions genres vertically. Mouseover events trigger opacity changes and display the tooltip with formatted rating percentages.

Apr 4, 2025

Loading thumbnail…

Activity6_4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position encodes horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG and its color distinguishes different car manufacturers. Built with D3.js v7, the SVG visualization features hoverable bubbles that display the car make via a tooltip, along with legend markers for MPG ranges and color coding for makes. Data is loaded from a remote CSV file.

Apr 4, 2025

Loading thumbnail…

Fork of Fork of Scatter Plot with Shape

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length while using distinct shapes and colors to differentiate the three iris species. The visualization employs d3.scaleLinear for both axes and d3.scaleOrdinal with d3.symbolsFill to map species to symbols. Data points are rendered as SVG paths read from a CSV file, with an embedded legend and labeled axes. The code demonstrates reusable chart components, including a custom axes module and shapeLegend function, built using D3 v6 selection joins and the d3.symbol API.

Apr 4, 2025

Loading thumbnail…

Activty6_3

This scatter plot visualizes the relationship between wing and tail lengths for various bird species, with each point encoded by a distinct shape (circle, triangle, or diamond) to represent different species. The visualization uses D3 v6, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the axes. Data is loaded from a remote CSV file, filtered to remove missing values, and rendered as SVG symbols using `d3.symbol` with a custom legend. The plot includes axis labels, a bold teal title, and a legend positioned on the right side.

Apr 4, 2025

Loading thumbnail…

Activty6_1.1

This horizontal bar chart displays the populations of the top ten countries for the year 2000, with values formatted in billions using D3’s `format` function. Built with React and D3 v5, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, parsing data from a CSV loaded via `d3.csv`. Each bar is a `rect` element with a hover tooltip showing the population value.

Apr 4, 2025

Loading thumbnail…

Acitvity6_1.2

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name, using React to render SVG elements and D3 v5 for scales and formatting. The visualization reads population data from a GitHub-hosted CSV file, applies a linear scale for bar lengths and a band scale for country categories, and formats axis tick labels in abbreviated units (e.g., “1.2B”) via D3’s `format` function.

Apr 4, 2025

Loading thumbnail…

Activity_6_4

This bubble chart visualizes gadget products by plotting price on the x-axis, quantity sold on the y-axis, and using bubble size to represent profit margin, with colors distinguishing product categories. The visualization loads CSV data from a GitHub repository and renders as SVG using d3.csv, scaleLinear, scaleSqrt, scaleOrdinal, and d3.axisBottom/axisLeft. A custom legend displays the categorical color mapping, while hover effects increase bubble opacity and add a stroke, making the chart interactive and readable.

Apr 4, 2025

Loading thumbnail…

Activity6_3

This visualization displays the Iris dataset using a scatter plot, with petal length plotted on the x-axis and petal width on the y-axis, while points are color-coded by species (setosa, versicolor, and virginica). The chart uses D3.js v6, with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` defining the scales and axes. Data is loaded via `d3.csv` from a GitHub gist, and each data point is rendered as an SVG circle with attributes set through D3’s data join.

Apr 3, 2025