image clipped

100%

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 28, 2023

An NFL team logo is clipped by an arc-shaped mask, creating a pie-like visual effect. The logo renders as a static image within a D3.js SVG, clipped using an arc path generated by `d3.arc`. The visualization uses data from 2015–2023 NFL seasons, sourced from Pro-Football-Reference, though the current view focuses on a single logo. The implementation applies a `clipPath` and `xlink:href` to display the Steelers logo, with the arc positioned at the SVG center.

AI-generated description

NFL home field advantage from weather.

This week, I cleaned up my selectors using the menu techniques in the lecture video, and I plotted the teams onto the map.

Data from 2023-2015 seasons.

Data from https://www.pro-football-reference.com/

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Logo

The D3 logo is rendered as a stylized “d3” in a 400×400 SVG viewport, with the letterforms clipped from three overlapping linear gradients in orange and red. The example demonstrates the official logo artwork directly from the d3-logo repository, embedded via an `<img>` tag in a minimal HTML page. The SVG uses a `clipPath` to define the letter shapes, while the gradients—`gradient-1`, `gradient-2`, and `gradient-3`—paint the clipped areas with smooth color transitions. The rendering is static, with no animation or interaction.

Mmbostock

64% match

Loading thumbnail…

Pie

This example shows a radial burst of colored arcs, each representing a CSS named color from a dataset loaded via `d3.csv`. The visualization renders a full circle of pie slices with no gaps, using React to manage state and render SVG paths. It leverages `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled using the color’s hexadecimal value from the data. The code demonstrates a hybrid approach where D3 handles data loading and calculations while React handles the DOM updates.

SStarkerRegen

64% match

Loading thumbnail…

NFL homeFieldAdvgt 3-18-23

This visualization explores NFL home field advantage by plotting team logos on a scatterplot, line chart, or map based on user-selected weather and win percentage metrics. Interactive dropdown menus let viewers switch between temperature, rainfall, and snowfall data, as well as toggle between home field win percentage and percent of wins at home. The map view uses d3.geoAlbersUsa and d3.geoPath projections with team logos as images, while the scatter and line charts use d3.scaleLinear and d3.line. The data spans the 2015-2023 seasons from pro-football-reference.com, with teams normalized across relocations and rebrandings.

Hhmkyriacou

64% match

Loading thumbnail…

Data-Viz-Final-Project

This visualization uses scatter plots and line charts to explore NFL home field advantage from weather conditions, using data from the 2015-2023 seasons sourced from pro-football-reference.com. D3 v7 renders team logos as images positioned on scales for game attributes, with interactive radio buttons to switch between different data views. The chart includes labeled axes and transitions to animate between selections, showing trends in how weather impacts game outcomes for each franchise.

Hhmkyriacou

64% match

Loading thumbnail…

Revised D3 Logo

This example presents a geometrically precise reconstruction of the D3 logo, replacing cubic Béziers with strictly circular arcs and straight lines. The SVG rendering shows the logo’s path alongside a grid of construction lines, key anchor points, and intersecting circles that define the arcs. The code computes several points via circle-line and circle-circle intersection, using SVG elements like `<path>`, `<circle>`, and `<line>` to visualize the underlying geometry. The result highlights how the logo’s shape is derived from a small set of overlapping radii and horizontal guides.

Mmbostock

63% match

Loading thumbnail…

NFL-weather-vs-winPct

This scatterplot maps each NFL team’s home-field winning percentage against its city’s average annual temperature, using team logos as data points. The visualization is built with D3.js v7, including `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. Team logos render via SVG `image` elements using externally hosted URLs, while data on win percentages and temperatures spans the 2015–2023 seasons, sourced from Pro-Football-Reference.com.

Hhmkyriacou

63% match

Loading thumbnail…

D3 arcs

A React app renders a pie chart using D3's `d3.pie` layout and `d3.arc` generator, with each slice filled by a CSS named color from a CSV dataset loaded via `d3.csv`. The graphic displays all named colors as equal-width arcs radiating from a central point, forming a full circular spectrum. The SVG output maps each data row to a path, with the arc's inner radius set to zero and outer radius matching the chart's width. A commented-out rotation effect in the parent component hints at potential interactivity but remains inactive.

LLewis Ward

62% match

Loading thumbnail…

D3 Logo

This example displays the D3.js logo as a purely vector-based SVG graphic. It defines a custom path, assigned the ID "deethree", which encodes the logo's shape through a series of arc and line commands. The graphic is first rendered as a thick black outline using a `<use>` element with a stroke, then duplicated with a white fill. The implementation directly leverages the SVG `<defs>` and `<use>` tags within the HTML markup, with no JavaScript libraries involved.

LLGBY4

62% match