Skip to main content
Log in
P

penujulilikhil01020@gmail.com

@Likhil2k1·14 public vizzes

Loading thumbnail…

Activity 7.1 Question 2

This example shows an area chart of total exam scores for individual students, plotted along a categorical Student ID axis on the x-axis and a linear Total Score axis on the y-axis. It loads D3 v6 from a CDN and uses `d3.csv` to fetch remote student score data, then renders an SVG path using `d3.area`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with labels added for both dimensions.

Nov 7, 2024
Loading thumbnail…

Activity 7.1 Question 1

This example shows the distribution of car horsepower values as an interactive pie chart. It groups the data into ten horsepower bins using `d3.histogram`, then visualizes each bin’s count with `d3.pie` and `d3.arc` in an SVG. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) colors each slice, and a separate HTML legend displays the bin ranges. The data is loaded asynchronously via `d3.csv` from a GitHub Gist, demonstrating local ES6 module imports and D3’s histogram, pie, and arc APIs.

Nov 7, 2024
Loading thumbnail…

Activity 6_Question 9

This bubble chart visualizes the Iris dataset by mapping sepal length and sepal width to the x- and y-axes, while petal length controls the radius of each semi-transparent steelblue circle. It imports data via `d3.csv`, uses `d3.scaleLinear` and `d3.scaleSqrt` to encode variables, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart demonstrates how bubble size adds a third quantitative dimension to a scatterplot.

Oct 25, 2024
Loading thumbnail…

Activity 6_Tutorial 4

This example visualizes the correlation between average torque, horsepower, and highway MPG across multiple car makes using a bubble chart. Each circle represents a car make, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size proportional to highway MPG and color encoding the make. The chart includes interactive tooltips, a legend for bubble sizes, and a color legend. It is built with D3 v7, using d3.csv for data loading, d3.scaleLinear for axes and sizing, and d3.scaleOrdinal for color mapping.

Oct 25, 2024
Loading thumbnail…

Activity 6_Question6

This example shows an SVG scatter plot of eight data points, each colored by category according to the `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart maps `valueX` to the horizontal axis and `valueY` to the vertical axis using `d3.scaleLinear` ranges and `d3.extent` for domain calculation. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and data is loaded asynchronously from `data.csv` via `d3.csv`. The visualization demonstrates basic D3 v7 data binding, margin conventions, and stylized axis labels.

Oct 25, 2024
Loading thumbnail…

Activity 6 Task 3.2

This example demonstrates a scatter plot of the Iris dataset, using D3 v7 to visualize sepal length against petal length with points colored and shaped by species. It loads data from a CSV file via a URL and renders an interactive SVG chart with labeled axes. The code highlights the use of D3 modules such as `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`, along with a custom legend for categorical shapes. The visualization updates responsively to the browser window size.

Oct 25, 2024
Loading thumbnail…

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica) using orange, skyblue, and lightgreen markers. It loads data from a CSV file via D3's `csv` function, then renders circles on an SVG canvas using `scaleLinear` and `extent` to set scales. Axes are generated with `axisLeft` and `axisBottom`, labeled with custom text elements. The visualization demonstrates D3 v6 imported via UNPKG and uses local variable destructuring for modular code.

Oct 25, 2024
Loading thumbnail…

Activity 5_Question 3

A stacked bar chart displays regional product sales across four regions, with each bar segmented by product category. The visualization uses D3 v7’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles with color-coded segments per product. Data loads from a CSV file via `d3.csv` with `d3.autoType`, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. A legend maps product names to their ordinal color range, annotating each segment’s contribution.

Oct 25, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" as percentages. It loads CSV data and uses d3.stack to compute the stacked series, d3.scaleBand for the genre axis, d3.scaleLinear for the percentage axis, and d3.scaleOrdinal with a custom color palette. SVG rectangles render the segments, and mouse events trigger an HTML tooltip displaying the precise percentage for each segment.

Oct 25, 2024
Loading thumbnail…

Activity 6_Question 1.2

This example displays a horizontal bar chart of population data for 20 countries in 2010, using React with SVG rendering. The visualization imports D3 v5 modules for data loading and scales: `scaleBand` positions country categories along the y-axis, while `scaleLinear` maps population values to bar widths on the x-axis. CSV data is fetched from a GitHub-hosted dataset and formatted using D3’s `format` function. Axes are custom React components, and each bar includes a native SVG `<title>` element for tooltip support. The styling uses CSS classes for marks and ticks.

Oct 25, 2024
Loading thumbnail…

Activity 6_Question 1.1

This bar chart displays the population of ten countries in the year 2000, with horizontal bars sorted by country name. The visualization uses React to render SVG elements and D3 v5 for data loading and scales. Population values are loaded from a remote CSV file, processed by multiplying the year 2000 column by 1000, and formatted using D3’s `format` with SI notation. The chart includes custom axis components, axis labels, and tooltips showing formatted population values.

Oct 25, 2024
Loading thumbnail…

Activity 6

This example displays a horizontal bar chart of country populations in 2020. It loads data from a remote CSV file and renders the chart using SVG within a React component. The code uses D3 version 5's `scaleBand` and `scaleLinear` for axes, and custom React functions handle axis ticks and bar marks. The bars show population values, with a tooltip revealing the formatted number on hover. The visualization is built with ReactDOM and styled with Poppins font from Google Fonts.

Oct 25, 2024
Loading thumbnail…

6 buddha

A generative Buddha image is rendered as a complex SVG path, repeated and layered with varying scale, position, and color to produce a dense, overlapping abstract composition. The design uses a nested loop in React to stamp out many small colored rectangles as a background grid, while the primary Buddha path is drawn using raw SVG path data. The visualization is built with React and rendered through a standard `<svg>` element, with dynamic `fill` and `opacity` values assigned randomly. The overall effect combines a photographic floral background, a noisy point grid, and the repeated sacred silhouette to create a visually intricate and colorful pattern.

Oct 19, 2024
Loading thumbnail…

5 Buddhas

A layered composition of five abstract Buddha-like figures emerges from overlapping, randomly rotated polygons across a black background. The visualization uses React and SVG to render a dense grid of diamond shapes with randomized positions, colors, and opacity, while each Buddha path is drawn from a detailed coordinate string. The code employs React’s `map` function to generate polygons, with SVG elements like `<polygon>` and `<path>` for the figures, creating a chaotic yet visually rich pattern of translucent shapes and intricate line work.

Oct 14, 2024