TerrySmithDC

@TerrySmithDC·4 public vizzes

hackternoon

A force-directed cluster visualization of Dota 2 tournament matches. Circles represent individual games, grouped and colored by tournament league, with circle radius derived from viewer count. The code uses d3.forceSimulation with custom clustering and collision forces, rendering to SVG. Data comes from two CSV files: Dota2Games.csv and Dota2Tourn.csv, processed within a Vue-like class structure.

Jun 12, 2017

Loading thumbnail…

Fetching CSV

This example fetches three CSV files in parallel and displays the sum of their numbers in a large headline. It uses the Fetch API with Promises to load the data, then parses each file with d3-dsv’s `d3.csvParse`. The resulting values are added together and written to the page. The visualization relies on WebGL rendering for the final output, though the code itself focuses on asynchronous data loading.

Jun 9, 2017

Loading thumbnail…

fresh block

This example shows Dota 2 player earnings and country totals as a simple scatter-like SVG visualization, with blue rectangles positioned per player or nation. The code loads earnings.json, reduces the data into objects pairing names with numeric earnings, and uses a d3.scaleLinear to map the earnings range to a 300-pixel scale. It attempts to draw rectangles using d3.axisLeft for the y-axis, though the x-position is set to the player name string rather than a numeric scale. The visualization relies on D3 v4’s selection and scale APIs.

Apr 7, 2017

Loading thumbnail…

Likes

This example shows how to extract and format a person’s list of likes from a small JavaScript array of objects, producing plain-text strings like "Terry likes: sleep, coffee" and "Kelly likes: Not being fun, Jenna Fisher." The code defines a `likes` function that uses the array methods `filter` and `map` to locate a matching name and join its associated `likes` values into a comma-separated sentence. The visualization is entirely text-based, with no graphical rendering, and relies solely on vanilla JavaScript array operations rather than any external library. The data is hardcoded inline as a constant.

Aug 25, 2016