R

Rukmini Devi Y

@rukminisharma0108·20 public vizzes

Loading thumbnail…

ra_assignment_2

This visualization shows the relationship between house area and price in a dataset loaded from a CSV file, using an area chart to display the trend of rising prices as square footage increases. The D3.js v6 code sorts the data by area and applies linear scales for both axes, then generates the shaded area using the `d3.area()` API with a green fill and opacity. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, while the SVG output includes labeled axes and a title. The chart is built with `d3.select`, `d3.csv`, and an SVG container, displaying points where the y-axis represents price in dollars and the x-axis represents area in square feet.

Loading thumbnail…

ra_assignment

A pie chart displays the distribution of housing furnishing statuses (furnished, semi-furnished, unfurnished) from a CSV dataset. The chart uses D3 v6's `d3.pie` to compute arc angles, `d3.arc` for path generation, and `d3.scaleOrdinal` for categorical color mapping. Labels show each category and its count, positioned at arc centroids. A legend lists the categories with colored swatches. Data loads asynchronously via `d3.csv` from a GitHub gist, with SVG rendering and explicit chart dimensions and margins.

Loading thumbnail…

Activity 6

This pie chart visualizes the distribution of heart disease cases, showing 138 instances with the condition against 100 without. The D3.js code uses `d3.scaleOrdinal` for categorical coloring, `d3.pie` for arc generation, and `d3.arc` for path construction, rendering to an SVG canvas. Labels appear at arc centroids, while a legend below maps colors to categories. The data is hardcoded in the script.

Loading thumbnail…

Activity 6 Question 3

This scatter plot visualizes the relationship between hours studied and exam scores for 20 students, with points colored by class participation level (low, medium, high) using an ordinal color scale. The D3.js v7 code loads inline CSV data, assigns each point to a category based on participation thresholds, and renders an SVG with linear axes. A `d3.scaleOrdinal` maps categories to colors, while `d3.scaleLinear` scales the x-axis (hours) and y-axis (exam score), with margins and gridlines defining the chart layout.

Loading thumbnail…

Activity 6 Task 3.2

A scatter plot of the Iris dataset displays sepal length versus petal length, with points shaped by species. The visualization uses D3 v7's `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to map data values and render distinct mark types, while a custom legend explains the shapes. Axes are drawn with `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub-hosted CSV and parsed with `csvParse`.

Loading thumbnail…

Activity 6 Tutorial 3.2

This scatter plot uses the classic Iris dataset to show the relationship between sepal length and petal length, with different symbols distinguishing the three iris species. The visualization is built using D3.js v7, leveraging `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map species to distinct shapes, and a custom shape legend. The code imports specific D3 modules like `axisLeft`, `axisBottom`, and `symbol` to render the plot, while the CSV data is fetched from a GitHub repository and parsed with `csvParse`.

Loading thumbnail…

Activity 6 Task 3.1

This scatter plot visualizes the Iris dataset, showing petal length versus petal width for three flower species, colored skyblue, lightgreen, and orange. It renders circles as SVG elements using D3 v6, importing functions like `scaleLinear`, `extent`, and `axisLeft` from the d3 module. Data loads from a remote CSV URL via `d3.csv` and maps to x and y coordinates with linear scales, while axis labels display the measured attributes.

Loading thumbnail…

Activity 6 Question 2

This visualization displays a stacked horizontal bar chart comparing sales of laptops, phones, and tablets across five stores, with a subtitle referencing a clothing category. The chart uses D3 v7's `d3.stack` and `d3.scaleOrdinal` for color encoding, `d3.axisBottom` and `d3.axisLeft` for axes, and renders as SVG. Interactive tooltips show exact sales values per category and store. Data is loaded from an embedded CSV.

Loading thumbnail…

Activity 6 Task 2

This stacked bar chart displays the distribution of movie ratings across six genres, breaking down each genre’s percentage into five rating categories from “below 5.0” to “above 8.5.” Using D3 v7 and SVG rendering, the code applies `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to construct the bars, while `d3.axisBottom` and `d3.axisLeft` handle axes. Interactive hover effects via tooltips show exact percentages with `d3.format`, and a legend clarifies color mapping for each rating category.

Loading thumbnail…

Activity 6 Q 4.9

This bubble chart compares smartphone brands across battery life (hours), screen size (inches), and charging speed (watts). Each circle’s x-position encodes battery life, y-position encodes screen size, and its area encodes charging speed, with colors distinguishing brands. The D3.js v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data comes from a hardcoded CSV-like array. A hover tooltip displays exact values for each smartphone model.

