S

Samir Tarda

@sntarda·18 public vizzes

Loading thumbnail…

STarda - Activity 9 - Question 2

This stacked area chart displays discount amounts across six categories—Corporate, Family, Healthcare, Military, Sibling, and Teacher—for a series of data points loaded via d3.tsv from a tab-separated dataset. The chart uses d3.stack() to layer the categories and d3.area() with linear x and y scales to render SVG paths, with d3.schemeTableau10 providing color encoding. Missing values default to zero, and the visualization includes axes, labels, a title, and a legend.

Loading thumbnail…

Fork of ICE 7 Area Chart for Rice Production

This example shows a stacked area chart of rice production across six categories—Corporate, Family, Healthcare, Military, Sibling, and Teacher—using data loaded from a tab-separated text file. The chart renders as SVG with D3 v6, employing `d3.stack()` to compute layer series and `d3.area()` to draw each filled region. The x-axis uses a linear scale for row indices, while the y-axis sums values per row. Colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory10`, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

STarda - Activity 9 - Question 1

This example shows a pie chart displaying program contributions to tuition revenue, with dollar amounts abbreviated in thousands and a color-coded legend identifying each program. The visualization is built with D3 v6, using `d3.csv()` to load billing data from a remote GitHub CSV file, `d3.group()` and `d3.sum()` to aggregate billing by program, and `d3.pie()` with `d3.arc()` to generate the arcs. Labels are positioned at arc centroids, and the SVG output includes a bold title and formatted text elements for clarity.

Loading thumbnail…

STarda - Activity 9

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis while displaying species as colored points. The visualization uses D3 v6, loading data via CSV and rendering with SVG. A reusable scatter plot module built with `scaleLinear`, `axisLeft`, and `axisBottom` updates axes and circles at intervals. The code also includes custom legends, axis labels, and styling through external CSS and Google Fonts.

Loading thumbnail…

Fork of Task9_Q1

This interactive area chart visualizes total billing amounts by month, segmented by year, based on a student information dataset. The visualization uses Vega-Lite API to render smooth, semi-transparent areas with white borders for each year, allowing comparison of spending patterns over time. The code filters the CSV data to include only active statuses with billing amounts between zero and 3000, while converting negative discount values to positive. A tooltip displays month names, billing totals, and years, with the visualization resizing to fit the browser window.

Loading thumbnail…

Fork of Circles with D3

A fork of circles with D3 shows a static bar chart of billing amounts by customer name, rendered as SVG rectangles. The chart uses D3 v7 scales and axes to map data, with bars colored steelblue that turn brown on hover. The code sets up a linear y-scale and band x-scale, then appends axes and rects to the SVG. The sample data appears truncated, and the visualization relies on `d3.scaleBand` and `d3.scaleLinear` for layout.

Loading thumbnail…

Activity 8 - Q3.6

This example visualizes penguin measurements from a CSV file, plotting bill length against bill depth and encoding species using different d3 symbol shapes. The scatter plot uses D3 v7’s scaleLinear for axes and scaleOrdinal with symbolsFill to differentiate three species, with a custom shape legend displaying symbol labels. A reusable axes module adds labeled x- and y-axes, while the code demonstrates modular ES6 imports and D3’s data join pattern to render marks. Data is loaded asynchronously via fetch and parsed with csvParse before being passed to the chart.

Loading thumbnail…

Activity 8 - Q4.9

This bubble chart visualizes the correlation between life expectancy, population, and GDP per capita for a small set of countries. Each circle's x-axis position encodes life expectancy, its y-axis position encodes population, and its radius and color encode GDP per capita. The visualization uses D3.js (v7) with SVG rendering, and on hover, a tooltip displays the country name. The code applies `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with an `interpolateTurbo` color scale, and legends for GDP values and country colors. Data comes from the included `bubblechart.csv` file.

Loading thumbnail…

Activity test

