Sitanshu Rupani

@sitanshu1000·20 public vizzes

Dashboard - Final Project - FIFA 19 Dataset

This dashboard explores the FIFA 19 dataset, integrating a world map with bubble markers, a Sankey diagram, and a scatterplot to reveal player distributions. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with topojson data, scaling circle radii by player count. The Sankey chart, built with the `d3.sankey` layout, visualizes flows from nationality to club. The scatterplot displays player overall rating against wage, supporting brush-based selection to highlight individual players.

Dec 12, 2021

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

Dec 10, 2021

Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

Dec 10, 2021

Loading thumbnail…

D3 Radar Chart

This AngularJS directive renders an interactive D3 radar chart from CSV data, with controls for toggling axes, levels, polygons, vertices, and legend, plus a faceting option. The visualization uses `d3.svg.line` and `d3.scale.category10` to draw radar polygons and supports custom file uploads or sample datasets like The Avengers. Configuration parameters adjust width, height, level count, and label scaling, while the chart updates via `scope.$watch` on the CSV and config objects.

Dec 10, 2021

Loading thumbnail…

Sankey Final

A Sankey diagram maps the nationalities of FIFA 19 players to the football clubs they play for, with link thickness representing the number of players per nationality-club pair. The visualization uses the D3.js library, specifically the d3-sankey plugin for layout, and renders nodes and links as SVG elements. Data is loaded from a local CSV file, colors are assigned via d3.scale.category20, and interactive node dragging is enabled through d3.behavior.drag.

Dec 9, 2021

Loading thumbnail…

SANKEY Experiment

This Sankey diagram maps the flow of FIFA 19 players from their nationality to the franchise they play for, with node colors assigned by the first word of each name. It uses the `d3.sankey` library from D3.js 3.5.17, rendered as SVG, and applies an iterative layout algorithm to position nodes and curved link paths. The data is loaded from a local CSV file, and the chart is still in a primitive stage.

Nov 11, 2021

Loading thumbnail…

Address Project Feedback - Sitanshu Rupani

