S

shreshikaveerannagari@gmail.com

@shreshika12·24 public vizzes

Loading thumbnail…

activity7_question2

This visualization displays AI adoption rates in agriculture by continent from 2010 to 2024, using stacked semi-transparent area layers for six regions. Multiple area paths are generated with d3.area for each continent, colored with rgba fills and overlaid to show comparative trends. The data is loaded from a CSV via d3.csv, with linear scales for year and adoption percentage, rendered as SVG. The chart includes axes, labels, a title, and a custom legend, all built using D3 v7 APIs such as d3.scaleLinear, d3.axisBottom, and d3.axisLeft.

Loading thumbnail…

activity7_question1_1

This visualization uses a layered area chart to show AI adoption rates in agriculture across six continents from 2010 to 2024. The chart displays semi-transparent stacked regions for North America, Europe, Asia, Africa, South America, and Oceania, with an SVG rendering via d3.area paths and linear scales for year and percentage axes. The code loads CSV data from a GitHub gist, processes it with d3.csv, and includes a color-coded legend and axis labels, all built with d3.v7.

Loading thumbnail…

activity7_question2

This example shows AI adoption in agriculture by continent from 2010 to 2024 using layered filled areas. The visualization uses d3.csv to load data from a GitHub gist, then draws six stacked area paths with d3.area, colored by region. It employs d3.scaleLinear for x and y axes, d3.axisBottom and d3.axisLeft for tick marks, and a custom legend created with SVG rectangles and text. The chart is rendered entirely in SVG via d3.select, with styling applied directly through D3 attributes.

Loading thumbnail…

activity7_question1

This example shows a pie chart of future tech project funding, with each slice colored by project name and labeled with funding amounts. The visualization uses D3.js v5 to load CSV data from a GitHub gist, and renders an SVG with a legend listing each project and its funding value. Interactive tooltips display detailed information about each slice on mouseover, including company, year, and tech area. The chart uses `d3.pie` and `d3.arc` generators with `d3.scaleOrdinal` for color mapping.

Loading thumbnail…

activity6_tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding species with distinct colors. The D3 v6 code loads CSV data from a GitHub repository, then uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create the chart. Circles are drawn via `svg.selectAll('circle').data(marks).join('circle')` for each observation. Axis labels appear in green, and the plot fills the browser window, with a legend implied by the color mapping for setosa, versicolor, and virginica species.

Loading thumbnail…

activity6_tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for individual flowers while coloring each point by species (setosa, versicolor, and virginica). The visualization uses D3 v6 to load the CSV data from a GitHub repository and render the scatter plot as an SVG, with linear scales for both axes and axis labels for petal length and sepal length. The code constructs circles with D3 joins, assigning distinct colors based on species categories, and includes left and bottom axes using D3's axis functions.

Loading thumbnail…

Fork of activity6_tutorial3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each specimen while coloring points by species (setosa, versicolor, or virginica). The D3 v6 code loads CSV data from a GitHub repository and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the SVG visualization. The plot also encodes sepal dimensions in each point's radius (`rx`/`ry` attributes), though these are not scaled to the axes. The visualization renders circles with custom colors and labeled axes in an HTML page.

Loading thumbnail…

activity6_question1.2

This bar chart displays the 2010 populations of 20 countries, with each country's population represented by the length of a light green horizontal bar. The visualization uses D3 v7 to create a linear x-scale for population values and a banded y-scale for country names, with data loaded from a CSV file. Axis components format population tick labels using d3.format to show values in billions (e.g., "1.2B"), and the chart includes labeled axes for both population and country.

Loading thumbnail…

activity6_tutorial1

This horizontal bar chart displays the top 30 countries by population in 2020, using a lightgreen fill for each bar. The chart sorts countries along the y-axis with population values on the x-axis, formatted with a custom tick formatter that converts values to billions. Built with D3 v7 and SVG, the visualization leverages `d3.scaleLinear` and `d3.scaleBand` for positioning, while `d3.axisBottom` and `d3.axisLeft` render the axes. Data is loaded asynchronously from a CSV file via `d3.csv`, with the population column parsed as a number.

Loading thumbnail…

activity6_question1

This horizontal bar chart visualizes the population of the top 10 countries in the year 2000, with each bar’s length encoded by population value. A linear x-scale (`d3.scaleLinear`) handles the numeric axis with custom tick formatting that abbreviates millions as “B” for billions, while a band scale (`d3.scaleBand`) positions country labels on the y-axis. Light green rectangles are drawn using SVG `rect` elements. Data is loaded asynchronously from a GitHub-hosted CSV via `d3.csv`, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

activity6_task1

This horizontal bar chart displays the populations of the top 30 countries in 2020, sorted by country name. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis to position the light green bars. The data is loaded from a CSV file hosted on GitHub, with the population values formatted as billions (e.g., "1.2B") on the x-axis. Both axes include custom labels, with the x-axis labeled "POPULATION-2020" and the y-axis labeled "Countries".

Loading thumbnail…

activity6_tutorial3.2

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each point's shape encoding the species. It uses D3's `scaleLinear`, `scaleOrdinal`, and `symbolsFill` to map data to scales and shapes, and `axes` to draw labeled axes. A custom legend displays the shape-to-species mapping. Data is fetched from a remote CSV and parsed via `csvParse`.

