Siddhi Patil

Bubble World Map

This bubble world map visualizes the number of Nike factories per country, with circle area proportional to factory count using d3.scaleSqrt. The map uses a d3.geoNaturalEarth1 projection and d3.geoPath to render countries, with topojson loading world atlas data and CSV factory data from a gist. Users can pan and zoom via d3.zoom, hover for tooltips, and click legend circles to filter highlighted countries based on factory thresholds.

Dec 5, 2021

Dashboard - Multiple Views

This dashboard presents Nike’s global manufacturing data through three linked views: a bubble world map showing factory counts by country, a stacked bar chart of product types for top countries, and a draggable sankey diagram linking supplier groups to countries. The world map uses d3.geoPath and a size legend for filtering, while the stacked bar chart uses d3.stack and a color legend for interaction. All charts include tooltips, with the sankey using the D3-graph-gallery sankey.js library and SVG rendering for nodes and links.

Dec 5, 2021

Stacked Bar Chart

This stacked bar chart displays the distribution of Nike manufacturing factories across countries, with each bar broken down by product type. The visualization aggregates and filters the data to show only countries with more than ten factories. Users can hover over individual bar segments to see tooltips with the country and factory count, or hover over legend entries to highlight specific product categories. Built with D3.js v3, it uses `d3.layout.stack`, `d3.nest`, scales, axes, and the d3-tip and d3-legend libraries, rendering with SVG and supporting interactive animations.

Dec 2, 2021

Bar Plot showing Female/Migrant Workers Percentage

This bar plot visualizes the average percentage of female or migrant workers employed in Nike manufacturing factories across different countries, using data from Nike’s Global Manufacturing Data Export. A dropdown menu switches the Y-axis between the two worker categories, while hovering over bars reveals tooltips with precise percentages. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, and `axisBottom` for rendering, with animated transitions via `transition` and interactive tooltips managed through D3’s `tooltip` API.

Nov 10, 2021

Bar Plot with Country Menu

This bar plot displays the top 15 Nike manufacturing factories by total worker count, with bar color indicating product type and a dropdown menu for filtering by country. The visualization uses D3 v6 APIs including `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `transition` for animated updates, while `d3.csv` loads the Nike Global Manufacturing Data from a GitHub gist. Tooltips reveal factory name, country, and worker totals, and a legend maps product types to colors.

Nov 10, 2021

Interactive Donut Chart

This interactive donut chart visualizes Nike Global Manufacturing Data, showing the distribution of factory counts by product type worldwide. A dropdown menu filters the dataset by country, updating the pie slices and legend accordingly, while hovering over a slice reveals a tooltip with the product type, percentage, and total factory count. The visualization uses D3's pie, arc, and scaleOrdinal APIs to render the SVG, with animated transitions during updates.

Oct 26, 2021

Scatter Plot with Brushing

This scatter plot visualizes Nike’s global manufacturing data, showing the relationship between total workers and line workers across factories, with each circle colored by product type. Users brush horizontally to zoom into a selected range of total workers, then double-click to reset the view. The visualization uses D3 v7’s `brushX` for interaction, `scaleLinear` for axes, and `scaleOrdinal` with `schemeCategory10` for color encoding. Circle positions and axes transition smoothly over 1000 milliseconds using `transition().duration()`, while data is loaded as CSV from a GitHub gist.

Scatter Plot with Country Selection

This scatter plot visualizes Nike global manufacturing data, with each circle representing a factory positioned by total workers versus line workers, colored by product type, and filtered by country through a dropdown menu. The visualization uses D3 v6 with SVG rendering and animations, employing `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `transition` for smooth circle updates. The menu component uses D3's `dispatch` for change events, while the data is loaded via `csv` from a GitHub Gist.

Improved Scatter Plot

