Skip to main content
Log in
B

badiniswetha@gmail.com

@badiniswetha·12 public vizzes

Loading thumbnail…

q2_activity7

This area chart visualizes global video game sales aggregated by year, showing the total sales trend over time. The visualization uses an SVG rendering with a steelblue filled area path, created using D3.js v7. The code loads CSV data from a GitHub repository, filters out entries with missing years, and uses `d3.rollup` to sum sales per year. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with linear scales for both year and sales values.

Apr 8, 2025
Loading thumbnail…

q1_activity7

This visualization presents a pie chart showing the distribution of Netflix content by type, differentiating between Movies and TV Shows. It loads the Netflix titles CSV dataset from a GitHub repository and uses D3.js v7 to aggregate the data with `d3.rollups` and render the chart with `d3.pie` and `d3.arc` into an SVG. The implementation also uses `d3.scaleOrdinal` for color encoding and creates a custom HTML legend alongside the chart. The display includes count labels on each slice and explanatory axis labels below.

Apr 8, 2025
Loading thumbnail…

task1_q2

This horizontal bar chart ranks the top 20 countries by population in 2010, using light green bars that darken on hover. The chart loads CSV data from a GitHub repository, formats population values with d3.format, and renders SVG elements through React components. D3’s scaleBand and scaleLinear handle the axes, while custom React components (AxisBottom, AxisLeft, Marks) create the ticks, labels, and rectangular marks with tooltip titles.

Apr 6, 2025
Loading thumbnail…

task1_q1

This chart displays a horizontal bar chart ranking the top 10 countries by population in the year 2000. The visualization uses D3.js v5 for data scaling and formatting, with React for component structure, and renders as SVG. It loads CSV data via the `csv()` API and displays the population values with tooltips on hover.

Apr 6, 2025
Loading thumbnail…

task1_activity6

This bar chart displays the 2020 population estimates for 30 countries, ordered vertically by country name with horizontal bars representing population values. Population data is loaded from a GitHub-hosted CSV file and formatted using D3's SI format to display values in billions. The visualization is built with React components, using D3 v5 scales (`scaleBand` and `scaleLinear`) to map data, while SVG rectangles with native `<title>` tooltips render the bars. Axes are generated manually through custom React components rather than D3 axis generators, with styling applied via CSS classes.

Apr 6, 2025
Loading thumbnail…

task2_q1

This stacked bar chart shows agricultural trade data for Afghanistan from 2014 to 2018, displaying Import, Export, Production, and Consumption values per year. Each bar segment represents one category, with colors distinguishing the four metrics. The visualization uses D3.js v7 with `d3.stack()` to compute the stacked series, `d3.scaleBand()` for the x-axis years, and `d3.scaleLinear()` for the y-axis values. Data is hardcoded in the script rather than loaded from the accompanying CSV file. The chart renders as SVG with axis generators `d3.axisBottom()` and `d3.axisLeft()`.

Apr 6, 2025
Loading thumbnail…

task4_q1

This bubble chart visualizes smartphone specifications by plotting storage capacity on the x-axis, RAM on the y-axis, and using bubble area to represent price. The color of each circle encodes the phone brand, using a Tableau10 ordinal color scale via `d3.scaleOrdinal`. The chart uses `d3.scaleLinear` for both axes and `d3.scaleSqrt` for bubble radius scaling, with all marks rendered as SVG circles. Data is loaded from a remote CSV file using `d3.csv`, and axis ticks are generated with `d3.axisBottom` and `d3.axisLeft`.

Apr 6, 2025
Loading thumbnail…

task3-q1

This scatter plot compares the Attack and Defense stats of Pokémon, with each point colored by the Pokémon's primary type. The visualization uses D3.js v7 to load a CSV dataset from GitHub, map the data to linear scales for both axes, and render SVG circles. Axis labels are added as text elements, and a categorical color scheme distinguishes the different Pokémon types.

Apr 6, 2025
Loading thumbnail…

task3.2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for three iris species. The plot encodes species identity through different symbol shapes: circles for Iris-setosa, squares for Iris-versicolor, and triangles for Iris-virginica, with a legend displayed in the upper-right corner. The visualization is built using D3 v7, with axes rendered via d3.axisBottom and d3.axisLeft, points drawn as SVG paths using d3.symbol, and data loaded from a CSV URL using d3.csv.

Apr 6, 2025
Loading thumbnail…

swetha_task3

This scatter plot displays the Iris dataset, mapping petal length and width for each specimen. Points are colored by species: sky blue for setosa, light green for versicolor, and orange for virginica. The visualization uses D3 v6's scalable vector graphics (SVG) rendering, with scales created via `d3.scaleLinear` and axes drawn using `d3.axisLeft` and `d3.axisBottom`. The data is loaded from a CSV file through D3's `d3.csv` function. Additionally, the code loads sepal measurements into each data point, though the plot currently only shows petal dimensions.

Apr 4, 2025
Loading thumbnail…

task4_swetha

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a make, positioned by horsepower on the x-axis and torque on the y-axis, with circle size scaled to highway MPG and color mapped by make. The visualization, rendered in SVG, uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with interpolateTurbo for colors, and interactive tooltips on mouseover. A legend displays both the MPG size scale and color-coded make categories.

Apr 4, 2025
Loading thumbnail…

Activity_6_task2

This stacked bar chart shows the proportion of IMDb ratings across six movie genres, with each bar segmented by five rating ranges from "below 5.0" to "above 8.5." The visualization uses d3.stack and d3.scaleOrdinal to construct the stacked segments, with a tooltip displaying exact percentages on hover. The chart is rendered as SVG using D3 v7, with axes and labels styled via CSS, and the data is loaded from a CSV file.

Apr 3, 2025