Skip to main content
SimilarExport ZIP
100%

The Justice League

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 3, 2017
Created on Mar 3, 2017

Each player in the "Justice League" fantasy football league gets a trio of column charts showing their own weekly scores, their opponents' scores, and the point margin for each game. The charts use the D3.js v3 API to render SVG rectangles whose lengths and colors are scaled linearly, with the average score marked by a vertical line. Data for weeks 1 through 8 comes from a JSON file scraped from the ESPN league page, and hovering over any bar highlights the same week across all charts.

AI-generated description

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/dddf616d4f71475c4611'>Fantasy Football Scores</a>

mit Licensed

Similar vizzes

Loading thumbnail…

The Justice League

Each player in the "Justice League" fantasy football league gets a trio of column charts showing their own weekly scores, their opponents' scores, and the point margin for each game. The charts use the D3.js v3 API to render SVG rectangles whose lengths and colors are scaled linearly, with the average score marked by a vertical line. Data for weeks 1 through 8 comes from a JSON file scraped from the ESPN league page, and hovering over any bar highlights the same week across all charts.

TThanaporn-sk
100% match
Loading thumbnail…

Making a Multiline Chart 2

A multiline chart displays weekly power scores for eight teams across eight weeks, with a clickable legend highlighting team names and interactive hover effects that thicken lines. The visualization is built with D3 v5, using SVG rendering, `d3.nest()` to group data by team, `d3.line()` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. It includes axis labels, a dashed baseline, and a filterable legend with custom click handlers.

HHirsh Gupta
68% match
Loading thumbnail…

d3js workshop - bar chart

A horizontal bar chart displays Premier League football teams' total points, with each bar's length proportional to the team's PTS value and an overlaid text label showing the exact number. Built with D3.js v3, the chart reads team statistics from a CSV file and renders as SVG rectangles, using a linear scale (d3.scale.linear) mapped to the bar widths and groups positioned vertically via translation transforms. The example demonstrates basic data loading, scaling, and SVG shape creation for workshop purposes.

LLelandCurtis
68% match
Loading thumbnail…

Making a Multiline Chart

Eight weeks of simulated playoff power rankings are shown as eight colored, semi-transparent lines, one per team, across the x-axis (week) and y-axis (power rank). Hovering over a line thickens it and increases its opacity. Built with D3 v5, it uses `d3.line()`, `d3.nest()`, `d3.scaleOrdinal()`, and a custom legend from `d3.axisLeft()` calls, reading the `data.csv` file. Lines are drawn as SVG paths, and hover effects use D3's `.transition()` for animation.

HHirsh Gupta
68% match
Loading thumbnail…

EDAV Project

This interactive scatter plot from a Fantasy Premier League dataset shows player cost against total points per season, with color and size highlighting for defenders, midfielders, or forwards. It uses D3.js (v7) with SVG and animation to render the chart. Users can filter by position via radio buttons, which recalculates a linear best-fit line for the selected group, and hover over points to reveal player details. The data is loaded via `d3.csv` from a remote GitHub source.

SSebastian Steiner
68% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA
68% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

66264kusuma@gmail.com
68% match
Loading thumbnail…

NFL Scatter Plot

This scatter plot visualizes NFL player performance by plotting fantasy points against targets for the 2021 season, with player positions (RB, WR, QB) color-coded. The visualization uses D3.js v7 APIs such as `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes and render SVG circles. Data is loaded asynchronously from a CSV hosted on GitHub using the `csv` method, and the drop-down menus for axis selection are present but not yet wired to update the chart.

AArturo Guevara
67% match