28:null 29:["$","title",null,{"children":"Vector Mark / Observable Plot | Observable | Observable"}] 2e:[{"id":"eda8a802fb7fd7429555174d1054ed864838ed3805a56a3cec27d6e065b8c12eefab55fb777078ef832caa2f6219b6952d5ff1cdd57e39d00bbc91225f14fbec","href":"https://static.observableusercontent.com/files/eda8a802fb7fd7429555174d1054ed864838ed3805a56a3cec27d6e065b8c12eefab55fb777078ef832caa2f6219b6952d5ff1cdd57e39d00bbc91225f14fbec","name":"windgrid.csv","type":"text/csv","lastModified":1641586387940.979,"size":163963}] 2c:{"id":"3347cdaa75bccd52","slug":"plot-vector","title":"Vector Mark / Observable Plot","thumbnail":"ad91e0b1ab74040f4fecfc74b5415671394179bc267d0a9e77ba2242e981ffbd","access_level":"public","create_time":"$D2022-01-07T19:54:33.734Z","update_time":"$D2022-12-01T15:39:46.958Z","view_time":null,"first_public_time":"$D2022-01-21T03:01:51.329Z","has_unpublished_edits":null,"fork":false,"stars":38,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":212,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"0f60ee375a8dd9e1","reply_to_id":null,"content":"did you manually adjust width and height so that lon/lat are (approximately) the same scale? If so does it deserve a comment after height: 960?","create_time":"$D2022-01-07T21:18:55.718Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"4432bd4329b781a0","reply_to_id":"0f60ee375a8dd9e1","content":"No, I did not. I just picked a height that looks good.","create_time":"$D2022-01-07T21:21:17.346Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"937d7feb4e8551fb","reply_to_id":"0f60ee375a8dd9e1","content":"In a future world with Plot.carto I imagine this could be done more elegantly. 😎","create_time":"$D2022-01-07T21:25:23.181Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":23,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Vector Mark / Observable Plot","cells":[{"id":0,"value":"

Vector Mark / Observable Plot

Observable Plot › Marks › Vector · API

\n\n# Plot: Vector\n\nThe **vector** mark represents data as little arrows, typically positioned in *x* and *y* quantitative dimensions, with a given magnitude (*length*) and direction (*rotate*), as in a vector field. For example, the plot below shows the wind speed and direction for a section of western Europe. (Based on a [LitVis example](https://github.com/gicentre/litvis/blob/master/examples/windVectors.md).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"wind = FileAttachment(\"windgrid.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"Plot.plot({\n inset: 10,\n width: 1152,\n height: 870, // for a rougly equirectangular projection\n color: {\n scheme: \"viridis\",\n label: \"Speed (m/s)\",\n zero: true,\n legend: true\n },\n marks: [\n Plot.vector(wind, {\n x: \"longitude\",\n y: \"latitude\",\n rotate: ({u, v}) => Math.atan2(u, v) * 180 / Math.PI,\n length: ({u, v}) => Math.hypot(u, v),\n stroke: ({u, v}) => Math.hypot(u, v)\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"Per [Remote Sensing Systems](https://www.remss.com/measurements/ccmp/) documentation:\n\n> *Standard U and V coordinates apply, meaning the positive U is to the right and positive V is above the axis. U and V are relative to true north. CCMP winds are expressed using the oceanographic convention, meaning a wind blowing toward the Northeast has a positive U component and a positive V component.*\n> \n> *Longitude is given in degrees East from 0.125 to 359.875 and latitude is given in degrees North with negative values representing southern locations.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"And here is another example using Poisson disk sampling of a Perlin noise field:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Plot.plot({\n inset: 12,\n height: 1152,\n width: 1152,\n marks: [\n Plot.vector(samples([0, 0, 2, 2], 4000), {\n length: ([x, y]) => (noise(x + 2, y) + 0.5) * 24,\n rotate: ([x, y]) => noise(x, y) * 360\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"noise = octave(perlin2, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"import {perlin2, octave} from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {samples} from \"@mbostock/poisson-disk-sampling\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"