lynz09

@lynz09·18 public vizzes

Number of football games with an Interactive Color Legend

This scatterplot shows the number of football games per tournament type between 2010 and 2020, with each circle representing a game and color encoding tournament category. An interactive color legend lets users hover over a tournament type to highlight only its games while fading others. The visualization uses React with D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, and `csv` for data loading. International football results data are rendered as SVG circles with axes and a responsive legend.

Nov 5, 2020

Loading thumbnail…

Top 10 countries play the most football games

This horizontal bar chart ranks the top 10 countries by their number of international football games, with Mexico leading at 174 games. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering bars as SVG rectangles. Data is loaded from a local CSV via D3’s `csv` function, with axes and tick labels styled through CSS. The chart omits gridlines for the y-axis and includes a formatted x-axis label, using D3’s `axisBottom` and `axisLeft` for layout.

Oct 31, 2020

Loading thumbnail…

Sketch2 of football results

This visualization shows the frequency of international football matches by year, broken down by tournament type, using a stacked bar chart. The bars reveal that events like the AFC Asian Cup occur more often in non-World Cup years, while other competitions vary by season. The visualization is built with d3.v5 and Vega-Lite, loading data from a CSV file via d3.csv, and renders the chart using Vega’s SVG renderer. The tooltip handler provides interactive details, and the chart is configured with custom fonts and colors from a shared config file.

Oct 31, 2020

Loading thumbnail…

International Football Games Across the World

A world map displays circles marking cities that hosted international football games between 2010 and 2020, with circle size proportional to the square root of the game count per city. Data comes from a Kaggle-derived CSV. The visualization uses D3 with a `d3.geo.equirectangular` projection and `d3.geo.path` for rendering country boundaries from TopoJSON. Pan and zoom are implemented via `d3.behavior.zoom`. Hovering over a circle reveals a tooltip with the country, city, and total games.

Oct 29, 2020

Loading thumbnail…

International football games with selectable countries

This map visualizes international football games from 2010 to 2020, with countries colored by the number of matches played. Users can pan and zoom using d3.zoom, and click on individual countries to highlight them or dim the rest of the map. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render world boundaries from TopoJSON data, while match counts come from a Kaggle CSV dataset. A color legend with d3.scaleSqrt and scaleLinear controls the color encoding, though hovering to display exact counts remains incomplete.

Oct 28, 2020

Loading thumbnail…

Map with Selectable Countries

This interactive map displays global economic classifications by country using a color-coded ordinal scale. Clicking a country highlights it, dims all others, and clicking the same country again deselects it; the color legend also supports filtering by category. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render World Atlas TopoJSON data as SVG paths, with d3.zoom enabling pan and zoom. Color and selection states are managed through d3.scaleOrdinal and schemeSpectral, while click events drive the selection logic.

Oct 22, 2020

Loading thumbnail…

International football games around the world

This example visualizes cities that hosted international football games between 2010 and 2020 on a world map. It shows the geographic distribution of match locations using red circles, with the map rendered as a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Country boundaries come from World Atlas TopoJSON, with graticules and a light blue sphere for context. City data is loaded from a CSV file listing coordinates and match counts, while circle sizing uses d3.scaleSqrt. The visualization is built with React and D3 v5, rendering to SVG.

Oct 22, 2020

Loading thumbnail…

Scatter Plot with Menus on Medical Cost Personal Dataset

This interactive scatter plot explores the Medical Cost Personal Dataset, showing relationships between patient attributes like age, BMI, and children. Users select which attribute maps to the x- and y-axes via two ReactDropdown menus, with smoker status encoded by the color of each circle. Built with React and D3 v5, the visualization uses scaleLinear for axes, scaleOrdinal for colors, and custom SVG components for axis ticks and marks, loading data via d3.csv.

Oct 7, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numerical attributes by selecting variables for the X and Y axes from dropdown menus. Built with React and D3.js, the visualization uses `scaleLinear` and `extent` to map data values to SVG coordinates, with custom axis components rendering ticks. The marks are SVG circles with tooltips that show formatted values using D3's `format`. Data is loaded asynchronously via D3's `csv` parser, and the interface updates dynamically when menu selections change.

Oct 7, 2020

Loading thumbnail…

