CatLeal

@CatLeal·11 public vizzes

Infant Mortality Rate | Week 6

A multi-line chart displays the infant mortality rate for European Union and EFTA countries from 1960 to 2012, with the title indicating a focus on 2012 data. D3.js (v3) loads a CSV file, parses the year-based columns, and renders individual country trends as blue SVG paths. The visualization uses `d3.time.scale`, `d3.svg.axis`, and `d3.svg.line` to map time-series data, with a hover style applied to the lines. Data originates from PORDATA, aggregating Eurostat, UN, and national statistics.

Apr 26, 2015

Loading thumbnail…

HeroScore Top100 | Week 5

Scatterplot of the top 100 poker players’ HeroScore against their all-time earnings, sourced from a gist by CatLeal. The code uses D3.js v3, loading the CSV data with `d3.csv` and rendering SVG circles and axes. A sorting animation enlarges each point on a delay, and hovering highlights them. The visualization encodes each player’s name, country, and scores via tooltip titles, with logarithmic scaling on the y-axis.

Apr 26, 2015

Loading thumbnail…

Infant Mortality Rate | Week 5

Scatterplot of 2012 infant mortality rates against 1960 rates for 27 EU and EFTA countries. Each circle represents a country, with hover tooltips showing both values, and the visualization animates the points growing from a radius of 0.1 to 4 in sorted order. Built with d3.v3, the SVG chart uses d3.csv to load the PORDATA-sourced dataset, with linear scales for both axes and transitions with staggered delays.

Apr 26, 2015

Loading thumbnail…

Infant Mortality Rate | Week 4

A horizontal bar chart displays infant mortality rates for European Union and EFTA countries in 2012, sorted in ascending order with the lowest rate at the top. The visualization uses d3.csv to load the dataset, then applies d3.scale.linear for the x-axis and d3.scale.ordinal with rangeRoundBands for the y-axis. SVG rectangles render each bar with hover tooltips, while d3.svg.axis generates labeled axes. Data originates from PORDATA, integrating Eurostat, UN, and national statistical sources.

Apr 13, 2015

Loading thumbnail…

HeroScore Top100 | Week 4

This bar chart ranks the top 100 poker players by their total HeroScore, displaying each player's name on the y-axis and their score on the x-axis. A tooltip reveals a player's country and exact score. The visualization is rendered with SVG using D3 v3, and the data comes from a CSV file. The code uses `d3.scale.linear`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.csv` for scaling, axes, and data loading.

Apr 13, 2015

Loading thumbnail…

HeroScore Top100 | Week 3

A horizontal bar chart ranks 29 European countries by infant mortality rate in 2012. Using d3.csv to load the data and d3.ascending to sort by the a2012 field, it renders SVG rectangles whose widths encode each rate, with a title tooltip revealing the country and exact value. Bars are spaced ten pixels apart in a 1500-pixel-tall viewport.

Apr 12, 2015

Loading thumbnail…

HeroScore Top100 | Week 3

This example displays the top 100 poker players ranked by their HeroScore, a composite metric of influence and prestige, as horizontal bars. It uses the D3.js library (v3) to load data from a CSV file and render an SVG bar chart, where each bar’s width represents the player’s total HeroScore. Hovering over a bar reveals a tooltip with the player’s name, score, and country via the appended `title` element.

Apr 12, 2015

Loading thumbnail…

Loading CSV Data with D3

The visualization demonstrates how to load and inspect CSV data using D3, displaying a decorative SVG pattern of black bars above a text label. It uses `d3.csv` to asynchronously fetch the `Data_InfantMortalityRate.csv` file, which contains infant mortality rates for EU and EFTA countries from 1960 to 2012. The loaded data is parsed into an array of JSON objects and logged to the browser console, while the static SVG shapes serve as a visual placeholder.

Mar 26, 2015

Loading thumbnail…

Loading CSV Data with D3

This example displays a static SVG logo for HeroScore, a poker-related social influence rating, alongside a note that the top 100 players are available for exploration. The page loads a CSV file containing player statistics using D3’s `d3.csv` method, which parses the data into an array of JSON objects and logs them to the browser console for verification. The visualization itself relies on hardcoded SVG shapes—circles, a path, and text—rendered with D3 v3, and does not dynamically bind the CSV data to any visual elements.

Mar 26, 2015

Loading thumbnail…

Infant Mortality Rate EU 1960-2012

The visualization shows infant mortality rates across EU countries from 1960 to 2012 as a multi-line chart. It uses d3.line and d3.csv to parse the data, mapping each country’s yearly values to distinct colored paths over a shared time axis. The chart includes axes with d3.axisBottom and d3.axisLeft, and a legend to identify countries. The data comes from a gist by CatLeal, with each country’s series drawn as a separate line to highlight both overall declines and regional variations over the five-decade span.

Mar 22, 2015

Loading thumbnail…

HeroScore Top100 dataset

This chart visualizes the HeroScore Top100 dataset, comparing poker players across multiple performance metrics. Each row represents a player, with columns for earnings, popularity, poker results, and contribution scores. The code uses `d3.forceSimulation` to position nodes in a network graph, with node size mapped to total HeroScore and color indicating country. The underlying data comes from the CatLeal gist, parsed via `d3.csv` and rendered with `d3.geoPath` for the map background.

Mar 22, 2015