alapati98@gmail.com

@Keerthiala·12 public vizzes

Question 2

This example visualizes the average price of avocados over time, aggregating daily data into monthly averages. The chart uses an area plot with overlaid circular markers to highlight each monthly data point, rendered as SVG. The code loads data from a CSV file using `d3.csv`, aggregates it with `d3.rollups` and `d3.mean`, and scales time and price with `d3.scaleTime` and `d3.scaleLinear`. An interactive tooltip appears on hover, and axes are generated via `d3.axisBottom` and `d3.axisLeft`.

Apr 29, 2024

Loading thumbnail…

Question 1

This example displays a pie chart of road accident counts by vehicle type, using data loaded from a remote CSV via `d3.csv`. The visualization animates tooltips on mouseover, showing each category’s value. It constructs the chart with `d3.pie` and `d3.arc`, applying an ordinal color scale with `d3.schemeCategory10` and rendering SVG paths within a fixed-width container.

Apr 28, 2024

Loading thumbnail…

Activity6Question4

A bubble chart maps candy characteristics, plotting sugar percentage on the x-axis and price percentage on the y-axis, with bubble size representing win percentage. The chart uses d3.csv to load data from a GitHub repository, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeCategory10 for colors. An SVG rendering includes interactive tooltips that display candy name, sugar, and price values on mouseover.

Apr 15, 2024

Loading thumbnail…

Activity6Task4

A bubble chart displays correlations between average horsepower, torque, and highway MPG for various car makes, using D3.js. The visualization uses an SVG with circles whose size encodes MPG, while color distinguishes vehicle brands. The code reads data from a CSV file, applies linear scales for axes and bubble radius, and maps manufacturer names to a turquoise color scheme using d3.scaleOrdinal. Interactive tooltips appear on mouseover, showing the car make. A legend displays both the bubble size scale for MPG and color samples for each marque.

Apr 15, 2024

Loading thumbnail…

Activity6Question3

This scatter plot compares house sale price against living square footage for King County properties, with each point colored by waterfront status using an ordinal color scale. The D3 v6 visualization loads CSV data from a GitHub repository, converts numeric fields, and renders circles on an SVG canvas. Axis labels, ticks, and a custom legend are drawn using `d3.axisLeft`, `d3.axisBottom`, and manual SVG elements, employing `scaleLinear` for both axes and `scaleOrdinal` for the two-category color encoding.

Apr 15, 2024

Loading thumbnail…

Activity6Task3.2

A scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with symbols colored by species. It displays a legend for the species categories. The implementation uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, `symbol`, `axisLeft`, and `axisBottom` to render the chart, axes, and shape legend. Data is loaded from a remote CSV via `csvParse` and rendered into a responsive SVG canvas.

Apr 15, 2024

Loading thumbnail…

Activity3Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species (setosa, versicolor, or virginica). The chart uses D3 v6's `csv`, `scaleLinear`, `extent`, and axis helpers to load data from a GitHub-hosted CSV and render an SVG with circular markers. Axis labels are added via SVG text elements, with transformations rotating the y-axis label.

Apr 15, 2024

Loading thumbnail…

Activity6Question2

This example shows the distribution of ratings across five categories—AI Research, Machine Learning Development, and others—using a stacked horizontal bar chart. Each bar segment represents the percentage of ratings within a rating band, such as "below 5.0" or "7.5-8.5". The visualization uses d3.stack() to structure the data and d3.scaleOrdinal for color mapping. Mouse interactions trigger tooltips that display exact percentages, while d3.axisBottom and d3.axisLeft label the chart. Data is loaded from a CSV file with d3.v7.

Apr 15, 2024

Loading thumbnail…

Activity6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. Each bar segment represents the percentage of movies within a rating interval, from “below 5.0” to “above 8.5”. The chart, rendered as SVG, uses D3 v7’s `d3.stack`, `scaleOrdinal`, `scaleLinear`, and `scaleBand`. Hovering over a segment highlights it and displays a tooltip with the exact percentage, computed via `d3.format`. Data originates from a local CSV file.

Apr 15, 2024

Loading thumbnail…

Activity6_Question1.2

This horizontal bar chart displays the population of 20 countries as of 2010, sorted by country name. The visualization uses React with D3 v5 to render SVG elements, employing `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom axis components. Data is loaded asynchronously from a remote CSV file using D3’s `csv` function, with tooltips formatted using `format('.2s')` to display values in billions. The chart is styled with Poppins font and orange bars, demonstrating local ES6 module imports and D3’s UNPKG distribution.

Apr 15, 2024

Loading thumbnail…

Activity6_Question1.1

This bar chart displays the population of ten countries for the year 2000, sorted with a horizontal layout. Built with the React framework and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles via the `Marks.js` component. Data is loaded asynchronously from a CSV file using D3's `csv` function, with tick formatting converting values to a compact "B" (billions) notation.

Apr 15, 2024

Loading thumbnail…

Activity6_Task1

This visualization displays a horizontal bar chart of population figures for 30 countries in 2020, with bars scaled logarithmically from zero. The React-based example uses D3 v5 modules like `scaleBand` and `scaleLinear` for axes and positioning, while rendering SVG rectangles through custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data loads from a remote CSV via `d3.csv`, with population values transformed by multiplying the 2020 column by 1000. Tick labels use `d3.format` to abbreviate large numbers (e.g., 'B' for billions), and tooltips provide formatted values on hover.

Apr 15, 2024