Loading and Parsing football results Data

This example displays basic statistics about the international football results dataset, showing the file size in kilobytes, the number of rows, and the number of columns after parsing. It uses `d3.csv` to load the remote CSV file and then `d3.csvFormat` to compute the raw text length, while also accessing `data.length` and `data.columns.length` for the row and column counts. The parsed data originates from a GitHub gist containing match records from the first official FIFA World Cup games. An alternative approach using `fetch` with `async/await` and `d3.csvParse` is provided but commented out.

Oct 2, 2020

Loading thumbnail…

Loading and Parsing insurance Data

This example demonstrates how to load and parse a CSV file containing insurance data, displaying the dataset’s size in kilobytes, row count, and column count. The code uses d3.csv to fetch the remote CSV and then applies d3.csvFormat to measure the formatted data length, while also accessing the parsed array’s length and the columns array’s length. The message is rendered into a pre element with a large font size. An alternative approach using fetch, async, and await with d3.csvParse is commented out, alongside a nested fetch callback pattern.

Oct 2, 2020

Loading thumbnail…

Create a pie chart with D3 and React

Two React implementations of the same D3 pie chart render side-by-side, showing random data generated with `d3.range` and `Math.random`. The first version uses a function component with the `useEffect` and `useRef` hooks to manage D3 DOM updates, while the second renders SVG elements declaratively through React's JSX. Both use `d3.pie()`, `d3.arc()`, `d3.scaleOrdinal` with `schemeCategory10`, and `d3.format` for labels, with a button triggering new random data.

Oct 1, 2020

Loading thumbnail…

Sketch2 of football results

Oct 1, 2020

Loading thumbnail…

Insurance

The scatter plot shows medical insurance charges across patient ages, with points colored by smoking status to reveal that smokers incur consistently higher costs than non-smokers. The visualization uses the Vega-Lite API within a D3 v5 framework, binding CSV data loaded via `d3.csv` and rendering points with `vl.markPoint`. The chart encodes age and charges on quantitative axes via `vl.x().fieldQ()` and `vl.y().fieldQ()`, while the categorical smoker variable drives `vl.color().fieldN()`. Custom styling is applied through a Vega-Lite config object that adjusts axis labels and title fonts.

Sep 27, 2020

Loading thumbnail…

International football results

The visualization shows the number of international football matches per year from 2010 to 2020, with lines colored by tournament type. It uses Vega-Lite’s `markLine` to aggregate and count matches over time, encoding the date field on the x-axis and the count of games on the y-axis. The data is loaded via `d3.csv` from a gist containing international football results. The chart is rendered with Vega-Lite’s API and Vega’s renderer, while a custom config adjusts axis and label styling for readability.

Sep 27, 2020

Loading thumbnail…

Number of Tracks per Artist in Spotify Top 100 List

A horizontal bar chart displays the number of songs by each artist in Spotify's Top 100 list for 2018, with lengths sorted descending. It clearly shows the top contributors, such as XXXTENTACION and Post Malone with six tracks each, followed by Drake with four. Using vega-lite-api, the chart encodes artist names on the x-axis and counts on the y-axis, with data loaded via D3's csv parser from the linked GitHub dataset. The visualization applies custom axis and label styling through a config object.

Sep 26, 2020

Loading thumbnail…

Loading and Parsing spotify Data

This example shows the size and structure of a Spotify top-tracks CSV dataset by displaying three summary metrics in large text: file size in kilobytes, row count, and column count. It loads the remote CSV with `d3.csv`, then reports the byte size using `d3.csvFormat`, while accessing row and column counts directly from the parsed data array and its `columns` property. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`, plus a nested promise chain, illustrating different approaches to asynchronous data loading.

Sep 24, 2020

Loading thumbnail…

HTML Starter

This example renders a green smiley face with two eyes, a mouth, and simple facial features using React and D3 v5. It shows how to combine React components with D3’s `arc` generator to draw the mouth path, while circles and ellipses create the eyes and face outline. The SVG is centered on a 960x500 canvas, with all elements positioned relative to a central transform. The code demonstrates a minimal setup where React handles the DOM rendering and D3 provides shape generation, using a static, hardcoded design with no data sources.

Sep 20, 2020