sjannaikode@gmail.com

@Shivani-198·17 public vizzes

Activity7

This interactive scatter plot animates through different pairwise combinations of the Iris dataset’s four measurements, cycling the x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a static legend and labeled axes. Built with D3.js (v6.7.0), it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, and `setInterval` to update the plot’s `xValue` assignment. The SVG rendering is generated from a CSV fetched via `d3.csv` and styled with CSS.

Apr 17, 2025

Loading thumbnail…

Activity7_Question1

This example visualizes monthly spending across six selected expense categories—Electronics, Groceries, Travel, Dining Out, Healthcare, and Utilities—as a pie chart. The code loads CSV data via d3.csv, filters the records, and renders SVG slices using d3.arc and d3.pie. A d3.scaleOrdinal with schemeCategory10 assigns colors, while each slice includes a white label and a legend is drawn alongside. The chart is built as a reusable function pieChart, with axis-style labels added for context.

Apr 9, 2025

Loading thumbnail…

Activity7Question2

This visualization shows organic website traffic over time using an area chart, with a light green filled region and a dark stroke line representing visitor counts across a date range. The chart is built with D3 v7, using an SVG rendering approach, where `d3.area()` constructs the shape and `d3.scaleTime()` handles the temporal x-axis with date parsing via `d3.timeParse`. A line and bar chart alternative is not present; the data is loaded from a CSV file using `d3.csv`. The y-axis is scaled linearly from zero to the maximum organic visitor value, with axes labeled for clarity.

Apr 9, 2025

Loading thumbnail…

fork fork

This example renders a simple area chart for a categorical sales dataset. The chart visualizes sales values across categories using a filled steelblue area. The code loads JSON data from a remote URL and uses D3 v7 with the `d3.json` data loading method. The chart is built with SVG output, employing `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the area path. Axis and label annotations are added with `d3.axisBottom` and `d3.axisLeft`, while the SVG text elements label the axes.

Apr 9, 2025

Loading thumbnail…

Activity7

This example displays a simple D3.js visualization that renders a static text message inside an HTML page. The code uses the `select` function from the D3 library to target a `<div>` element and set its text content to a string imported from a separate ES6 module. The message is styled with large, centered font sizes via a linked CSS file. The visualization does not involve data binding, scales, or dynamic updates, serving instead as a minimal demonstration of D3 selection and DOM manipulation within a VizHub template.

Apr 4, 2025

Loading thumbnail…

Activity6_Question4

A bubble chart displays the relationship between average salary and revenue per employee for 20 tech companies, with bubble size encoding employee count. Built with D3.js v7 and SVG, the visualization uses d3.scaleLinear for axes, d3.scaleSqrt for bubble radius, and d3.scaleOrdinal with schemeCategory10 for color coding. Hovering reveals a tooltip showing company name and employee count. Data comes from an external CSV file loaded via d3.csv.

Apr 4, 2025

Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway fuel efficiency across various car makes. Each circle’s x-position maps to horsepower, y-position to torque, radius encodes highway mpg, and color distinguishes the manufacturer. It uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with interpolateTurbo for color coding, and d3.axisBottom/axisLeft for ticks. Hovering reveals a tooltip showing the make, with opacity transitions for interactive feedback. The legend displays sample bubble sizes and color-coded manufacturer circles. Data comes from bubblechart.csv.

Apr 4, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each point’s shape encoding the species. A shape legend identifies the three species categories. The visualization is built with D3 v7, using d3.scaleLinear for the axes, d3.scaleOrdinal with d3.symbolsFill to map species to shapes, and custom modules for rendering axes and the legend. Data is loaded as CSV and parsed with d3.csvParse.

Apr 3, 2025

Loading thumbnail…

Activity6_Task3

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each species (setosa, versicolor, virginica) represented by a distinct color. The code loads CSV data via `d3.csv`, parses numeric fields, and renders SVG circles using `d3.scaleLinear` for axes and `d3.axisLeft`/`d3.axisBottom` for labeled scales. Axis labels are manually appended texts, while circles receive color based on species and use both `r` for size and `rx`/`ry` attributes, though the latter do not affect circle rendering in SVG.

Apr 3, 2025

Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the proportional contribution of five energy sources—coal, gas, nuclear, hydro, and renewable—to electricity generation across six countries. Each bar segments by source share using percentages. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal` for coloring, with `d3.axisBottom` and `d3.axisLeft` for scales. Hovering over a segment reveals a tooltip showing the exact percentage via `d3.select` and `event.pageX`/`pageY` positioning, with data loaded from a local CSV.

