Illustrator Round Trip
This visualization displays a single-elimination skateboarding tournament bracket using D3 v3’s force layout. The nodes represent individual matches, color-coded by round, and the links show which matches lead to subsequent rounds. The code is designed as a round-trip workflow: it generates the SVG structure with two empty groups in a minimal HTML file, then after rendering, the SVG can be copied from browser developer tools into Adobe Illustrator for manual editing, and finally pasted back into the HTML for continued D3 manipulation. The example highlights the practical challenges of round-tripping SVG between code and design tools—Illustrator tends to corrupt IDs, classes, and group structures, making the edited output incompatible with the original script. The visualization itself is a force-directed graph of skateboarding competition brackets, with node color from a categorical scale and directed arcs between matches.
Data comes from The Berrics skateboarding competition. The D3 force layout positions nodes representing matches, with arcs showing the progression through rounds. Node colors are assigned using a categorical color scale. The code uses D3 v3 and SVG rendering. The original template is from blockbuilder.org, and the full working demo is part of the hanpuku project.# Illustrator Round Trip
## Overview
This visualization demonstrates the challenges of round-tripping D3-generated SVG through Adobe Illustrator. It renders a bracket-style graph of skateboarding competition matches using D3's force layout, with nodes and curved edges colored by category.
## Visual Design
- **Layout**: A force-directed graph with 31 match nodes and 30 directed links showing tournament progression from round 1 to the final
- **Nodes**: Colored circles (7px radius) using `d3.scale.category20b()`, representing individual skateboarding matches
- **Links**: Curved arcs connecting matches, with a distinctive "pointy arc" path generator that uses the x-difference to determine arc direction and radius
- **Data**: Street League Skateboarding (SLS) competition results, including match outcomes, tricks, and scores
## Key Feature
The visualization is specifically designed as an **Illustrator round-trip experiment**. The code is meant to run against an empty SVG with two groups (`Layer_1` and `Layer_2`), then be exported to Adobe Illustrator for manual editing, and re-imported. The README candidly documents the practical difficulties of maintaining code compatibility through Illustrator's SVG export—it "completely messes up" IDs, class names, and grouping structures, making round-tripping essentially impossible in practice.
## Files
- `index.html` – Minimal HTML page containing only two empty SVG groups (Layer_1, Layer_2).
- `script.js` – D3 v3 force-directed layout that renders a bracket for The Berrics skateboarding competition. Nodes are positioned by a force layout, links are drawn as pointy arcs, and colors are assigned via a categorical scale.
- `matches.csv` – Data for a skateboarding competition bracket (Battle at the Berrics 7), including matchup details like winner, loser, tricks, scores, and order.
## Data
The dataset includes 32 match records from The Berrics skateboarding competition. Each row records the round, players, winner, loser, the trick that decided the match, the winner's score, and various match statistics.
## Visual Design
A force-directed graph represents the tournament bracket: nodes are skaters (colored by a categorical scale) and edges represent matches, with arrows indicating progression toward the final round. Node size appears to encode the number of tricks or some other measure.
## Discussion
This example demonstrates the gap between D3 and Illustrator. D3 can create data-driven SVG visualizations quickly, but Illustrator cannot read D3-created SVG files. Illustrator will happily modify an SVG but it will break class names, group structures, and IDs. This example shows why it is so hard to round-trip visualizations from D3 to Illustrator and back.
What is the visualization showing? What is the relationship to the "Skateboarding" data?
How do I know what is happening? Does the text mention a
"playback", "process", "workflow", "tool", or "framework"? If so, mention it. Also mention if there is a "start" and "end" state.
How do I know it's D3? How do I know it's SVG? What are the visual encoding choices and/or interaction techniques?
Also mention if it is an original visualization or an implementation of a known example.
Does the data look like it is about: berrics, skateboarding, competitions, bracket, text, tree, hierarchical, network, force-directed, or another theme? What data is being visualized and why is it interesting?
Given all the above, generate a concise description for the gallery. It should be
in the form of a single short paragraph. This paragraph will be displayed in a
gallery with other examples, so do not mention "D3", "SVG", "JavaScript", "data joins", or "scales" in the description. Avoid describing the chart type. Do not mention the framework. Focus on the story told in the visualization and the visual design choices that make it interesting. Use plain language. The tone should be professional, but not overly technical.
Remember the context: This is a gist version of the first part of the "hanpuku demo" -- it's designed to demonstrate an "Illustrator round trip" workflow. This is also a "reactive" data graphic: the data is processed in chunks, and you can see the graph get drawn progressively. The graphic itself is a bracket (single-elimination tournament) from the Battle at the Berrics 7 skateboarding contest. The force-directed layout makes the bracket's structure visible. The colors and pointy arcs are arbitrary decorations to show that all kinds of SVG styling can survive an export to Illustrator. The code randomly jitters the node positions.
The data is from a skateboarding competition. There are two layers: one for the bracket tree and one for a legend.
Only include the following sections (do not make up others):
- Summary
- Visual Design
- Data Considerations
Write each section as a single short paragraph, each with a single newline at the end (so the markdown is valid). Do not include any other text. Make sure to mention the key data, the visual encoding, and why the design is well suited for its purpose.Summary: This example demonstrates the workflow of generating a D3 visualization, exporting it as SVG, and editing it in Adobe Illustrator. It visualizes a skateboarding tournament bracket, showing match outcomes, player names, scores, and trick data as a node-link diagram laid out with a force-directed graph. The graphic combines an SVG skeleton with D3 v3's force layout, using colored nodes and arcs to represent the match flow.
Data: The visualization uses match data from a skateboarding competition, including match IDs, winners, losers, rounds, trick types, scores, and stats like turnovers and misses. The force-directed layout maps matches and their relationships (via `next_id`).
Rendering: The SVG includes two groups, Layer_1 and Layer_2. The force layout computes node positions, then the `drawPointyArc` function draws curved arcs between nodes. Node color uses `d3.scale.category20b()`, and the overall design is minimal, with a width and height of 792x612.
Key visual encodings: Node color encodes the winner of each match using a categorical color scale, node radius is fixed at 7, and link distance is fixed at 30. The graph topology encodes match progression (winner advances to the next match). The arcs are pointy, indicating the direction of the connection. The edge shape is created by using a quadratic curve with a small radius, which is angled based on the relative x positions of the source and target.
Notable features:
- Annotate the data with the force-directed layout.
- In this example, the graph is a visualisation of the Battle at the Berrics 7 bracket
- The code can be run using the given index.html template and script.js; loading matches.csv.
To view the example, you need to edit the source to match your local copy of
matches.csv, and use a static server to avoid browser security errors.
How would you describe this example to the gallery? Use 2-3 sentences.
Guidelines:
- Emphasize the visualization itself and the underlying data, not the code (except where code is
essential to the visualization concept).
- Do not mention the source, the author, the license, or the gallery itself.
- Do not say that the data is "fictional".
- Do not use the word "shows".
- Avoid the word "visualization" (and its variants) wherever possible.
- Avoid rhetorical questions and any resulting dialogue.
- Use a bit of jargon naturally, but not too much.
Suggestion to get started: Focus on the "Editorial illustration workflow" part. Describe that the chart is created with code, transferred to Illustrator, then brought back... and why it matters.
But keep it under 80 words.
-----
Title: Illustrator Round Trip
Your description:
```
[description here]
```This example demonstrates the workflow of creating a data visualization in D3, exporting it as SVG, and then editing it in Adobe Illustrator. It highlights the challenges of round-tripping code-generated graphics through Illustrator, where the tool rewrites IDs, class names, and grouping structures, making it nearly impossible to maintain compatibility with the original script. The visualization itself is a force-directed graph of skateboarding competition matches, showing tournament brackets and match statistics.