sriharshithaanugu5@gmail.com

Fork of Fork of Fork of chart 4

A horizontal bar chart displays the weekly wages of twelve football clubs, sorted from highest to lowest. Each bar’s length encodes the Wage value, and a sequential plasma color scale encodes the same metric, with darker hues indicating higher wages. The visualization is rendered as SVG using D3 v7, with data embedded directly in the page. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes.

Apr 7, 2025

Fork of Fork of Fork of Fork of chart 5

A horizontal bar chart displays the top 10 nationalities by wage, sorted in descending order, with each bar's length proportional to the wage value and colored using a viridis sequential scale. The chart uses D3 v7 to load a CSV file, scale the data linearly and by band, and animate the bars growing from zero via a transition. Hovering reveals a tooltip, and clicking an alert shows the nationality and wage.

Fork of chart 2

This interactive scatter plot visualizes the relationship between wage and potential ratings, with each circle representing a data point colored by wage value. The visualization includes hover tooltips displaying exact values, click interactions that enlarge points and show details, and buttons to reset the zoom or filter for potential values above 70. The chart uses D3 v7 with d3.scaleLinear for axes, d3.scaleSequential with the Viridis interpolator for colors, and d3.select transitions for smooth animations. Data loads from a CSV file into SVG circles rendered on a white background.

chart 1

An interactive scatter plot maps workers' ages against their wages for a small dataset. Each point, rendered as a circle with a color scale based on wage, is drawn using `d3.scaleLinear` for axes and `d3.scaleSequential` with `d3.interpolateCool` for color. The visualization, built with D3 v7, includes SVG axes and tooltips; hovering enlarges a dot and displays its values, while clicking triggers an alert. The animation uses D3's `.transition()` for size changes.

Fork of Fork of chart 3

This chart is a line graph showing the relationship between "Value" and "Wage" from a CSV data file. The line connects data points across a continuous x-axis of Value, with the y-axis representing Wage, starting at zero. Built with D3.js, the visualization uses `d3.scaleLinear` for both axes, with `d3.extent` and `d3.max` setting the domains. The line is rendered as an SVG path using `d3.line`, styled with a brown stroke and two-pixel width. Axis labels are added using SVG text elements.

Activity7_Question_1

This pie chart displays the percentage breakdown of weekly time allocation across categories. Each slice is labeled with its corresponding activity name and percentage, connected by leader lines, with a legend on the right showing hours per category. The visualization uses d3.pie and d3.arc to generate slices, d3.csv to load remote data with d3.autoType, and d3.scaleOrdinal with d3.schemeCategory10 for colors. It renders as SVG, with polylines for leader lines and text elements for labels.

Activity7_Question2

