Skip to main content
Log in
K

kotasc18@gmail.com

@Kota1609·15 public vizzes

Loading thumbnail…

Question2-Activity-7

This example displays an area chart of Alabama's average monthly temperatures over time, using a blue filled path to emphasize the temperature trend. The chart is rendered as a static SVG, with axes labeled in bold text. The visualization loads data from a remote CSV via D3's `csv` function, then uses `scaleTime` and `scaleLinear` for scales, `area` for the generator, and `axisBottom` and `axisLeft` for axes. The data is parsed by constructing date objects from month and year fields, and the chart is drawn within a fixed 900x500 SVG container.

Nov 4, 2024
Loading thumbnail…

Question-Activity-7

This example visualizes the distribution of athletes across different sports using a pie chart. It loads a CSV dataset from a GitHub gist, groups the data by the sport column, and shows counts as pie slices with color-coded labels and a legend. The code uses D3’s `csv`, `pie`, `arc`, and `scaleOrdinal` APIs to generate the chart with a labeled x- and y-axis.

Nov 4, 2024
Loading thumbnail…

7.1-Tutorial1

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis to compare petal and sepal measurements across three species. The animation uses a `setInterval` loop to update the plot, while the scatter plot is constructed with D3's `scaleLinear` and `axisBottom`/`axisLeft` from the `d3` module via UNPKG. Data is loaded from a GitHub gist as CSV, and the SVG rendering includes a color-coded legend, axis labels, and a title.

Nov 4, 2024
Loading thumbnail…

Activity-6-Q9

This bubble chart visualizes the relationship between GDP (x-axis), population (y-axis), and life expectancy (bubble size and color) for 15 countries. Data is loaded from a CSV file via `d3.csv`, and circles are positioned with `d3.scaleLinear` scales. Interactive tooltips appear on mouseover events. A legend at the right encodes life expectancy values using circle radii. The SVG rendering includes axis labels and a title, with styling applied through CSS classes.

Oct 22, 2024
Loading thumbnail…

Activity-6-Task-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle is positioned by its horsepower and torque values, with its size encoding highway MPG and color differentiating the manufacturer. Built with D3 v7, the visualization uses scaleLinear for axes and bubble sizing, scaleOrdinal for color, and mouse event handlers to display a tooltip showing the car make. The SVG includes a legend for MPG values and color-coded manufacturer labels.

Oct 22, 2024
Loading thumbnail…

Activity-6-Q6

This scatter plot displays the relationship between horsepower and weight for ten car models, with each manufacturer represented by a distinct symbol shape. Using D3 v7, the visualization employs `scaleLinear` for both axes and `scaleOrdinal` with `symbolsFill` to map manufacturers to symbol types. The code demonstrates modular functions for axes, scatter plot rendering, and a custom shape legend, pulling data from a local CSV file.

Oct 22, 2024
Loading thumbnail…

Activity-6-Task-3.2

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the x- and y-axes, with different species represented by distinct point shapes. The visualization includes labeled axes and a custom shape legend to identify each species. Built with D3 v7, it uses `select` and `join` for efficient DOM updates, `scaleLinear` and `scaleOrdinal` for scaling, and `symbol` for generating point paths. Data is loaded asynchronously from a remote CSV via `csvParse`, with numeric fields converted before rendering.

Oct 22, 2024
Loading thumbnail…

Activity-6-Task-3

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring points by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. It also encodes sepal length and width into the circle attributes `rx` and `ry`, creating elliptical markers. Built with D3 v6, the code loads CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scales, and renders SVG circles with `selectAll` and `join`. Axis labels are added via `axisLeft` and `axisBottom`.

Oct 22, 2024
Loading thumbnail…

Activity-6-Q3

A stacked horizontal bar chart displays the percentage distribution of five energy sources—Coal, Solar, Wind, Nuclear, Hydro, and Natural Gas—across five categories from below 10% to above 40%. The chart uses d3.stack, d3.scaleOrdinal, d3.scaleBand, and d3.scaleLinear to render SVG rectangles, with tooltips on mouseover showing exact percentages via d3.format. A legend identifies each color-coded energy source. Data comes from the embedded energy_data.csv file.

Oct 22, 2024
Loading thumbnail…

Activity-6-Task2

This chart visualizes the distribution of IMDb movie ratings across different genres, with each genre’s ratings segmented into five ordered categories from “below 5.0” to “above 8.5.” Using a stacked bar chart, the height of each bar segment encodes the percentage of films in that rating bracket. The visualization is built with d3.scaleLinear, d3.scaleBand, and d3.stack, and includes interactive tooltips for each segment. Data is loaded from a local CSV file, and the SVG rendering uses a color scale with five distinct hues.

Oct 22, 2024
Loading thumbnail…

Activity-6-Q1.2

This example displays a horizontal bar chart showing the population of the first 20 countries from a 2010 CSV dataset, using an SVG rendering approach within a React application. The chart incorporates D3.js v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with axes formatted using D3's `format` function to abbreviate large numbers. Each bar includes a tooltip showing the population value via the SVG `<title>` element, while the data is loaded from a GitHub-hosted CSV file using `d3.csv` and processed asynchronously with React hooks.

Oct 22, 2024
Loading thumbnail…

Activity-6-Q1.1

This chart, built with React and D3, presents a horizontal bar chart of population figures for the year 2000, showing only the first ten countries from a remote CSV dataset. The visualization uses D3’s `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, rendering bars as SVG rectangles. The code demonstrates importing from the D3 library and local ES6 modules, with axes and marks as separate components. The chart includes a tooltip on each bar and custom axis formatting, converting values like “1.2B” from the D3 `format` function.

Oct 22, 2024
Loading thumbnail…

Activity-6 Task 1

This example displays a horizontal bar chart of population data for 30 countries in 2020, sourced from a CSV file hosted on GitHub. It sorts countries along the y-axis using a band scale, while the x-axis uses a linear scale with SI-prefix formatting to abbreviate large numbers. Built with React and rendered as SVG, the chart creates bars using `rect` elements and provides tooltips via a `title` element. D3 functions like `scaleBand`, `scaleLinear`, and `format` handle the scaling and tick formatting.

Oct 22, 2024
Loading thumbnail…

Buddha Question 10

This example displays a single Buddha silhouette repeated across the canvas as six mirrored reflections, each rendered as a violet SVG path with a white stroke. Built with React and SVG, the code uses hardcoded path data to draw the figure, with each `g` element applying translation and scaling transforms. The visualization is displayed over a floral background image, with paths positioned at different coordinates to create a symmetrical, decorative pattern. The project uses the React and ReactDOM libraries to render the SVG dynamically.

Oct 15, 2024
Loading thumbnail…

10 Buddhu

Ten Buddhu overlays twenty instances of a Buddha silhouette path, each rotated and positioned via SVG polygons that are randomly generated and transformed. The visualization uses React to render an SVG scene, combining the fixed Buddha path with layered, semi-transparent geometric shapes. The code relies on React’s component model and SVG polygon elements, with random values driving point coordinates, fill colors, and rotations, creating a chaotic, colorful overlapping effect against a black background. The result is a dense, abstract composition where the Buddha image is obscured by the dynamic, swirling polygon layers.

Oct 15, 2024