Mihir Sawant

Pokemon Scatter Plot

This interactive scatter plot visualizes Pokémon stats from the PokeAPI, letting users compare any two numeric attributes via dropdown menus for the x and y axes. The D3.js v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scatterplot` functions to render SVG circles with a smooth `transition().duration(1000)` animation as data points fly into place. Axes include gridlines and rotated labels, while the `dropdownMenu` module updates the selected columns on change.

Pokemon: Special Attack vs Special Defence, by Type

This interactive scatterplot visualizes the Special Attack versus Special Defence stats of Pokémon from the first three generations, with each point colored by its primary type. The visualization uses d3.scaleOrdinal with schemeCategory10 for color encoding, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft with grid lines. Clicking a legend item highlights that type while dimming others. Data is loaded via d3.csv from an external dataset, and all rendering uses SVG circles within a D3 v5 framework.

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green, with hover states that turn countries red and click selections that highlight them in black. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render TopoJSON data from the world-atlas package, while country names and population estimates come from accompanying TSV data. Pan and zoom functionality is implemented through d3.zoom, and country details appear via SVG title tooltips.

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern for adding, removing, and modifying data in a D3 visualization, using a bowl of fruit. It shows how entering, updated, and exiting elements are handled when the data changes over time. The code uses d3.select, d3.range, and custom scales from d3.scaleOrdinal to map fruit types to colors and radii. SVG circles and text labels are updated with transitions, including a sequence of font-size changes, while the fruit data is modified via pop and filter operations.

Arsenal monthly PPG Line Chart

This line chart shows Arsenal’s points per game in the English Premier League across five seasons, averaged monthly from 2013/14 through 2017/18. Five colored lines, each representing a season, trace the team’s performance using d3.line with curveCardinal smoothing. The code loads CSV data from DataHub and renders an SVG with d3.scaleBand for months, d3.scaleLinear for points, and d3.axisBottom and d3.axisLeft for axes. A legend built with d3.scaleOrdinal uses fixed colors to map each season.

Pokemon Scatter Plot

This scatter plot visualizes the relationship between Special Attack and Special Defence stats for Pokémon from the PokeAPI dataset. Each circle represents a Pokémon, plotted along the x-axis for special attack and the y-axis for special defence, with a steelblue fill and 30% opacity. The visualization uses D3 v5 APIs including `scaleLinear` for axis scaling, `axisBottom` and `axisLeft` for the axes, and `scaleOrdinal` for color coding. The code loads the CSV data via `csv()` and converts the stat columns to numeric values. SVG rendering is used with a 960x500 canvas, and axis labels and a title are drawn using text elements styled with CSS.

Top 10 highest grossing movies of all time

This bar chart displays the top 10 highest-grossing movies of all time, ranked by worldwide earnings in USD, with Avatar leading at over $2.7 billion. The visualization uses d3.csv to load movie data, then d3.scaleLinear and d3.scaleBand to map earnings and movie titles to the SVG canvas. Axes are generated with d3.axisLeft and d3.axisBottom, while bar widths reflect earnings via the x-scale. Data originates from Newsday’s box-office list, and the chart includes a legend clarifying that figures appear in billions.

Tweak a Face Assignment!

This face visualization shows an angry pirate character rendered as simple geometric shapes: a red circular head, a black eyepatch strap, asymmetrical eyebrows, and a frown-shaped mouth. Using D3 v5’s `select` and `arc` APIs, the code builds the SVG scene by layering groups for eyes, irises, pupils, and mouth, with arcs generating the crescent-shaped frown and eyepatch. The example demonstrates how D3’s drawing primitives and transform attributes can assemble a playful, expressive face from basic SVG elements, though the character lacks a pirate hat as described.

mod Pitch4

This visualization displays football (soccer) shot data from a JSON dataset, plotting each shot's starting location and trajectory on a scaled pitch. Users can filter shots by team via a color legend or by time range using a dual-handle slider. Clicking a shot reveals player and shot details in a stats box, and a freeze-frame of player positions at the shot's moment can be shown. The visualization is built with D3 v5, using SVG elements, a custom slider with `d3.drag`, and arrow markers to indicate shot direction.

Dec 7, 2018

Pitch

This example draws a soccer pitch using D3.js version 5, with SVG rendering. It constructs the field markings—including the halfway circle, corner arcs, penalty area, and six-yard box—by combining D3’s `arc()` generator for curved paths and appended `rect` and `line` elements for straight boundaries. The layout uses hardcoded dimensions scaled by a factor of six, and all shapes are filled with white strokes atop a green background, creating a static, schematic visualization.

Nov 8, 2018

Data Table Summary

This example displays a text-based summary of a speed dating dataset, showing the total row and column counts, the file size in kilobytes, and the first ten rows formatted as JSON. It loads the data from a remote CSV file using D3’s `csv` method, then appends the summary and a formatted preview to the page. The code uses `csvFormat` to calculate file size and `JSON.stringify` for readable output.

Nov 8, 2018

Pitch

An SVG rendering of a soccer pitch, drawn to scale with D3.js v5, displays the field’s markings including the halfway circle, corner arcs, goal areas, six-yard boxes, and penalty spots. The visualization uses D3’s `arc` generator to create the curved elements and `line` and `rect` primitives for straight lines and the field base. A green rectangle represents the playing surface, with white markings for official dimensions and black strokes for the goals. The code demonstrates a static, non-interactive layout built with SVG attributes and D3 selections.

Data Table Summary

This example displays a plain-text summary of a JSON event dataset from the 2018 World Cup final, showing the row count, column count, and file size, followed by the first ten rows of data. After loading the data via `d3.json`, it uses `d3.select` to append `<pre>` elements to the document body, formatting the text with JavaScript template literals and `JSON.stringify`. The page is styled with black background and green monospace text, and the dataset originates from StatsBomb.

Data Table Summary

This example displays a concise text summary of a Pokémon dataset from the first three generations, showing row count, column count, and file size, followed by the first ten rows in JSON format. Built with d3.v5, it uses `select` to target the body, `csv` to asynchronously load the dataset from a URL, `csvFormat` to compute the data size, and `JSON.stringify` to pretty-print the sample rows against a black terminal-style background.

Data Table Summary

This example summarizes a dataset of English Premier League match statistics from football-data.co.uk. It displays the total row count, column count, and file size, followed by the first ten rows of data as formatted JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, rendering results as plain text in HTML `<pre>` elements with a retro green-on-black terminal aesthetic.

mod Pitch

This interactive visualization maps every shot taken during the 2018 FIFA World Cup final between France and Croatia onto a scaled soccer pitch. Each shot is represented by a circle and an arrowed line showing its start and end location, colored by team. Clicking a shot reveals a freeze frame of player positions on the pitch, while hovering over a legend entry filters shots by team. Built with D3 v5, it uses `scaleOrdinal`, SVG markers for arrows, and a custom color legend with interactive click and opacity filtering.

Color and Size Legends

This example demonstrates two distinct types of legends for data visualization: a color legend and a size legend. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned using `attr('transform', ...)`. The code employs D3 v5's selection and merge methods to efficiently update the legends, and the circles are styled with a black stroke for visual clarity.

mod Pitch2

The visualization shows shot locations and arrow trajectories for the 2018 FIFA World Cup final between France and Croatia on a scaled soccer pitch. Clicking a shot reveals its freeze-frame player positions. A slider filters shots by match minute, and clicking the legend toggles team visibility. Built with D3 v5, it uses SVG rendering, custom modules for pitch drawing and shot plotting, and drag interactions to filter data.

Nov 6, 2018