This interactive line and area chart visualizes the monthly USD to INR exchange rate over time. The visualization combines a semi-transparent steelblue area chart with an overlaid line, both colored green, to show the trend. It includes axes labeled "Date" and "Exchange Rate (INR per USD)", plus a tooltip that appears on mouseover, revealing the exact exchange rate at the hovered date via a red focus circle. Built with D3 v7, the code uses `d3.area`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.bisector` for interactivity, with data loaded from a CSV file via `d3.csv`.

Activity7_Question_1

This example displays a centered greeting message using D3.js version 6. It demonstrates a minimal project structure with an HTML page that loads external styles and dependencies. The JavaScript imports the `select` function from D3 and uses it to target a `div` element with the ID `message`, setting its text content to a string exported from a local ES6 module. The styling is defined in a separate CSS file, which applies large, centered font formatting to the message.

Apr 2, 2025

Activty6_Question3_6

This scatter plot visualizes the relationship between weight and height across three cat species (Siamese, Persian, and Maine Coon), using distinct D3 symbols (circle, square, triangle) to differentiate species. The visualization includes a legend mapping each symbol to its species and axis labels for height and weight. Built with D3 v6, it loads CSV data from a GitHub repository, scales the axes starting from zero with `d3.scaleLinear`, renders marks as SVG paths via the `d3.symbol` API, and uses `d3.axisLeft` and `d3.axisBottom` for the axes.

Mar 31, 2025

Activty6_Task3_2

This scatter plot displays the relationship between sepal length and petal length for the three Iris flower species, with each species represented by a distinct symbol shape from D3’s `symbolsFill`. The visualization uses `d3.scaleLinear` for the axes, `d3.scaleOrdinal` to map species to shapes, and `d3.symbol` to generate the marks, with data loaded from a local CSV file via `d3.csvParse`. A custom legend, built with D3’s join pattern, identifies the shape-to-species mapping, while axes are rendered using `d3.axisLeft` and `d3.axisBottom`.

Activty6_Task3_2

Activty6_Task3_1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each species (setosa, versicolor, virginica) represented by a distinct color (skyblue, lightgreen, orange). The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub raw URL, `scaleLinear` for both axes, and `axisLeft`/`axisBottom` to render ticks. SVG circles are positioned via `selectAll` and `join`, with styling based on parsed numeric columns for sepal and petal measurements. The code also includes custom axis labels for petal length and sepal length.

Activty6_Question2_3

This horizontal stacked bar chart visualizes the proportional distribution of ratings across five categories (Technology, Science, Education, Healthcare, Finance) for a single metric. The stacked segments represent rating ranges from "Below 5.0" to "Above 8.5," with each bar scaled to 100% width. The visualization uses D3.js v7 with the `d3.stack()` and `d3.stackOffsetExpand` API to create normalized segments, color-coded via `d3.scaleOrdinal`. Labels display percentage values on segments wider than 40 pixels, and tooltips via SVG `<title>` elements provide exact percentages. Data is embedded directly in the HTML source.

Activty6_Task2

A stacked horizontal bar chart shows the distribution of IMDb ratings across six film genres, with each bar divided into five rating brackets from below 5.0 to above 8.5. The chart reads percentages from a CSV file and renders them as proportional colored segments using D3 v7’s `d3.stack`, `scaleOrdinal`, `scaleLinear`, and `scaleBand` APIs. Mouseover interactions trigger tooltips displaying the exact percentage for each genre-rating combination. The visualization uses an SVG output with custom margins, axis labels, and a legend positioned to the right.

Activty_6_Question_1_2

This interactive bar chart visualizes the population of the top 20 countries for the year 2010. Built with React and D3 v5, the visualization maps country names to a categorical y-axis and population values to a linear x-axis, using SVG rectangles to represent each data point. The code utilizes `d3.scaleBand`, `d3.scaleLinear`, and `d3.format` to construct the axes and format tick labels, with hover tooltips displaying the population. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered using the React DOM, with axes and marks encapsulated as separate components.

Activty_6_Question_1_1

This bar chart displays the population figures for ten countries in the year 2000. Built with the React framework and rendered as an SVG, the visualization uses d3.scaleBand and d3.scaleLinear to position bars and axes, while d3.csv fetches the data from a GitHub-hosted CSV file. The chart encodes population values on the x-axis and country names on the y-axis, with tooltips showing precise values.

Activty6_Task 1

This chart displays the population of 30 countries in 2020 as a horizontal bar chart, with bars extending from a shared left baseline and ordered by country name. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the `csv` function fetches the data from a remote URL. The code defines separate components for axes and marks, with the bottom axis formatted using D3's `format` to abbreviate large numbers (e.g., converting "G" to "B" for billions).

Activty6_Question4_9

This bubble chart visualizes the relationship between population, land area, and GDP for ten countries. Population is plotted on a logarithmic x-axis, area on a linear y-axis, and GDP determines bubble size, with color distinguishing each nation. The D3.js v7 code uses `scaleLog`, `scaleLinear`, and `scaleSqrt` for encoding. Interactive tooltips appear on mouseover, and a legend indicates GDP values for bubble sizes. Data comes from a CSV file, rendered as SVG with hover animations.

Activty6_Task_4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across multiple car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car make, respectively. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleOrdinal` for encoding, and interactive tooltips with mouseover events. Circle size and color are mapped via legends, and rendering uses SVG with hover animations for emphasis.

Fork of Scatter Plot with Shape

This scatter plot visualizes Iris flower measurements, mapping sepal length to the x-axis and petal length to the y-axis for 150 samples. Each species—setosa, versicolor, and virginica—is distinguished by a unique symbol shape using D3’s `d3.symbol()` and `symbolsFill` scale. The chart includes labeled axes via `d3.axisBottom` and `d3.axisLeft`, plus a custom shape legend positioned at a fixed coordinate. Data is loaded from a CSV file and parsed with `d3.csvParse`, with numeric fields converted before rendering.

Fork of IMDb Movie ratings

This stacked horizontal bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing a rating bracket from “below 5.0” to “above 8.5.” The chart uses d3.csv to load the dataset, then applies d3.stack and d3.scaleOrdinal with a custom color palette to build the stacked segments. D3’s scaleBand positions genres on the y-axis, while scaleLinear maps percentages along the x-axis. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment via d3.format.

Scatter Plot with Shape

This scatter plot displays data points as geometric shapes on a two-dimensional grid, with labeled axes reading "x" and "y" values. The visualization uses D3 v7’s `select` and `join` APIs to manage SVG elements, while the `axes.js` module leverages `axisLeft` and `axisBottom` from `d3` to render the coordinate system’s ticks and labels. The code defines a reusable `viz` function that receives a container and state, updating the chart whenever the `setState` callback modifies the state object. The example’s data source is not specified, but the rendering relies on D3’s declarative selection and node-joining patterns to construct the scatter plot.