Loading thumbnail…

Fork of activity6_tutorial3

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored and shaped by species. It includes a custom shape legend for the three species. The implementation uses D3 v7 modules like `scaleLinear`, `scaleOrdinal`, and `symbol` to generate marks, while `axisLeft` and `axisBottom` handle the axes. Data is loaded asynchronously via `fetch` and parsed with `csvParse` from a GitHub-hosted CSV file. The chart is rendered into an SVG that fills the viewport.

Loading thumbnail…

activity6_tutorial

This example presents an interactive scatter plot of Fisher’s Iris dataset, visualizing sepal length against petal length with point shapes distinguishing the three species. Built with D3 v7, it uses `d3.scaleLinear` for the axes, `d3.scaleOrdinal` with `symbolsFill` to encode species as distinct symbols, and custom modules `axes.js` and `shapeLegend.js` to generate a labeled legend. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric fields coerced before rendering.

Loading thumbnail…

activity6_question4

This bubble chart visualizes the relationship between marketing spend, revenue, and employee count for ten smartphone brands using a scatter plot with bubble size encoding employee numbers. The D3.js v7 implementation uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radius, and `d3.scaleOrdinal` with the `d3.schemeSet3` color palette for brand differentiation. Interactive tooltips appear on hover, showing detailed metrics for each brand, while a legend identifies colors. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

activity6_tutorial4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across various car makes from a CSV dataset. Each circle represents a car brand, with its position determined by the x- and y-scales for horsepower and torque, while the circle’s radius encodes highway MPG using a linear scale. The chart uses d3.csv to load the data, d3.scaleOrdinal with interpolateTurbo for color mapping by make, and SVG circles with mouseover, mousemove, and mouseleave handlers to display a tooltip. A legend shows MPG values and make colors.

Loading thumbnail…

activity6_question3.1

This scatter plot shows the relationship between the population and GDP of various universities. Each circle represents a university, with its position determined by population (on a logarithmic x-axis) and GDP (on a linear y-axis), and is color-coded by university name. The chart uses a legend to distinguish between universities. The visualization is built with D3 v6, using `d3.scaleLog` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes, loading data from a remote CSV file.

Loading thumbnail…

activity6_tutorial3.2

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each point’s shape encoding the species. It uses d3’s `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to assign distinct shapes to categories, and a custom legend built with `symbolGenerator`. Data is fetched from a remote CSV and parsed via `csvParse`. The visualization is rendered using d3’s join operation for efficient SVG updates.

Loading thumbnail…

activity6_tutorial3.2

This example shows an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. Points are colored and shaped by species, with a custom legend displaying the categorical shapes. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` and `symbolsFill` for shape encoding, and `d3.csvParse` to load data from a remote CSV file. Axes and legend are modularized into reusable functions that render via SVG.

Loading thumbnail…

activity6_tutorial2

This visualization shows the percentage distribution of IMDb ratings across different genres, with each genre displayed as a horizontal stacked bar chart. The bars are segmented into five rating categories, from "below 5.0" to "above 8.5", using a color-coded ordinal scale. The chart is rendered as an SVG using D3.js v7, employing `d3.stack` for the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.axisBottom` for the percentage x-axis. Interactive tooltips provide exact percentage values on hover, while the data is loaded from a CSV file.

Loading thumbnail…

activity6_question2

This visualization shows the distribution of movie ratings across six genres, with each genre represented as a horizontal stacked bar that breaks down the proportion of films falling into five rating brackets, from below 5.0 to above 8.5. The chart uses D3.js's `d3.csv` to load the data and `d3.stack` to compute the cumulative segments, with `d3.scaleOrdinal` supplying the categorical color scheme. Each bar segment displays a tooltip with the exact percentage via SVG `title` elements, and the axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

activity6_tutorial2

This example shows the distribution of movie ratings across six genres using a stacked horizontal bar chart. The data comes from a CSV file containing proportional ratings for five score ranges, from “below 5.0” to “above 8.5.” Each genre is a horizontal bar, divided into colored segments whose widths represent the percentage of ratings in each category. The code builds the chart with d3.stack, d3.scaleBand, and d3.scaleLinear for positioning, and uses d3.axisBottom and d3.axisLeft for the axes. A legend identifies the color-coded rating intervals.

Loading thumbnail…

activity6_question2.1

A stacked bar chart displays the distribution of IMDb ratings across six movie genres, with the x-axis showing the proportion of ratings within each of five score ranges from below 5.0 to above 8.5. The chart uses a horizontal layout where each genre’s bar is composed of color-coded segments that sum to 100 percent. The visualization is built with D3.js v7, using `d3.stack()` to compute the stacked values, `d3.scaleBand` for the genre categories, and a linear scale for the percentage axis. The data is loaded from a CSV file, with genre names mapped to the y-axis and a legend identifying each rating range.

Loading thumbnail…

activity6_question2

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 stacked segments, d3.scaleBand() for genre positioning, and d3.scaleLinear() for percentage widths. Color-coded rectangles represent each rating category, and mouseover events trigger a tooltip displaying the exact percentage. Data comes from a CSV file, rendered as SVG with axes and labels styled via CSS.