Loading thumbnail…

Activity 6 Task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position on the x- and y-axes represents horsepower and torque, while its radius encodes highway MPG and its color maps to the car make via a categorical scale built with `d3.scaleOrdinal`. Hovering reveals a tooltip with the make name. The visualization renders as an SVG using `d3.select` and `d3.csv` to load `bubblechart.csv`, with axes from `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Task 3 Q 3.2

This interactive scatter plot uses D3 v7 to visualize two quantitative variables across multiple categories, with each category represented by a distinct geometric shape from `symbolsFill`. The visualization applies `scaleLinear` for both axes and `scaleOrdinal` for shape encoding, rendering data points as SVG paths using the `symbol` generator. A shape legend explains the categorical mapping, while axes with labels are constructed using `axisLeft`, `axisBottom`, and custom label positioning from the `axes` module. The example demonstrates reusable chart components through ES6 module imports and data-join patterns for updates.

Loading thumbnail…

Activity6_Task3.1

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers with colors denoting species (setosa, versicolor, virginica). Built with D3.js v6, it loads CSV data from a GitHub repository, then uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and plot circles. Additional attributes store sepal measurements, though only petal dimensions are rendered. The SVG output is styled with green axis labels and a red title.

Loading thumbnail…

Activity6 Q 2.3

This stacked bar chart shows sales figures for laptops, phones, and tablets across five retail stores, with each store represented as a horizontal bar broken into three colored segments. The visualization uses d3.stack() to process the CSV data, d3.scaleLinear and d3.scaleBand for positioning, and an ordinal color scale for categories. Interactive tooltips appear on mouseover, displaying exact sales values via a custom HTML div, while the SVG rendering includes axis labels and a legend.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart shows the distribution of movie ratings across genres, with each genre broken into five rating categories from “below 5.0” to “above 8.5” using percentage proportions. The visualization uses D3 v7’s `d3.stack` to compute stacked bars, `d3.scaleOrdinal` for color coding, and `d3.scaleBand` for the y-axis genres. It loads data from a local `data.csv` file and renders as SVG, with mouseover tooltips revealing exact percentages.

Loading thumbnail…

Activity 6 Q 1.2

This visualization displays the population of the top 20 countries in 2010 as a horizontal bar chart. Using D3 v5’s `scaleBand` and `scaleLinear` for the y and x axes, respectively, it maps each country to a light green rectangle. The code imports these utilities directly from "d3" via UNPKG and builds the SVG in React with ES6 modules. Data is fetched from a CSV dataset and formatted with D3’s `.2s` format, converting G to B for millions.

Loading thumbnail…

Activity 6 Q 1.1

This example displays a horizontal bar chart ranking the population of ten countries for the year 2000, using data loaded from a CSV file via `d3.csv`. The React application builds an SVG visualization with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, formatting tick labels with `d3.format` to abbreviate large numbers. Bars are rendered as SVG rectangles with native `<title>` tooltips, while custom axis components handle the bottom and left tick generation.

Loading thumbnail…

Activity 6_Task 1

This example displays a horizontal bar chart showing the 2020 population estimates for 30 countries, sourced from a CSV file hosted in a GitHub repository. The chart uses D3 v5 to load and parse the data, as well as to create the scales and tick formatting, which converts values from gigabytes to billions. The visualization is rendered in React, with the bars and axes built using SVG elements and custom components for the bottom and left axes, along with tooltips showing the formatted population values.

Loading thumbnail…

6 buddhas

Six buddhas, rendered as violet outlines, overlap against a background image of flowers. The SVG paths form the head-and-shoulders silhouette of a Buddha, repeated six times in a row. The code uses React and ReactDOM to construct the SVG element, embedding the image with an `<image>` tag and drawing each Buddha with a `<path>` using a series of cubic Bezier curve commands. The shapes are scaled and translated within a group.

Loading thumbnail…

6 Buddhas

Six Buddhas emerge from a chaotic swarm of semi-transparent, randomly colored and rotated polygons rendered as SVG elements. The piece layers a series of intricate, pre-defined Buddha face paths, each translated and scaled, over the generative geometrical noise. Built with React and ReactDOM, the visualization uses nested `map` functions to generate the polygons, assigning random RGB fill values and transform rotations. The background is a solid black canvas, with the Buddha paths offering a structured contrast to the computational randomness.