2d:null 2e:["$","title",null,{"children":"Fan Map Concept and Design | Martien van Steenbergen | Observable"}] 33:T593,# Fan Map Concept and Design A Fan Map: - is a specific visual representation of a hierarchy; - looks like a fan of cards, hand fan, the spread out fan tail of a peacock, or the unfolded wings of a butterfly; - has its hierarchy is often limited to four or five layers, to keep it comprehensible; - has **all text upright** – no need to snap your neck to read the texts. Fan Maps come in two major flavours: 1. **Fan of Cards**, fans out a handful of categories, potentially with subcategories or facets and further details. 2. **Contrast Map**, compares two sets side by side (left and right). An **Argument Map** is a special variant of the **Contrast Map**: it contrasts arguments and explores both sides of – probably hotly – debated issues, and: - clears up reasoning and effective communication; - helps to clear away confusion; - encourages involvement; - leads to a stronger control of an organization or group by the majority of its members; that is, it is deeply democratic or self-governing. (REPHRASE!); - often includes a For/Against, Pro/Con, or Aye/No split near the root; - is presented in a nonpartisan format, potentially with supporting background information, statistics, and resources; - has its categories preferrably listed as values or qualities, as these facilitate a good conversation about the spirit rather than the letter of things. ### Style & Appearance - D3 Hierarchy - London Tube Map34:[] 31:{"id":"dac6f198a87911d3","slug":"fan-map-concept-and-design","title":"Fan Map Concept and Design","thumbnail":"5cd565dfcf81e99a27524e1a737b5bb4f25ab05e235b893b91f3aed2310f890c","access_level":"public","create_time":"$D2022-08-07T09:47:54.354Z","update_time":"$D2024-03-16T12:45:32.113Z","view_time":null,"first_public_time":"$D2024-03-16T12:45:55.246Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":54,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"51b68d455f7aad02","slug":"argumentenfabriek","title":"Argumentenfabriek","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Fan Map Concept and Design","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"|source|target|departure|slide|drift|note|\n|----|----|---|---|\n|vertical|vertical|h|<0, 1>|> 0|_drift_ can reduce overlap of tracks between bends
_drift_ starts at 0
_drift_ is reset to 0 as soon as _altitude_ changes sign|\n|horizontal|vertical|v|1|0|slide ≠ 1 can cause overlap of tracks at target;
make sure that ∀ _y_: _y__target ≠ _y__source|\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"|flavour|departure|kind|departure centered around|backwards when|note|\n|----|----|---|---|---|---|\n|Fan|h|zig|_y_ = 0|_x_ < 0||\n|Fan|v|hook|_x_ = 0|_y_ < 0||\n|Contrast|h|zig|_x_ = 0|–||\n|Contrast|v|hook|_y_ = 0|–||\n\n- `departure` always implies `kind`\n- _x_ = 0 means all tracks depart and are centered around _x_ = 0; that is, they leave from the _y_ axis; vice versa for _y_ = 0;\n- `backwards` means that the colors must run from last to first;","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"- set drift to 0 and slide to 1 to turn zigzag into a hook\n- set departure to \"h\" (default) or \"v\", as you wish\n- when targets are aligned vertically: split data into upper and lower halves,\n- so departures can be centered around origin\n- call station for each half\n- pass proper color index offset to second half, so colors continue along palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"### `zig`\n- injects two bend points between source and target to form and return its ‘zig’ \n- takes a slide, orientation, and drift; plus a scaler\n- returns function that\n - takes a Link – Source and Target, i, and Links\n - returns its ‘Zig’, a list of four scaled Points: source, target, and\n - two bends injected between the two\n- slide sets the bend’s position accordingly\n- slide’s range is between 0 (start point) and 1 (end point)\n- create a ‘hook’ by setting the slide to either 0 or 1\n- as the bend then coincides with one of the two points\n- somewhat inefficient, but makes code simpler\n- orientation is either \"h\" or \"v\" and sets the direction\n- of departure from the source\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"## Resources\n- https://maps.simoncullen.org\n- https://maps.simoncullen.org/basics\n- https://maps.simoncullen.org/hints\n- https://www.procon.org/about-us/\n- https://www.procon.org/background-resources/critical-thinking-video-series-critical-thinking-explained/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"