This bubble chart visualizes the correlation between average life expectancy, population, and GDP per capita for six countries using a CSV dataset. Each circle’s position maps to life expectancy and population on the x and y axes, while its radius encodes GDP per capita and its color distinguishes countries via a `d3.scaleOrdinal` with interpolated turbo colors. Interactive tooltips appear on hover using mouse events. A legend includes size reference circles and color swatches, all rendered with SVG in D3 v7.

Loading thumbnail…

Activity 8 - Task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle sized by fuel efficiency and colored by manufacturer. The visualization uses D3 v7 with SVG rendering, scaling torque and horsepower to x- and y-axes while mapping highway MPG to circle radius via d3.scaleLinear. Hovering reveals a tooltip displaying the make. A legend communicates MPG values and brand colors. Data comes from a local CSV file processed with d3.csv, using d3.scaleOrdinal for categorical color assignment and d3.interpolateTurbo for the color range.

Loading thumbnail…

Activity 8 - Task 3

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes, with each point colored by iris species (setosa, versicolor, or virginica). The visualization uses D3.v6, loading data via `d3.csv` from a GitHub raw URL, and employing `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to create the SVG chart. Color is assigned via a switch statement, while the plot window fills the browser viewport, with axis labels in green text.

Loading thumbnail…

Activity 8 - Q2.3

This stacked bar chart visualizes "Food Nutritional Ratings" across seven food groups (banana, poacee, sorgho, carot, apple, mango, olive, ananas) using data from a local CSV file. It renders in SVG with D3 v7, using `d3.csv` to load data, `d3.stack` to create series, and `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color encoding. The chart includes axis labels, a legend, and a hidden tooltip element.

Loading thumbnail…

Activity 8 - Task 2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, revealing how drama and comedy skew toward middle ratings while action films cluster at lower scores. The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series from CSV data and `d3.scaleOrdinal` for categorical coloring. Hover interactions display percentage values via a custom HTML tooltip, with axes created using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Activity 8 - Q1.2

A horizontal bar chart displays the populations of 20 countries in 2010, sorted alphabetically by country name. The visualization uses React with SVG rendering and D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded asynchronously via D3's `csv` parser from a GitHub-hosted CSV file. Custom React components render the axes and rectangular marks, with formatted tick labels converting billions using D3's `format` function.

Loading thumbnail…

Activity 8 - Q1

This example shows a horizontal bar chart of population figures for ten countries in the year 2000, using a bar length to encode each value. The chart is built with React and renders SVG elements, using D3 v5’s `scaleBand` and `scaleLinear` for positioning and scaling. Data is loaded asynchronously from a GitHub-hosted CSV file via D3’s `csv` parser. The code also demonstrates custom axis components and a tooltip that appears on hover through an SVG `<title>` element.

Loading thumbnail…

Activity 8 - Task 1

This example shows a horizontal bar chart ranking the 2020 populations of 30 countries, with the largest values extending farthest to the right. Built with React and rendered as SVG, it loads data from a CSV file using the `d3.csv` parser and uses D3 scales (`d3.scaleBand` and `d3.scaleLinear`) to map countries and population counts to positions. Custom axis components draw tick marks and labels, and tooltips formatted with `d3.format` appear on hover over each bar.

Loading thumbnail…

Activity 8

This example demonstrates a minimal web page that uses D3.js to display a text message. It shows how to load D3 from a CDN and use the `d3.select` API to set the content of an HTML div. The page also imports a local ES6 module to provide the message text and applies styling from an external CSS file. The visualization is a simple greeting centered on the page, highlighting basic integration between D3, JavaScript modules, and CSS.

Loading thumbnail…

Activity 8

This example demonstrates a minimal web page that uses D3.js to display a text message. It shows how to load D3 from a CDN and use the `d3.select` API to set the content of an HTML div. The page also imports a local ES6 module to provide the message text and applies styling from an external CSS file. The visualization is a simple greeting centered on the page, highlighting basic integration between D3, JavaScript modules, and CSS.