31:T632,{ // If this page is outside of Observable, set the default styles to approximate // the appearance of the Observable Look and Feel. if (ui === "custom") { return htl.html`

Note: This is an archived version of an Observable Notebook supplement for the RAMPVIS PhilTransA submission titled: 
"Visualization for Epidemiological Modelling: Challenges, Solutions, Reflections & Recommendations"
For the live version, see here: https://observablehq.com/@jwolondon/rampvis_idiom_directional_flow_curves

`; } else { return htl.html`

Note: This is a live version of the Observable Notebook supplement for the RAMPVIS PhilTransA submission titled 
"Visualization for Epidemiological Modelling: Challenges, Solutions, Reflections & Recommendations"

`; } }32:T464, * As **an epidemiological model builder** * I would like to * **understand where the main flows of people are across the country.** * **understand these over a range of spatial scales** (e.g. local intra-city commuting to national cross-country movements). * **identify asymmetric flows ** (where movements of people into an area show different patterns to flows out of an area). * **break down flows by employment category and examine their differences and similarities** (e.g. do office workers show different movement patterns to students and will they have different impacts on disease transmission?). * **represent flows visually in a way that allows me to do the above.** Currently my flow maps are too cluttered and do not show direction or local flows clearly enough. * so that I can **assess the effect of movement of people and employment structure on my epidemiological modelling.** It would allow me to evaluate the degree to which my modelling is dependent on employment structure, and whether geographic variations in that structure are important in understanding disease transmission.33:T93e,The use of asymmetric Bézier curves to show directional connection can be attributed to [Fekete et al (2003)](http://www.cs.umd.edu/hcil/trs/2003-32/2003-32.pdf) who used such curves to indicate edges in a (mathematical) graph. They emphasised the ability to show many links with relatively little visual clutter. The first use of directional curves in a geographic context was given by [Wood et al (2011)](https://openaccess.city.ac.uk/id/eprint/538/) when visualizing large numbers of flows of people riding bicycles in an urban setting. Note that [Wood et al (2011)](https://openaccess.city.ac.uk/id/eprint/538/) reversed the origin-destination to straight-curved mapping compared to [Fekete et al (2003)](http://www.cs.umd.edu/hcil/trs/2003-32/2003-32.pdf), in order to emphasise the physical analogue of a bicycle coming to a rapid halt. [Wood et al (2011)](https://doi.org/10.3138/carto.46.4.239) and later works ([Beecham and Wood, 2014](https://doi.org/10.1080/03081060.2013.844903); [Beecham et al, 2014](https://doi.org/10.1016/j.compenvurbsys.2013.10.007); [Wood et al, 2014](https://doi.org/10.1109/TVCG.2014.2346323)) demonstrated their scalability in a visualization context showing many thousands of flows and with typical geographic structures related to patterns of population movement. There remain some limitations with this approach. Geographically embedded flow lines suffer from *distance saliency bias* where flows over longer distances result in longer and more visually dominant lines, even if they are not the most important ([Wood et al, 2010](https://doi.org/10.1179/000870410X12658023467367)). They do not show intra-area flows (flow from a location back to itself) and so require an additional form of symbolisation if these are to be represented. Similarly, short flows between very near locations can be hard to detect visually, although this can be overcome to some extent though grid mapping and other quasi-spatial projections ([Meulemans et al, 2016](https://doi.org/10.1109/TVCG.2016.2598542)). [Jenny et al (2018)](https://doi.org/10.1080/15230406.2016.1262280) observed that flow direction arrows were preferred over asymmetric curves although their studies were limited to relatively simple patterns of flows. They also recommended that data-dependent positioning of curves be used to minimise occlusion and crossing lines.34:T6d7,laColours = (opacity = "ff") => { const clrMap = new Map(); clrMap.set("Clackmannanshire", "#9a4e87" + opacity); clrMap.set("East Ayrshire", "#5bc34e" + opacity); clrMap.set("East Lothian", "#9b58cb" + opacity); clrMap.set("East Renfrewshire", "#9fba36" + opacity); clrMap.set("Na h-Eileanan Siar", "#586fd8" + opacity); clrMap.set("Falkirk", "#d0af3f" + opacity); clrMap.set("Dumfries and Galloway", "#2d7a59" + opacity); clrMap.set("Fife", "#559532" + opacity); clrMap.set("Highland", "#de386a" + opacity); clrMap.set("Inverclyde", "#63c47c" + opacity); clrMap.set("Midlothian", "#d04988" + opacity); clrMap.set("Moray", "#468c4e" + opacity); clrMap.set("North Ayrshire", "#d24132" + opacity); clrMap.set("Orkney Islands", "#3abbcc" + opacity); clrMap.set("Perth and Kinross", "#e1852f" + opacity); clrMap.set("West Lothian", "#6196d4" + opacity); clrMap.set("Scottish Borders", "#ab7d2c" + opacity); clrMap.set("Shetland Islands", "#6b61a5" + opacity); clrMap.set("South Ayrshire", "#888c2f" + opacity); clrMap.set("Renfrewshire", "#c490da" + opacity); clrMap.set("West Dunbartonshire", "#586a18" + opacity); clrMap.set("South Lanarkshire", "#e388a6" + opacity); clrMap.set("Stirling", "#5cbf9d" + opacity); clrMap.set("Aberdeen City", "#387392" + opacity); clrMap.set("Aberdeenshire", "#d256b7" + opacity); clrMap.set("Argyll and Bute", "#b75059" + opacity); clrMap.set("City of Edinburgh", "#afb16c" + opacity); clrMap.set("Angus", "#97455b" + opacity); clrMap.set("Dundee City", "#627037" + opacity); clrMap.set("North Lanarkshire", "#a35229" + opacity); clrMap.set("East Dunbartonshire", "#dc966e" + opacity); clrMap.set("Glasgow City", "#85682d" + opacity); return clrMap; }35:T4f0,{ const zip = (a, b, c, d, e) => a.map((k, i) => [k, b[i], c[i], d[i], e[i]]); const ods = zip( laGeoFlows.array("ogx"), laGeoFlows.array("ogy"), laGeoFlows.array("dgx"), laGeoFlows.array("dgy"), laGeoFlows.array("total") ); const maxFlow = Math.max(...laGeoFlows.array("total")); const maxCol = Math.max(...laGeoTable.array("gx")); const maxRow = Math.max(...laGeoTable.array("gy")); const clrMap = laColours("2a"); const r = new Renderer(525, 675) .fit([ [-0.5, -0.5], [maxCol + 0.5, maxRow + 0.5] ]) .stroke("white") .strokeWidth(2) .textAlign("middle") .textBaseline("top") .textSize(4); laGeoTable.objects().forEach((row) => r .fill(clrMap.get(row.name)) .polygon([ [row.gx - 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy + 0.5], [row.gx - 0.5, row.gy + 0.5] ]) .push() .fill("black") .stroke() .text(row.name, row.gx, row.gy) .pop() ); r.stroke("rgba(152,52,48,0.4)").fill(); ods.forEach(([ogx, ogy, dgx, dgy, flow]) => r .strokeWidth(Math.pow((30 * flow) / maxFlow, 0.7)) .bezier(dFlowCurve([ogx, ogy], [dgx, dgy])) ); return r.render(); }36:T92f,{ const zip = (a, b, c, d, e, f) => a.map((k, i) => [k, b[i], c[i], d[i], e[i], f[i]]); const cScale = d3.scaleSequential(d3.interpolateRdYlBu); const ods = zip( laGeoFlows.array("ogx"), laGeoFlows.array("ogy"), laGeoFlows.array("dgx"), laGeoFlows.array("dgy"), laGeoFlows.array("diffOtMi_LiOp"), laGeoFlows.array("total") ); const maxFlow = Math.max(...laGeoFlows.array("total")); const maxCol = Math.max(...laGeoTable.array("gx")); const maxRow = Math.max(...laGeoTable.array("gy")); const minDiff = Math.min(...laGeoFlows.array("diffOtMi_LiOp")); const maxDiff = Math.max(...laGeoFlows.array("diffOtMi_LiOp")); const maxAbsDiff = Math.max(Math.abs(minDiff), Math.abs(maxDiff)); const clrMap = laColours("2a"); const r = new Renderer(525, 675) .fit( [ [-0.5, -0.5], [maxCol + 0.5, maxRow + 0.5] ], 10 ) .clear("black") .stroke("black") .strokeWidth(2) .textAlign("middle") .textBaseline("top") .textSize(4); // Title and legend r.push().setTransform(null); r.stroke() .fill("white") .textSize(18) .textAlign("left") .textBaseline("top") .text("Other Middle", 10, 10) .textSize(7.5) .text("Difference from 'likely operating'", 10, 43) .text("-5000", 15, 72) .textAlign("middle") .text("0", 85, 72) .textAlign("right") .text("5000", 155, 72); r.fill().strokeWidth(2); for (let i = 0; i <= 1; i += 0.01) { r.stroke(cScale(1 - i)).line([ [10 + i * 150, 60], [10 + i * 150, 70] ]); } r.pop(); laGeoTable.objects().forEach((row) => r .fill("rgba(255,255,255,0.1)") .polygon([ [row.gx - 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy + 0.5], [row.gx - 0.5, row.gy + 0.5] ]) .push() .fill("rgba(255,255,255,0.9)") .stroke() .text(row.name, row.gx, row.gy) .pop() ); // Sort flows so largest shown 'on top' ods.sort((a, b) => (a[5] > b[5] ? 1 : b[5] > a[5] ? -1 : 0)); r.fill(); ods.forEach(([ogx, ogy, dgx, dgy, diff, flow]) => { r.stroke(cScale(1 - (0.5 + (0.5 * diff) / maxAbsDiff))) .strokeWidth(Math.pow((30 * flow) / maxFlow, 0.7)) .bezier(dFlowCurve([ogx, ogy], [dgx, dgy])); }); return r.render(); }37:T40f,{ const zip = (a, b, c, d, e) => a.map((k, i) => [k, b[i], c[i], d[i], e[i]]); const ods = zip( ggGeoFlows.array("ogx"), ggGeoFlows.array("ogy"), ggGeoFlows.array("dgx"), ggGeoFlows.array("dgy"), ggGeoFlows.array("total") ); const maxFlow = Math.max(...ggGeoFlows.array("total")); const maxCol = Math.max(...ggGeoTable.array("gx")); const maxRow = Math.max(...ggGeoTable.array("gy")); const clrMap = laColours("2a"); const r = new Renderer(600, 600) .fit([ [-0.5, -0.5], [maxCol + 0.5, maxRow + 0.5] ]) .stroke("white"); // Draw grid. ggGeoTable.objects().forEach((row) => r.fill(clrMap.get(row.sName)).polygon([ [row.gx - 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy - 0.5], [row.gx + 0.5, row.gy + 0.5], [row.gx - 0.5, row.gy + 0.5] ]) ); // Drow flow curves r.stroke("brown").fill(); ods.forEach(([ogx, ogy, dgx, dgy, flow]) => r.strokeWidth(flow / maxFlow).bezier(dFlowCurve([ogx, ogy], [dgx, dgy])) ); return r.render(); }38:T519,Modellers were able to see the extent and structure of commuting movements that were part of their model but had to this point remained hidden. Interpretation was straightforward with little learning required to make sense of the mapping. There were able to confirm anticipated dominant inflows to urban centres for work but identify exceptions to this where unexpected movements occurred (add example towns?). Revealed unexpected dependency on the scale of spatial aggregation on the model behaviour. At the broader regional scale (LAs), the coarse aggregation hid the majority of population movement and so invited consideration of the network model using finer scale (MSOA) aggregation. The visualization this revealed the scale-dependency of the network model. Visualization by employment category was able to give modellers greater insight into the geographic dependencies of their employment categorisation. For example in the importance of the 'other middle' category in parts of the Glasgow commuter belt (significantly reduced travel) and the 'office closed' flows between Edinburgh and Fife/Falkirk/West Lothian. Significant differences were observed between Edinburgh and Glasgow in the 'other closed', again giving modellers assurance that subdividing by employment category was worthwhile.39:T5b0, Initially we tried a range of flow symbolisations including straight-line flow symbols, graduated lines (thick at one end, thin at the other creating an 'arrow'), offset lines (allowing locations as origins and locations as destinations to be visually offset). These alternatives were less preferred by the modellers as they either hid important information or they took more effort and learning to interpret. Directional curves were less successful as the number of distinct origin-destination flows increased (e.g. MSOA flows in and out of Glasgow City). Occlusion could prevent in-out asymmetries from being detected in such cases. Comparison of the two scales of aggregation revealed the importance of comparing inter-area flows with intra-area flows, but the idiom does not directly represent the latter. Suggests we need to have some form of a->a flow symbolisation to complement the a->b flows. It remains a challenge to do this without cluttering the visual representation (but see [RAMPVIS : The OD Map](https://observablehq.com/@jwolondon/rampvis_idiom_odmap)). Patterns hidden by spatial aggregation remain a problem from an epidemiological perspective. For example, the flows between Aberdeen City and surrounding Aberdeenshire were visually dominant in the map and grid representations, but it is not clear whether these are dominated by very local flows adjacent to the city boundaries, or longer rural-urban flows over larger distances. 3a:T652,We have clear evidence that the directional flow curve idiom is capable of showing movement structure including asymmetries. The patterns it reveals are dependent on the scale at which movement data are aggregated, which is both useful in allowing scale-dependency to be assessed, but also dangerous in creating a possibly misleading impression if only a single scale of aggregation is used. The distance-saliency bias of this (and any spatially embedded edge symbolisation) remains a limitation in that more proximal flows can be harder to detect, but may be important for interpretation and modelling. Using the same idiom but applied to reprojected geographies (grid maps in this case) can partially overcome this by separating close but more densely populated regions. But it does not eliminate the problem. There is an opportunity to integrate flow curves with a symbolic representation of intra-area flows ("a to a"), such as graduated circles, which is useful for cases where inter- and intra- flow comparison is important. The challenge remains in doing so without introducing too much visual clutter, especially as such flows can occur at points of already high inter-area flow density. We found that directional flow curves on a gridded geography provided a useful intermediate step towards more the more abstract OD-map representation for modellers to interpret. By revealing some patterns, but showing the limitations introduced by distance saliency and occlusion, this can lead modellers more naturally to more abstract representations, providing an important 'learning' stage in visual interpretation.3b:T8b0,**Beecham, R.** and **Wood, J.** (2014) Exploring gendered cycling behaviours within a large-scale behavioural data-set. *Transportation Planning and Technology, 37(1)*, pp.83-97. https://doi.org/10.1080/03081060.2013.844903 **Beecham, R.**, **Wood, J.** and **Bowerman, A.** (2014) Studying commuting behaviours using collaborative visual analytics. *Computers, Environment and Urban Systems, 47*, pp.5-15. https://doi.org/10.1016/j.compenvurbsys.2013.10.007 **Fekete, J.**, **Wang, D.**, **Dang, N.**, **Aris, A.** and **Plaisant, C.** (2003) Overlaying graph links on treemaps. *Proceedings of the IEEE Symposium on Information Visualization Conference Compendium (InfoVis 03)* pp.82-83. [PDF.](http://www.cs.umd.edu/hcil/trs/2003-32/2003-32.pdf) **Jenny, B.**, **Stephen, D.**, **Muehlenhaus, I.**, **Marston, B.**, **Sharma, R.**, **Zhang, E.** and **Jenny, H.** (2018) Design principles for origin-destination flow maps. *Cartography and Geographic Information Science, 45(1)*, pp.62-75. https://doi.org/10.1080/15230406.2016.1262280 **Meulemans, W.**, **Dykes, J.**, **Slingsby, A.**, **Turkay, C**. and **Wood, J.** (2016) Small multiples with gaps. *IEEE transactions on visualization and computer graphics, 23(1)*, pp.381-390. https://doi.org/10.1109/TVCG.2016.2598542 **Parsons, P.** (2018) Conceptual metaphor theory as a foundation for communicative visualization design. *IEEE VIS Workshop on Visualization for Communication, Berlin (VisComm 2018)*. [PDF](https://par.nsf.gov/servlets/purl/10087033) **Wood, J.**, **Dykes, J.** and **Slingsby, A.** (2010) Visualisation of origins, destinations and flows with OD maps. *The Cartographic Journal, 47(2)*, pp.117-129. https://www.tandfonline.com/doi/abs/10.1179/000870410X12658023467367 **Wood, J.**, **Slingsby, A.** and **Dykes, J.** (2011) Visualizing the dynamics of London's bicycle-hire scheme. *Cartographica 46(4)*, pp.239-251. https://doi.org/10.3138/carto.46.4.239 **Wood, J.**, **Beecham, R.** and **Dykes, J.** (2014) Moving beyond sequential design: Reflections on a rich multi-channel approach to data visualization. *IEEE transactions on visualization and computer graphics, 20(12)*, pp.2171-2180. https://doi.org/10.1109/TVCG.2014.23463233c:[{"id":"0774ad33e6feb31286c658f22b6f32bcde42eab530d1da5b415adf5d4630679196c1d89f6b72c0426b09be6fc54dc12e2e2fce8fc25944a2f6bb28d0c826ccc2","href":"https://static.observableusercontent.com/files/0774ad33e6feb31286c658f22b6f32bcde42eab530d1da5b415adf5d4630679196c1d89f6b72c0426b09be6fc54dc12e2e2fce8fc25944a2f6bb28d0c826ccc2","name":"earthMoversDistance.jpg","type":"image/jpeg","lastModified":1633361234191.643,"size":461285}] 2f:{"title":"RAMPVIS : Directional Flow Curves","cells":[{"id":0,"value":"# RAMPVIS : Directional Flow Curves","pinned":false,"hidden":false,"mode":"md"},{"id":1759,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"## 1. User Story","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"---\n\n## 2. Data\n\nSource data relate to Scotland Local Authority regions (LAs) and Greater Glasgow/Clyde Medium Super-output Areas (ggMSOAs). Each of these two geographies are represented by topoJSON boundary files, centroid locations, grid positions and commuting flows broken down by employment type.","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"data = ({\n laBoundaries:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/geo/scotLAs2017.json\",\n laFeatures: \"scotLAs2017\",\n laCentroids:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/geo/scotLACentroids.csv\",\n laGrid:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/grid/scotLAsGrid.csv\",\n laFlows:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/flows/scotLAsFlows.csv\",\n ggBoundaries:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/geo/greaterGlasgow.json\",\n ggFeatures: \"greaterGlasgow\",\n ggCentroids:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/geo/greaterGlasgowCentroids.csv\",\n ggGrid:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/grid/greaterGlasgowGrid.csv\",\n ggFlows:\n \"https://raw.githubusercontent.com/gicentre/scrc/main/data/flows/greaterGlasgowMSOAFlows.csv\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"From these core data sources, we can derive others by performing relation joints between their tabular representation. Specifically, to georeference origin-destination locations we can join the flow tables with the centroid and grid tables using the common GSS as key. Table joining is implemented with the [Arquero](https://observablehq.com/@uwdata/introducing-arquero) package.","pinned":false,"hidden":false,"mode":"md"},{"id":1091,"value":"*Georeferenced LA flows:*","pinned":false,"hidden":false,"mode":"md"},{"id":1311,"value":"viewof laGeoTable = {\n // Store input files as tables with standardised column names.\n const centroidTable = await d3\n .csv(data.laCentroids, d3.autoType)\n .then((csv) =>\n aq\n .from(csv)\n .rename({ lad17cd: \"gss\", lad17nm: \"name\" })\n .select(\"gss\", \"name\", \"cx\", \"cy\")\n );\n const gridTable = await d3\n .csv(data.laGrid, d3.autoType)\n .then((csv) =>\n aq\n .from(csv)\n .rename({ regionCode: \"gss\", regionName: \"name\", regionTXT: \"sName\" })\n );\n\n // Join grid and centroid tables\n return centroidTable\n .join(gridTable, [\"gss\"], [aq.all(), [\"g79X\", \"g79Y\", \"sName\"]])\n .rename({ g79X: \"gx\", g79Y: \"gy\" })\n .view({ height: 140 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":1025,"value":"viewof laGeoFlows = {\n const flowTable = await d3.csv(data.laFlows, d3.autoType).then(\n (csv) =>\n aq\n .from(csv)\n .rename({ source: \"o\", dest: \"d\" })\n .filter((datum) => datum.o != datum.d) // Remove intra-area flows.\n );\n\n // Add centroid and grid locations for each od pair.\n return flowTable\n .join(\n laGeoTable,\n [\"o\", \"gss\"],\n [aq.not(\"o\"), aq.not(\"gss\", \"name\", \"sName\")]\n )\n .rename({ cx: \"ox\", cy: \"oy\", gx: \"ogx\", gy: \"ogy\" })\n .join(\n laGeoTable,\n [\"d\", \"gss\"],\n [aq.not(\"d\"), aq.not(\"gss\", \"name\", \"sName\")]\n )\n .rename({ cx: \"dx\", cy: \"dy\", gx: \"dgx\", gy: \"dgy\" })\n .view({ height: 140 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"*Georeferenced Greater Glasgow flows:*","pinned":false,"hidden":false,"mode":"md"},{"id":1322,"value":"viewof ggGeoTable = {\n const centroidTable = await d3\n .csv(data.ggCentroids, d3.autoType)\n .then((csv) =>\n aq\n .from(csv)\n .rename({ IZ_CODE: \"gss\", IZ_NAME: \"name\" })\n .select(\"gss\", \"name\", \"cx\", \"cy\")\n );\n const gridTable = await d3\n .csv(data.ggGrid, d3.autoType)\n .then((csv) =>\n aq\n .from(csv)\n .rename({ regionCode: \"gss\", regionName: \"name\", council: \"sName\" })\n );\n\n // Join grid and centroid tables\n return centroidTable\n .join(gridTable, [\"gss\"], [aq.all(), [\"gridX\", \"gridY\", \"sName\"]])\n .rename({ gridX: \"gx\", gridY: \"gy\" })\n .view({ height: 140 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1741,"value":" ","pinned":false,"hidden":false,"mode":"html"},{"id":1100,"value":"viewof ggGeoFlows = {\n const flowTable = await d3.csv(data.ggFlows, d3.autoType).then(\n (csv) =>\n aq\n .from(csv)\n .rename({ origin: \"o\", dest: \"d\" })\n .filter((datum) => datum.o != datum.d) // Remove intra-area flows.\n );\n\n // Add centroid and grid locations for each od pair.\n return flowTable\n .join(\n ggGeoTable,\n [\"o\", \"gss\"],\n [aq.not(\"o\"), aq.not(\"gss\", \"name\", \"sName\")]\n )\n .rename({ cx: \"ox\", cy: \"oy\", gx: \"ogx\", gy: \"ogy\" })\n .join(\n ggGeoTable,\n [\"d\", \"gss\"],\n [aq.not(\"d\"), aq.not(\"gss\", \"name\", \"sName\")]\n )\n .rename({ cx: \"dx\", cy: \"dy\", gx: \"dgx\", gy: \"dgy\" })\n .view({ height: 140 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"---\n\n## 3. Directional Flow Curves","pinned":false,"hidden":false,"mode":"md"},{"id":694,"value":"A *directional flow curve* is a visual representation of a flow between an origin and destination, where the shape of the curve joining the two locations can indicate the direction of flow. We use an asymmetric Bézier curve with flow direction implied from the straighter to the bendier end. The thickness of the line can indicate flow magnitude and its colour, category of flow or double encoding of magnitude with a sequential colour scheme.","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"The form of the curve is controlled by two parameters, *angle* and *magnitude*. Together these determine the asymmetry and 'curviness' of each line. In the example below, we show flows from A->B and A->C in red and B->A and C->A in blue.","pinned":false,"hidden":false,"mode":"md"},{"id":698,"value":"dFlowCurveParam = ([ox, oy], [dx, dy], cur, asym) => {\n const curveAngle = (cur * Math.PI) / 180;\n const cosA = Math.cos(curveAngle);\n const sinA = Math.sin(curveAngle);\n const x = (ox - dx) * asym;\n const y = (oy - dy) * asym;\n const cx = dx + x * cosA - y * sinA;\n const cy = dy + y * cosA + x * sinA;\n return [\n [ox, oy],\n [cx, cy],\n [dx, dy],\n [dx, dy]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof angle = Inputs.range([-132, 132], {\n value: 90,\n step: 1,\n label: \"Angle (degrees)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"viewof mag = Inputs.range([0, 1], {\n value: 0.25,\n step: 0.01,\n label: \"Magnitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"{\n const w = 450;\n const h = 315;\n const a = [50, h / 2];\n const b = [w / 2, h / 2];\n const c = [w - 50, h / 2];\n const aToB = dFlowCurveParam(a, b, angle, mag);\n const aToC = dFlowCurveParam(a, c, angle, mag);\n const bToA = dFlowCurveParam(b, a, angle, mag);\n const cToA = dFlowCurveParam(c, a, angle, mag);\n return new Renderer(w, h)\n .stroke(\"#ccc\")\n .pointSize(4)\n .textBaseline(\"middle\")\n .textSize(20)\n .line([a, c])\n .stroke()\n .points([a, b, c])\n .textAlign(\"right\")\n .text(\"A\", ...a)\n .textAlign(\"left\")\n .text(\"B\", ...b)\n .text(\"C\", ...c)\n .strokeWidth(3)\n .stroke(\"#c33\")\n .fill()\n .bezier(aToB)\n .bezier(aToC)\n .stroke(\"#33c\")\n .fill()\n .bezier(cToA)\n .bezier(bToA)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"The technique carries several advantages over straight line representations:\n* Co-linearities are avoided (set magnitude to 0 above to see example of the problem this solves)\n* Direction is encoded.\n* Visual complexity is reduced compared to using arrow symbolisation.\n\n*Computational note:* Setting the angle to 90 degrees with a fixed magnitude allows a faster computation of the Bézier control points as we can dispense with the trigonometrical calculations.","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"dFlowCurve = ([ox, oy], [dx, dy], reverse = false) => [\n [ox, oy],\n [\n dx - (reverse ? -0.25 : 0.25) * (oy - dy),\n dy + (reverse ? -0.25 : 0.25) * (ox - dx)\n ],\n [dx, dy],\n [dx, dy]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"Indicating flows with lines is relatively intuitive, requiring little in the way of explanation or learning to interpret. Deducing the direction of flow from curvature requires a little practice, but the allocation of a curve's straight end to origin and curved end to destination follows a simple [physical metaphor](https://par.nsf.gov/servlets/purl/10087033) (Parsons, 2018) of setting out on a bicycle in a straight line and curving to a 'skid stop' at its destination.\n\nGeographically embedded flows that might concentrate in clusters (such as urban centres) show characteristic radial patterns if they are dominated by inflows or outflows. Relatively little learning is required to recognise these two patterns and therefore differentiate centres dominated by inflows from those with outflows. Try changing the proportion of inflows (red) and outflows (blue) to see these two radial patterns.","pinned":false,"hidden":false,"mode":"md"},{"id":846,"value":"viewof inOut = Inputs.range([0, 1], {\n value: 1,\n step: 0.01,\n label: \"Outflow - Inflow\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"{\n const w = 300;\n const h = 300;\n const [cx, cy] = [w / 2, h / 2];\n const outers = [];\n for (let a = 0; a < 2 * Math.PI; a += Math.PI / 5) {\n for (let i = 0; i < 4; i++) {\n const r = (Math.random() * h) / 2;\n outers.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);\n }\n }\n const r = new Renderer(w, h).fill();\n\n outers.forEach((p) => {\n if (Math.random() < inOut) {\n r.stroke(\"#c33\").bezier(dFlowCurve(p, [cx, cy]));\n } else {\n r.stroke(\"#33c\").bezier(dFlowCurve([cx, cy], p));\n }\n });\n\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"---\n## 4. Origin and Context","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"---\n\n## 5. Examples","pinned":false,"hidden":false,"mode":"md"},{"id":1557,"value":"### We are the City\n\nAnimation that uses directional flow curves to show movement across London via public bicycle sharing scheme:","pinned":false,"hidden":false,"mode":"md"},{"id":1553,"value":"\n

We are the city from Jo Wood on Vimeo.

","pinned":false,"hidden":false,"mode":"html"},{"id":1729,"value":"### Modelling Checkpoint-based movement\n\nDirectional flow curves were used to validate and describe movement modelling using 'earth mover's distance' for sensor data in the paper by Duckham et al (2016). For example, Figure 1 in that paper uses directional flow curves to show flow estimations of people in central London based on least cost movement between mobile telephone density surfaces over the 5 min period.","pinned":false,"hidden":false,"mode":"md"},{"id":1787,"value":"**Duckham, M.**, **van Kreveld, M.**, **Purves, R.**, **Speckmann, B.**, **Tao, Y.**, **Verbeek, K.** and **Wood, J.** (2016). [Modeling checkpoint-based movement with the earth mover’s distance](https://openaccess.city.ac.uk/id/eprint/17712/1/emd-grid.pdf). In *The Annual International Conference on Geographic Information Science*, pp.225-239. Springer.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"---\n## 6. Description and use","pinned":false,"hidden":false,"mode":"md"},{"id":934,"value":"Epidemiological modellers wanted to see the **main flows of people across the country**. Using directional flow curves with width proportional to the square root of estimated daily commuting numbers between Scottish LAs, we see the main inter-region flow patterns. This reveals the [central belt](https://en.wikipedia.org/wiki/Central_Belt) and begins to show some of the asymmetries of flow such as those into and out of Aberdeen City and its surroundings.","pinned":false,"hidden":false,"mode":"md"},{"id":978,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"{\n const resolve = (obj, expr) => expr.split(\".\").reduce((o, i) => o[i], obj);\n const zip = (a, b, c, d, e) => a.map((k, i) => [k, b[i], c[i], d[i], e[i]]);\n const ods = zip(\n laGeoFlows.array(\"ox\"),\n laGeoFlows.array(\"oy\"),\n laGeoFlows.array(\"dx\"),\n laGeoFlows.array(\"dy\"),\n laGeoFlows.array(\"total\")\n );\n const maxFlow = Math.max(...laGeoFlows.array(\"total\"));\n\n const regions = await d3\n .json(data.laBoundaries)\n .then((feats) =>\n topojson.feature(feats, resolve(feats.objects, data.laFeatures))\n );\n\n const r = new Renderer(400, 650)\n .stroke(\"white\")\n .strokeWidth(2)\n .setProjection(d3.geoIdentity().reflectY(true))\n .geoShape(regions, \"properties.lad17nm\", (la) => laColours(\"2a\").get(la));\n\n r.stroke(\"brown\").fill();\n ods.forEach(([ox, oy, dx, dy, flow]) =>\n r\n .strokeWidth(Math.sqrt((8 * flow) / maxFlow))\n .bezier(dFlowCurve([ox, oy], [dx, dy], true))\n );\n\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"The geography of Scotland makes it particularly vulnerable to distance saliency bias, especially the small flows to and from the highlands, Western Isles and Northern Isles. In response to this problem we remapped the geography onto a grid ([Meulemans et al, 2016](https://doi.org/10.1109/TVCG.2016.2598542)) and used the same directional flow curve idiom:","pinned":false,"hidden":false,"mode":"md"},{"id":1306,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"## Flows by employment sector\n\nThe Simple Network Flow model differentiates between employment sector so it is important that modellers can see the extent to which the geographic pattern of flows vary by sector under various conditions of lockdown. The following categories were used:\n\n|Category | Explanation |\n| ------- | ----------- |\n|LikelyOperating | Industries in which workers are in key roles and so probably travelling under lockdown|\n|OtherMiddle | Those employed in industries less likely to be working under lockdown, but who may begin working as lockdown loosens. Based on Scottish ordering of when people in particular roles are able to work.|\n|OfficeClosed | Those working in offices who are unlikely to be travelling during lockdown|\n|OtherClosed | others in employment categories who are unlikely to be travelling during lockdown, including the retail, real estate, cultural and hospitality sectors. |","pinned":false,"hidden":false,"mode":"md"},{"id":1626,"value":"Given the need for modellers to examine differences between categories we computed these differences directly by comparing flows for each compared with a baseline of 'likelyOperating'. Using the same flow curve geometries we coloured lines according to magnitude of difference (as a *signed chi* statistic) and their width according to overall magnitude of commuting flow. Orange and red shades indicate that more workers from a given employment category travel than those who are ‘likelyOperating’. The blue shades mean that fewer from this category are traveling than those in ‘likelyOperating’ roles. Darker colours are bigger differences, pale yellows mean that numbers in the two categories of job are about the same.","pinned":false,"hidden":false,"mode":"md"},{"id":1630,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"## Flows over a range of spatial scales\n\nInitial cross-country views suggested a national view may be hiding more local flows, and by implication, over-emphasising inter-city and rural-city flows at the expense of intra-city flows. We also do not see how these inter-area flows compare with intra-area flows.\n\nConsequently, the epidemiological modellers wished to examine more local scale flows, such as the Greater Glasgow / Clyde region with flows aggregated at the MSOA level. Showing flow curves on the conventional map view showed an occlusion problem because of the high number of flow lines centred on Glasgow. But it did demonstrate significant numbers of flows within Local Authority regions (indicated by coloured background region). This proved useful in providing evidence of a scale dependency of the modelling (significant movements of people not recorded if aggregating at the LA level).","pinned":false,"hidden":false,"mode":"md"},{"id":1375,"value":"{\n const resolve = (obj, expr) => expr.split(\".\").reduce((o, i) => o[i], obj);\n const zip = (a, b, c, d, e) => a.map((k, i) => [k, b[i], c[i], d[i], e[i]]);\n\n // Draw basemap.\n const regions = await d3\n .json(data.ggBoundaries)\n .then((feats) =>\n topojson.feature(feats, resolve(feats.objects, data.ggFeatures))\n );\n const r = new Renderer(640, 500)\n .stroke(\"white\")\n .setProjection(d3.geoIdentity().reflectY(true))\n .geoShape(regions, \"properties.NRSCouncil\", (msoa) =>\n laColours(\"2a\").get(msoa)\n );\n\n // Draw flows.\n const ods = zip(\n ggGeoFlows.array(\"ox\"),\n ggGeoFlows.array(\"oy\"),\n ggGeoFlows.array(\"dx\"),\n ggGeoFlows.array(\"dy\"),\n ggGeoFlows.array(\"total\")\n );\n const maxFlow = Math.max(...ggGeoFlows.array(\"total\"));\n r.stroke(\"brown\").fill();\n ods.forEach(([ox, oy, dx, dy, flow]) =>\n r.strokeWidth(flow / maxFlow).bezier(dFlowCurve([ox, oy], [dx, dy], true))\n );\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"Displaying MSOAs as a grid allows a little more of the flow structure to be seen.","pinned":false,"hidden":false,"mode":"md"},{"id":1401,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"---\n## 7. Reflection","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"### 7.1 What Worked","pinned":false,"hidden":false,"mode":"md"},{"id":1447,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"### 7.2 What Didn't Work","pinned":false,"hidden":false,"mode":"md"},{"id":1453,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"### 7.3 Recommendations & Opportunities","pinned":false,"hidden":false,"mode":"md"},{"id":1472,"value":"$3a","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"### 7.4 Who Was Involved?\n","pinned":false,"hidden":false,"mode":"md"},{"id":1458,"value":"**Jo Wood** and **Jason Dykes** (academic visualization designers);
\n**Jess Enright** (Simple Network Model designer).","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"---\n\n## 8. References","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"$3b","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"*For basic rendering of graphical primitives:*","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"import { Renderer } from \"@jwolondon/renderer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"*For conversion of topoJSON to geoJSON (for background mapping):*","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"*For table manipulation (specifically relational joins):*","pinned":false,"hidden":false,"mode":"md"},{"id":1017,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"*For page styling:*","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1746,"value":"*For archive view style:*","pinned":false,"hidden":false,"mode":"md"},{"id":1750,"value":"import { ui } from \"@mootari/environment\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}