This interactive scatter plot visualizes Nike manufacturing data, showing the relationship between total workers and line workers across global factories. Each circle represents a factory, colored by product type, with native SVG `<title>` tooltips revealing factory name and country on hover. The visualization uses React with D3 v6 scales (`scaleLinear`, `scaleOrdinal`) and custom React components for axes, marks, and an interactive color legend. Hovering over a legend item filters and highlights matching circles while fading others, using D3’s `schemeCategory10` for categorical color encoding.

Basic Scatter Plot

This scatter plot visualizes Nike’s global manufacturing data, comparing total workers to line workers at each factory, with every circle representing a factory. The visualization uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values and render the axes. Circles are appended as SVG elements with d3.selectAll and .join, using the viewport’s full width and height for the plotting area. The chart includes axis labels and a title, with data sourced from a GitHub Gist containing the Nike Manufacturing CSV.

Basic Scatter Plot with Time Scale

This scatter plot displays the number of deaths reported across all countries from 2015 to 2021, with each circle representing a country in a given year. The x-axis uses a time scale (d3.scaleTime) for years, while the y-axis uses a linear scale (d3.scaleLinear) for death counts. Data comes from the World Mortality Dataset, loaded via d3.csv. The visualization is rendered as SVG circles with opacity, axes generated using d3.axisBottom and d3.axisLeft.

Sep 29, 2021

Basic Scatter Plot (Axes explicitly starting from 0)

A scatter plot displays Google Play Store apps by rating on the x-axis and number of reviews on the y-axis, with each circle representing an app. The axes explicitly start at zero, revealing the full distribution of data. The visualization uses d3.csv, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render SVG circles with opacity, and includes axis labels and a title for clarity.

Sep 29, 2021

Simple Bar Chart

This bar chart displays the number of deaths reported by countries in June 2021, filtered to values greater than 5,000 from the World Mortality Dataset. It uses D3.js v6 with SVG rendering, employing `scaleLinear` and `scaleBand` to map death counts and country names, along with `axisBottom` and `axisLeft` for the axes. The dataset is loaded via `d3.csv` from a GitHub Gist, and the chart resizes to the full browser window.

Google Play Store Apps Dataset Summary

This visualization summarizes a Google Play Store apps dataset by displaying the file size, row count, and column count of the CSV data. It loads the remote file using the `d3.csv` method, formats the content with `d3.csvFormat` to calculate its size in kilobytes, and reports the number of data records and fields. The interface presents this information in a large, plain text block, using only the D3.js v5 library and standard DOM manipulation.

Nike Global Manufacturing Dataset Summary

This visualization presents a summary of the Nike Global Manufacturing Dataset, displaying the dataset's file size in kilobytes, the total number of rows, and the number of columns as plain text. The program loads the CSV data using the D3.js library, specifically the `d3.csv` method to fetch and parse the file. It then calculates the size via `d3.csvFormat` and extracts row and column counts before rendering the results in a large HTML `<pre>` element.

World Mortality Dataset Summary

This visualization summarizes the World Mortality Dataset, displaying its file size, row count, and column count as plain text. It loads the CSV data from a GitHub gist using the `d3.csv` method and computes the file size from the formatted CSV string. The code then reports the dataset’s dimensions, with the result presented in a large `<pre>` element. It relies on D3 v5’s `csv` and `csvFormat` functions to parse and measure the data, offering a concise overview of the dataset’s scale.

French Fries with Blinking Eyes using SVG Fundamentals

This SVG visualization shows a cartoon packet of French fries with a simple animated face. The fries and container are drawn with basic SVG shapes, including paths and polygons, using a palette of reds, oranges, and yellows. The face, featuring two blue elliptical eyes and a curved smile, sits on a rectangle representing the front of the packet. A blinking effect is created by animating the height of a small mask, with the eye ellipse controlled by SVG's native animation capabilities, using the `<animate>` element on the rectangle's height attribute, referencing a mask. The design is based on a vector from SVGRepo, with the winking effect inspired by a CodePen example.