Fighters

100%

✓ Published0🌍 Public

Last edited Mar 27, 2017

Created on Mar 14, 2017

Fighters visualizes the life trajectories of individuals from Kosovo through an interactive force-directed graph. Each node represents a person, with summary panels on the left and right displaying categorical attributes such as gender, age, ethnicity, employment, and outcomes like imprisonment or death. The middle panel renders a geographic map using d3.geoPath, plotting municipalities and villages from the data source. The visualization leverages d3.forceSimulation for node layout and reads data from a Google Spreadsheet via a gist-hosted configuration, offering linked filtering across all attribute panels.

AI-generated description

Similar vizzes

Loading thumbnail…

Kosovo Research

This visualization maps the profiles of individuals from Kosovo, showing demographic traits like gender, ethnicity, education, and location alongside life-status features such as employment, marriage, and criminal background. It uses a custom configuration file to load data from a Google Spreadsheet and organize summaries into left, middle, and right panels. The implementation relies on D3’s force simulation to position nodes and likely employs canvas rendering for the interactive display, with categorical labels and feature flags derived directly from the spreadsheet fields.

Aadilyalcin

70% match

Loading thumbnail…

D3 Matrix Example

This example uses D3.js to visualize a force-directed network of UFC fighters, with node size reflecting a centrality measure and link width/opacity encoding the strength of connections. Each fighter is a labeled circle, positioned by a physics simulation with link distances proportional to edge weight. The graph is rendered in SVG with directed links, showing the structure of the fight network. Data is loaded from an external JSON file, and the visualization includes interaction through the force layout's built-in drag-and-drop behavior.

CConorAspell

64% match

Loading thumbnail…

D3 Matrix Example

This example uses a force-directed layout to visualize a directed graph of MMA fighter relationships, with 16 nodes and 19 directed links. Node size encodes each fighter’s centrality score, while node color distinguishes groups. Link opacity and stroke-width encode link weight on a 0–100 scale, and arrows indicate direction. The force simulation spaces the nodes using charge and link distance parameters, and labels identify each fighter.

CConorAspell

63% match

Loading thumbnail…

D3 Matrix Example

This matrix diagram uses D3.js to visualize a directed network of MMA fighters as an adjacency matrix. Nodes are listed along both axes, with links shown as colored cells and directional arrows. Node names and edges are derived from the provided JSON, and the centralities indicate node importance, with higher values suggesting more significant connections in the dataset. Rendered as SVG using D3 v3.

CConorAspell

59% match

Loading thumbnail…

Untitled

This example shows a force-directed network graph of six nodes (A-F), each colored by gender and labeled with an ID, with link thickness representing connection strength. The nodes are draggable and expand on hover, revealing tooltips with each person’s profession. The visualization uses D3 v7’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements, with `d3.drag` for interaction and `d3.scaleOrdinal` for categorical colors. Data is loaded from a local JSON file via `d3.json`. A static 6×6 adjacency matrix above the SVG complements the dynamic graph.

Sshatomouimena

57% match

Loading thumbnail…

Untitled

This example visualizes a small social network of six people labeled A through F, using a force-directed graph with nodes colored by gender and labeled with IDs. The network depicts relationships between individuals with varying link weights, such as the strong connection between F and B. A static adjacency matrix at the top complements the interactive graph, showing the same connections in tabular form. The visualization uses d3.forceSimulation with link, charge, and center forces, alongside d3.drag for interactive node movement and hover effects that enlarge nodes. Data is loaded remotely as JSON via d3.json.

HHeide

56% match

Loading thumbnail…

Untitled

This interactive network graph visualizes a small social network of six people, with nodes shaped according to job (circles for “Informatiker,” triangles for “Student,” rectangles for “Author”) and colored by gender. The node-link diagram is laid out using the force-directed physics of `d3.forceSimulation`, with link thickness proportional to the connection value. The visualization is built in React, uses SVG for rendering, and loads its JSON data via `d3.json`. Users can drag nodes to rearrange the layout, which the force simulation then re-optimizes in real time.

HHeide

56% match

Loading thumbnail…

Fosterly Intern Match

Fosterly Intern Match visualizes intern applicants as an interactive scatterplot, where each point represents a candidate and clusters reveal patterns across schools, degrees, job types, and preferred locations. The left panel filters by academic attributes like school and graduation date, while the right panel shows geographic preferences, and the middle panel breaks down categorical fields such as majors and job interests. Built with d3.forceSimulation for point layout and d3-geo for map-based location views, the visualization pulls live applicant data from a Google Sheets document, enabling dynamic filtering and zoomable record details through the KSHF configuration framework.

Aadilyalcin

56% match