samithareddy9@gmail.com

Fork for Task 9 & 10 Tutorial

This interactive scatter plot visualizes the Iris dataset, cycling through different petal and sepal measurements on the x-axis every few seconds. It uses D3.js to render colored circles representing three species, with a legend and axis labels updating dynamically. The visualization employs `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, while a `setInterval` timer animates the transitions between dimensions. Data is loaded via `d3.csv` from a remote GitHub gist, and the SVG rendering includes custom styling for titles and annotations.

Apr 21, 2024

Fork of Fork of Piechart ICE7

This pie chart visualizes female dog height data by breed for 2007, fetched from a remote CSV file. Using D3.js v5, it renders an SVG pie chart where each slice represents a breed, with the arc length proportional to the breed's height in inches. The example employs D3 APIs like `pie`, `arc`, `scaleOrdinal`, and `arcGenerator.centroid` for segment placement and labeling, with a legend displaying breed names and values.

Apr 21, 2024

Tutorial 2

This chart shows how movie ratings are distributed across genres, with each genre represented as a horizontal stacked bar divided into five rating categories. The chart uses D3.js v7 with an SVG renderer. The data, loaded from a local CSV file, is transformed with `d3.stack()` and mapped to colors with `d3.scaleOrdinal()`. Hovering over a segment displays a tooltip with the precise percentage for that genre-rating combination, calculated from the values formatted with `d3.format(".2f")`.

tutorial 3.2

This example visualizes the classic Iris dataset, plotting sepal length along the x-axis and petal length along the y-axis for individual flowers. Each data point is represented by a distinct shape corresponding to its species, with a legend showing the species-to-shape mapping. The code builds the scatter plot using d3’s `scaleLinear` and `scaleOrdinal` scales, and renders points via `symbol` generators. Axes are added using `axisLeft` and `axisBottom`, while the shape legend is constructed manually with `symbol` and text elements. Data is loaded asynchronously via `fetch` from a remote CSV file.

bubble char 4

This bubble chart visualizes the correlation between resting blood pressure, maximum heart rate, and cholesterol levels using a medical dataset. Each circle's position represents blood pressure and heart rate, while its radius encodes cholesterol and color indicates slope type. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping. Hover interactions reveal tooltips showing the slope category, with SVG rendering and smooth opacity transitions enhancing readability.

bubble r

This bubble chart visualizes the correlation between average GDP per capita, score, and perceptions of corruption across car manufacturers, with each bubble’s position mapping GDP and score while its size reflects corruption perception. The SVG uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color coding by country. Interactive tooltips appear on mouseover, and a legend displays bubble size and color categories. The chart is rendered with d3.v7 and animated via transition effects.

Bubble Chart be

A bubble chart displays the relationship between maximum heart rate and resting blood pressure, with bubble size encoding age and color indicating the slope of the ST segment. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for position and radius, `d3.scaleOrdinal` with `schemeSet1` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from a CSV file using `d3.csv`.

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, using the x-axis for horsepower, y-axis for torque, and bubble size for MPG. Each car make is individually colored, and the chart includes a legend showing both the MPG scale and make colors. Built with D3.js version 7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes and bubble sizes, and `d3.interpolateTurbo` for color mapping, with interactive tooltips appearing on mouseover. All elements are rendered as SVG, and the chart animates in when the data loads.

Task 8 Tutorial 4

This interactive bubble chart visualizes correlations among penguin measurements—body mass, bill length, and flipper length—using the Palmer Penguins dataset. Each circle’s x-position maps bill length, y-position maps body mass, and radius encodes flipper length. Colors distinguish species, with a legend for flipper size. Hovering reveals the species via a tooltip. Built with D3 v7, the chart uses SVG, linear scales, a color ordinal scale, and event handlers for interactivity.

Task -8 question3

This example displays a scatter plot of penguin measurements, showing flipper length against bill length, with different species represented by distinct shapes. The visualization loads data from a CSV file fetched from a GitHub Gist and parsed with `d3.csvParse`. The plot uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for shape encoding, with marks rendered using `d3.symbol` and the `d3.symbolsFill` range. A legend, built with the `shapeLegend` function, identifies each species by its corresponding shape, and axes are labeled using `d3.axisLeft` and `d3.axisBottom`.

Fork of Task 8 Scatter plot

This fork renders the IRIS dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, and virginica). The SVG visualization uses d3.scaleLinear, d3.extent, axisLeft, and axisBottom to construct the chart, with circles colored via a switch statement. Data is loaded as CSV from a GitHub gist using d3.csv, and the plot fills the browser window with custom margins and rotated axis labels.

Activity 8 Q1.2

This visualization displays population figures for the top countries in 2010 as a horizontal bar chart, with countries listed along the y-axis and population values along the x-axis. The code uses React hooks (useState, useEffect) to load CSV data via d3.csv, then renders SVG rect elements for each bar using React components. Scales are created with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, while d3.format with the '.2s' specifier converts population ticks into abbreviated labels (replacing 'G' with 'B' for billions).

Fork of Activity 8 Q1.1 changing

This visualization displays the top 10 countries by population in the year 2000, with horizontal bars showing population values. It uses React components for rendering SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting via D3's `format` function. Data is loaded as CSV from a GitHub gist using D3's `csv` method. The code slices the dataset to focus on the largest population values, with yellow tick marks and red bars styled through CSS classes.

Activity 8 Q1.1

This example shows a horizontal bar chart comparing the population of 30 countries in the year 2000. It uses React to render SVG elements, with D3 v5’s `scaleBand` and `scaleLinear` defining the chart’s scales. The code loads CSV data from a GitHub gist, formats the population values, and displays them with axes rendered by custom `AxisBottom` and `AxisLeft` components, each with tick marks and labels.

Grades of Students

A stacked bar chart displays the percentage of student grades across six subjects, using categories from Fail to A. The visualization, rendered in SVG with D3 v7, highlights the distribution of grade counts per subject. The x-axis represents the count of students, while the y-axis lists the subjects. Hovering over each segment reveals a tooltip showing the precise percentage for that grade category within the subject. The chart uses a linear scale for counts, a band scale for subjects, and an ordinal color scale to differentiate grade levels.

Stacked bar chart

This stacked bar chart visualizes fish exports by country across the years 2000 to 2009, using multi-series 3D bars to compare annual values per land area. The chart is built with D3 v7 and the d3-3d library, which renders the bar chart in an X3DOM scene. Data is loaded as CSV from a GitHub Gist, with numeric values parsed for each year before being passed to the chart via the `d3.x3d.chart.barChartMultiSeries()` API. The visualization highlights temporal trends and category differences in a three-dimensional perspective.

Fork of IMDb Movie ratings

This stacked bar chart visualizes the distribution of math scores across different parental education levels. Each bar represents a parental education category, broken into stacked segments for math score ranges, with hover tooltips showing precise percentages. The visualization uses D3 v7 with SVG rendering, employing d3.stack() for data stacking, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. CSV data is loaded asynchronously via d3.csv, with the chart displaying diverging stacked bars oriented along a horizontal axis.

Fork of Fork of Olympic Data stacked Bar Graph

A stacked bar chart visualizes a subset of Olympic student performance data, plotting gender-race/ethnicity combinations against stacked score components for math, parental education level, and writing. The visualization uses D3.js v7’s `d3.stack()` with a diverging offset, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the y-axis, rendered as SVG rectangles. Data is loaded via `d3.csv` from a GitHub gist, sorted and truncated to the top 20 entries, with axes, rotated labels, and a legend created through D3’s axis and selection APIs.

Fork of IMDb Movie ratings

This stacked bar chart visualizes the distribution of education levels among female and male groups, showing the proportion of each subgroup within each gender. The code uses D3 v7 to load CSV data, stack the categories with `d3.stack()`, and render the results as SVG rectangles. A color scale maps each education level to a distinct color, while an axis is added using `d3.axisBottom` and `d3.axisLeft`. The visualization emphasizes the relative composition of educational backgrounds across the two gender groups.

Apr 9, 2024

Activity 8_2

This stacked bar chart visualizes the impact of movie genre on rating distributions, showing the percentage of each rating level within genres. It uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to construct the stacked bars, with `d3.scaleBand()` for genre positioning and `d3.scaleLinear()` for the percentage axis. Mouseover events trigger tooltips displaying precise percentages for each rating segment. The SVG render uses data from a CSV file containing student test scores and demographic information.

Apr 9, 2024

Activity 8

This bar chart shows the top 30 countries by 2020 population, with horizontal bars sorted by country name along the y-axis and population extent along the x-axis. The D3 v5 code builds a linear x-scale from the maximum population value and a band scale with 15% inner padding for the categorical y-axis. React components render SVG rectangles for each bar, with tooltips formatted using the “G” to “B” abbreviation replacement. Data is loaded from a CSV via `d3.csv` from a GitHub gist.

Apr 9, 2024

Fork of Stylized Bar Chart

This fork of the stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values formatted in billions. Built with React and D3 v5, it loads data from the United Nations World Population Prospects 2019 via a CSV file, then renders the visualization as SVG. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and custom React components for the axes and marks, with formatted tick labels and hover tooltips.

Apr 8, 2024

Bar Graph

This bar chart visualizes the total price for each vehicle type, with bars drawn as SVGs using D3 scales. The data is loaded from a CSV file, aggregated by type, and rendered with a horizontal bar layout. The visualization uses React to manage the application state and D3 v5 functions like `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to build the chart and axes.

Apr 8, 2024

Fork of Bar Graph

A horizontal bar chart visualizes total car sales prices by vehicle type from a cleaned CSV dataset. The React app loads data with D3’s `csv` function and aggregates price values per type using a reduce operation. D3 `scaleBand` and `scaleLinear` map categories and sums to SVG rectangles. Axes are rendered with `axisBottom` and `axisLeft`, while CSS transitions support hover effects and a tooltip overlay.

Apr 8, 2024

Fork of Activity 07

This visualization, rendered in React with SVG, layers hundreds of semi-transparent, randomly colored polygons onto a black background. Each polygon’s position, size, and rotation are generated using the deterministic pseudo-random method `Math.random(a)`, producing a chaotic, generative composition. Overlaid on this is a single intricate white path drawing, set against the dark backdrop, which appears to depict a Buddha-like figure in meditation. The combination of the dense, colorful geometric shapes and the minimalist line art creates a striking contrast between digital noise and deliberate form.

Mar 17, 2024