This scatterplot visualizes the relationship between FIFA 19 players’ overall ratings and their weekly wages, using D3.js v4 with SVG rendering. It plots each player as a circle, with data sourced from a CSV of English Premier League players. Users can brush over the plot to highlight specific players, which triggers a table below showing their name, club, nationality, and potential. The visualization uses `d3.brush()` for selection, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.scaleLinear` for positioning, dynamically updating the table via `d3.selectAll('.brushed')`.

Oct 28, 2021

Loading thumbnail…

Make Something with Brushing - Sitanshu Rupani

This visualization uses a scatterplot to show the relationship between Overall and Potential ratings for FIFA 19 English Premier League players. Users can brush an area of the plot with d3.brush, which highlights selected circles in pink while dimming others, and upon releasing the brush, a table appears listing the player names, Overall, and Potential values for the brushed points. The plot is rendered with SVG, using d3.csv to load the dataset and d3.scaleLinear for axes.

Oct 20, 2021

Loading thumbnail…

Project Momentum - Sitanshu Rupani

This interactive scatterplot explores player attributes from a FIFA 19 English Premier League dataset. Users select X and Y axes from metrics like Potential, Overall, Dribbling, and Acceleration, and filter data by Preferred Foot, Nationality, or Club. The visualization uses React with d3.scaleLinear for axes and d3.scaleOrdinal for coloring, rendering marks as SVG circles. A color legend highlights specific filter categories on hover, fading other points to emphasize the selection.

Oct 14, 2021

Loading thumbnail…

Test2

This interactive scatter plot visualizes player attributes from the FIFA19 English Premier League dataset, allowing users to compare quantitative metrics like Potential, Overall, Dribbling, and Acceleration via dropdown menus for both x and y axes. Built with D3 v6, it uses `scaleLinear` for quantitative axes and `scalePoint` for categorical positions, rendering circles with SVG and animating transitions using the `transition` API. The visualization updates smoothly with a 1000-millisecond duration, using data fetched from a GitHub gist.

Oct 14, 2021

Loading thumbnail…

Adding Interaction for Scatter Plot - FIFA19 Players Dataset - Sitanshu Rupani

This interactive scatter plot visualizes player attributes from the FIFA19 English Premier League dataset, allowing users to dynamically select which quantitative or categorical attributes appear on the x- and y-axes via dropdown menus. The D3 v6 code uses `scaleLinear` and `scalePoint` for numeric and categorical mappings, with axes rendered through `axisLeft` and `axisBottom`. Data points are drawn as SVG circles with opacity, and transitions animate position changes and circle growth over 1000 milliseconds when axes change. The dataset is loaded as CSV from a GitHub Gist.

Oct 6, 2021

Loading thumbnail…

Iterated Version for Viz Other than Scatter Plot - Sitanshu Rupani

This stacked bar chart visualizes the year-over-year total price of Amazon’s top 50 bestselling books from 2009 to 2019. Individual book prices are aggregated into color-coded buckets, revealing how the combined cost of bestsellers fluctuates annually. The chart uses D3.js (v6) with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick marks. A legend distinguishes four price ranges (under $10, $10–15, $15–20, over $20), and the dataset comes from a public gist of Amazon bestseller records.

Sep 30, 2021

Loading thumbnail…

Viz Other than Scatter Plot - Sitanshu Rupani

This bar chart visualizes the total price of Amazon best-selling books per year from 2009 to 2019, using the d3.csv method to load the dataset. Each bar represents the sum of book prices for a specific year, with year on the x-axis and total price on the y-axis. The visualization uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, with rect elements rendered as SVG bars. Data comes from the Amazon Top 50 Bestselling Books 2009–2019 gist.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data - FIFA 19 Dataset

This example demonstrates the basic workflow of loading and parsing a CSV dataset in D3. It displays a summary of the FIFA 19 English Premier League player dataset, showing the file size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to calculate the data size. Results are rendered as plain text in an HTML `<pre>` element via the Document Object Model.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data - Amazon Bestsellers List Dataset

This example demonstrates loading and parsing a CSV file using D3 v5, displaying the dataset’s size in kilobytes, row count, and column count as large text. It fetches Amazon bestselling books data from a GitHub gist via `d3.csv` and processes it with `d3.csvFormat` to calculate the byte size. The visualization confirms successful data ingestion without rendering charts, focusing solely on the parsing step. The data includes book titles, authors, genres, user scores, prices, years, and review counts from 2009 to 2019.

Sep 29, 2021

Loading thumbnail…

Loading and Parsing CSV Data - Olympic Medals Count Dataset

This example demonstrates the size of the Olympic Medals Count dataset by displaying three summary statistics: total file size in kilobytes, number of rows, and number of columns. Using the d3.csv method, it fetches a CSV file from a GitHub gist containing medal counts for all countries from 1896 to 2018 across both summer and winter games. The code then applies d3.csvFormat to calculate the formatted data’s byte length, and reports the row count from the parsed array and column count from the data.columns property. The results appear in large text within an HTML pre element.

Sep 29, 2021

Loading thumbnail…

SVG Fundamentals - Mercedes Benz Logo - Sitanshu Rupani

This example demonstrates a simplified Mercedes-Benz logo built entirely with SVG primitives. It uses nested circle elements to create the outer ring and inner grey band, while three polygon shapes form the iconic three-pointed star. Rendering is handled purely through the SVG API, with inline `cx`, `cy`, `r`, `stroke`, and `fill` attributes used to position and style each shape within a 1000x1000 viewport. The design is static, showing basic geometric composition without interactivity or data binding.

Sep 29, 2021

Loading thumbnail…

D3 Scatter Plot - Olympic Medals Count Dataset - Sitanshu Rupani

This scatter plot shows the relationship between each country’s Summer Rank and Overall Rank in the Olympic Medals Count Dataset. Each circle represents a country, positioned by its summer and overall ranks on linear scales. The visualization is rendered as SVG using D3 v6, which loads the data via `d3.csv` and constructs axes with `scaleLinear`, `axisLeft`, and `axisBottom`. The plot uses a fixed radius for all points and fits the chart to the full browser window dimensions.

Sep 29, 2021

Loading thumbnail…

D3 Scatter Plot - Amazon Bestsellers Dataset - Sitanshu Rupani

This scatter plot displays the relationship between user ratings and book prices for Amazon’s top 50 bestsellers, with user rating on the x-axis and price on the y-axis. Each circle represents a book, positioned using d3.scaleLinear and bound to SVG circle elements via data joins. The axes are rendered with d3.axisLeft and d3.axisBottom, and the data is loaded asynchronously using d3.csv from a gist-hosted CSV file. The visualization uses D3 v6 and fills the full browser window with a minimal margin layout.

Sep 29, 2021

Loading thumbnail…

D3 Scatter Plot - FIFA Dataset - Sitanshu Rupani

This visualization shows a D3.js scatter plot comparing FIFA 19 player potential against their current overall rating, using data from a public gist of the FIFA19 English Premier League dataset. Each circle represents a player, plotted with potential on the x-axis and overall on the y-axis. The code uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the axes. The SVG-based chart fills the full browser window and applies a fixed radius of five pixels to all data points.

Sep 29, 2021