29:null 2a:["$","title",null,{"children":"Observable plot faceted slope chart for explanatory visualisations | Patrick Wojda | Observable"}] 2f:T18cf,svg` `30:[{"id":"c0b3076f0e8db976df56136dd01f5f255b207c0c4b1012f07ca6c38dc640c9201c95f6a997370a0b2a0be88be39dbc617c3d2259f4bb244a9de5dbcc69ff4efa","href":"https://static.observableusercontent.com/files/c0b3076f0e8db976df56136dd01f5f255b207c0c4b1012f07ca6c38dc640c9201c95f6a997370a0b2a0be88be39dbc617c3d2259f4bb244a9de5dbcc69ff4efa","name":"V-Dem-CY-Core-v13@2.json","type":"application/json","lastModified":1687935989920.378,"size":25122}] 2d:{"id":"65193c21ec0e09ab","slug":null,"title":"Observable plot faceted slope chart for explanatory visualisations","thumbnail":"9dd4188e7fcc530de0988d05c9465a47fdcda21bc01cb47aac7ac3a568265df9","access_level":"public","create_time":"$D2023-06-25T11:33:23.459Z","update_time":"$D2025-03-06T08:45:51.255Z","view_time":null,"first_public_time":"$D2023-06-25T11:33:23.459Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"02bf290f098d5a95","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":"starter_2024"},"version":1611,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null}],"members":[{"type":"individual","id":"66c365e4a7f918e6","login":"gitnoise","name":"Patrick Wojda","avatar_url":"https://avatars-next.observableusercontent.com/37de83ff866855b411b5ed7c2da3c3587abe6a5035f6f746f9988ddddeadc493","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Observable plot faceted slope chart for explanatory visualisations","cells":[{"id":0,"value":"# Observable plot faceted slope chart for explanatory visualisations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1600,"value":"Trying out how to use custom annotations, headers and subheaders in Observable plot for explanatory data visualisations.\n\nAlso trying out how do some basic data analysis using the SQL cells.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1606,"value":"## Visualisations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1335,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1339,"value":"## Filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"europeancountrycodes = {\n const euContryCodesExludingSmallCountries =\n \"AUT,BEL,BGR,HRV,CYP,CZE,DNK,EST,FIN,FRA,DEU,GRC,HUN,IRL,ITA,LVA,LTU,LUX,MLT,NLD,POL,PRT,ROU,SVK,SVN,ESP,SWE,\";\n\n const europeanCountryExcludingEU = [\n \"Albania,ALB\",\n \"Andorra,AND\",\n \"Armenia,ARM\",\n \"Belarus,BLR\",\n \"Bosnia and Herzegovina,BIH\",\n \"Faroe Islands,FRO\",\n \"Georgia,GEO\",\n \"Iceland,ISL\",\n \"Kosovo,XKX\",\n \"Liechtenstein,LIE\",\n \"Macedonia,MKD\",\n \"Moldova,MDA\",\n \"Montenegro,MNE\",\n \"Norway,NOR\",\n \"Russian Federation,RUS\",\n \"Serbia,SRB\",\n \"Switzerland,CHE\",\n \"Turkey,TUR\",\n \"Ukraine,UKR\",\n \"United Kingdom,GBR\"\n ];\n\n return (\n euContryCodesExludingSmallCountries +\n europeanCountryExcludingEU.map((c) => c.split(\",\")[1])\n ).split(\",\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"highlighterFaceted = (d, direction) =>\n europeancountrycodes.includes(d.country_text_id) &&\n (direction === \"desc\"\n ? d.v2x_libdem2012 - d.v2x_libdem2022 > 0.21\n : d.v2x_libdem2022 - d.v2x_libdem2012 > 0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1341,"value":"## Data wrangling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"vDemCyCoreV13 = FileAttachment(\"V-Dem-CY-Core-v13@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"Select \n country_name,\n country_text_id,\n v2x_libdem2012,\n v2x_libdem2022,\n RANK () OVER ( \n \t\tORDER BY v2x_libdem2012 DESC\n \t) dem_rank_2012,\n RANK () OVER ( \n \t\tORDER BY v2x_libdem2022 DESC\n \t) dem_rank_2022 \nfrom vDemCyCoreV13 \n","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"libdemData","database":"var:vDemCyCoreV13"},{"id":613,"value":"summaryData = {\n const rising = libdemData.filter(\n (d) =>\n europeancountrycodes.includes(d.country_text_id) &&\n d.v2x_libdem2012 < d.v2x_libdem2022\n ).length;\n\n const decreasing = libdemData.filter(\n (d) =>\n europeancountrycodes.includes(d.country_text_id) &&\n d.v2x_libdem2012 > d.v2x_libdem2022\n ).length;\n\n const calculatedTotal = libdemData.filter((d) =>\n europeancountrycodes.includes(d.country_text_id)\n ).length;\n\n return {\n rising: rising,\n decreasing: decreasing,\n calculatedTotal: calculatedTotal\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1488,"value":"enrichedData = libdemData\n .map((d) => ({\n diff_dem: d.v2x_libdem2022 - d.v2x_libdem2012,\n diff_rank: d.dem_rank_2022 - d.dem_rank_2012,\n diff_dem_percent: d.v2x_libdem2022 / d.v2x_libdem2012,\n ...d\n }))\n .filter((d) => europeancountrycodes.includes(d.country_text_id))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1515,"value":"select \n diff_dem,\n diff_rank,\n diff_dem_percent,\n country_name,\n country_text_id\nfrom \n enrichedData","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:enrichedData"},{"id":1343,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":596,"value":"// Takes an SVG and using d3 + d3-annotation adds an annotation to the svg\nfunction doAnnotation(targetSVG, annotation, annotationType, textWrap = 120) {\n const makeAnnotations = d3_annotation\n .annotation()\n .editMode(false)\n .textWrap(textWrap)\n .type(annotationType ?? d3_annotation.annotationLabel)\n .annotations([annotation]);\n\n const renderAnnotation = () => {\n const svg = d3.select(targetSVG).append(\"svg\");\n svg.attr(\n \"style\",\n \"font: initial;text-anchor: initial; fill: red; font-family: Arial; font-size: 12px;\"\n );\n svg.call(makeAnnotations);\n };\n\n // need to wait a tick for the dom to be rendered\n window.requestAnimationFrame(renderAnnotation);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"d3_annotation = require(\"https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.0/d3-annotation.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"