Apr 3, 2025

Loading thumbnail…

Activity6_Task2

This visualization shows the percentage distribution of IMDb movie ratings across five genres, broken into five rating categories. The stacked horizontal bar chart displays the proportion of each genre's movies that fall into rating brackets from below 5.0 to above 8.5, using a color scale to distinguish each rating segment. The code uses D3.js (d3.v7) to read CSV data, applies d3.stack() for the stacked layout, and uses d3.scaleLinear and d3.scaleBand for the x and y axes. Interactive tooltips appear on mouseover, showing the exact percentage for a specific genre and rating category, while the SVG rendering and custom CSS styles define the visual presentation.

Apr 3, 2025

Loading thumbnail…

Activity6_Task2

This example displays a simple greeting message centered on the page using D3.js. The code selects a div element by its ID and sets its text content to a string imported from a separate ES6 module. It demonstrates basic module imports and the use of the `select` API from d3.v6 to manipulate the DOM, with styling applied via an external CSS file.

Apr 3, 2025

Loading thumbnail…

activity_6_task1

This horizontal bar chart displays the population of 30 countries in 2020, ordered by country name. Built with React and D3 v5, it uses an SVG rendering with a linear x-scale for population values and a band scale for countries. The code employs `scaleBand`, `scaleLinear`, `max`, and `format` from D3, with data loaded from a CSV file. Interactive tooltips show the population value for each bar, while blue axis lines and green bars provide clear visual separation.

Apr 3, 2025

Loading thumbnail…

Fork of Activity 5

This example shows a horizontal bar chart of population estimates for 30 countries in 2020, using a CSV dataset loaded from GitHub. The chart displays rectangular bars colored light green, with blue tick lines and labels for each country on the left axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `format` to abbreviate population values (e.g., converting millions to billions). The `Marks`, `AxisBottom`, and `AxisLeft` components render the SVG elements.

Apr 3, 2025

Loading thumbnail…

activity 6_Task 1

This example shows a horizontal bar chart comparing the 2020 populations of 30 countries, using a green fill for each bar with country names on the left and a formatted population axis on the bottom. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and the population values are multiplied by 1000 before being displayed.

Mar 28, 2025

Loading thumbnail…

Fork of 6 Buddhas Assignment

This visualization displays an intricate, flower-patterned backdrop overlaid with a large, colorfully rendered Buddha figure composed from a single detailed SVG path. The React-based application uses hardcoded coordinate data to draw the path within an SVG canvas, with the background provided via a remote image URL in CSS. The code also contains commented-out logic for generating randomized circles, though the active rendering focuses solely on the static Buddha vector shape.

Mar 14, 2025

Loading thumbnail…

5 Buddhas

Five Buddhas is a generative artwork that layers dozens of semi-transparent diamond-shaped polygons on a black background, creating a dense, colorful, and abstract composition of overlapping Buddha-like silhouettes. The piece shows a chaotic yet rhythmic field of shapes, with each polygon filled by a random RGB color produced from scaled random values. The artwork is rendered with React and SVG, using nested array maps to generate polygon coordinates and transform rotations. The code references a static Buddha path embedded within the SVG, though its rendering is obscured by the surrounding random geometry.

Mar 12, 2025