34:["$","title",null,{"children":"Replicating Chart - The Russian ruble under Putin | Danilo Fiumi | Observable"}] 3c:[{"id":"388d2f574dd7414ef8bc5ae265e273eedf1bc5dd7a23196f686a8b956f9106ffda36b10841e6ae1c720d108ca2e2b030f8786f934c16265c325de565150f6be7","href":"https://static.observableusercontent.com/files/388d2f574dd7414ef8bc5ae265e273eedf1bc5dd7a23196f686a8b956f9106ffda36b10841e6ae1c720d108ca2e2b030f8786f934c16265c325de565150f6be7","name":"rubusd.json","type":"application/json","lastModified":1647280247712.665,"size":82309},{"id":"80bd19470dab88a298baa735cecd51455686a9db0c4a44beb6465a1fe3a9527a01a09bcae33786694beed5e0c7454cb64ca4c2d128f6226bb9b5bbfaaf2b7d7a","href":"https://static.observableusercontent.com/files/80bd19470dab88a298baa735cecd51455686a9db0c4a44beb6465a1fe3a9527a01a09bcae33786694beed5e0c7454cb64ca4c2d128f6226bb9b5bbfaaf2b7d7a","name":"ptn@5.png","type":"image/png","lastModified":1647286314167.4,"size":193968},{"id":"7e0ca0adcb342332e7a50ac5fc05bff473e1c6183c36fc4e48feb0a267e1086bb3e496ac9d9066167c398c76446debfbd3c24061e7a4c549268957709663d81f","href":"https://static.observableusercontent.com/files/7e0ca0adcb342332e7a50ac5fc05bff473e1c6183c36fc4e48feb0a267e1086bb3e496ac9d9066167c398c76446debfbd3c24061e7a4c549268957709663d81f","name":"Linkedin_chart.png","type":"image/png","lastModified":1647293533956.827,"size":966810}] 38:{"id":"c600f934c49b6d1f","slug":"replicating-chart-the-russian-ruble-under-putin","title":"Replicating Chart - The Russian ruble under Putin","thumbnail":"5119ae8579e0c5caa15f1f87f600391dfbed1b7c791248ea3c3016cd862aa5b5","access_level":"public","create_time":"$D2022-03-14T12:50:33.904Z","update_time":"$D2022-03-22T15:33:49.559Z","view_time":null,"first_public_time":"$D2022-03-14T22:13:32.840Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"c2083b0498b4e358","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":503,"publish_version":503,"role":null,"authored":false,"authors":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4b2ae24ac320dda4","login":"danilofiumi","name":"Danilo Fiumi","avatar_url":"https://avatars-next.observableusercontent.com/e40b61175a24abac7dee2a7c2d85472b8ddbb6d8625837100d41647386f568ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"14e8c024519c9939","slug":"charts-break-down","title":"Chart's Break Down ","owner":{"id":"c2083b0498b4e358","login":"danilofiumi","name":"Danilo Fiumi"}},"type":"notebook","body":{"titling":"auto","title":"Replicating Chart - The Russian ruble under Putin","cells":[{"id":0,"value":"# Replicating Chart - The Russian ruble under Putin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"icons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"A few days ago I came across this James Eagle's post: https://www.linkedin.com/posts/jameseagle_dollar-datavisualisation-fx-activity-6908112337677762561-HOMw.
\nThe post, as shown in the image below, represents the trend of the ruble against the dollar during the years of Putin's government through a line chart.

\nI found his particular design very inspiring, so I decided to replicate it from scratch in D3.js and plain javascript and make it available, here on Observable, for those who want just explore this world or improve the data visualization skills, starting from the most intresting and trending representations available.
\nHope you find it useful!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"for any questions feel free to contact me at https://www.linkedin.com/in/danilofiumi/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"FileAttachment(\"Linkedin_chart.png\").image()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"## Starting point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"fetched = FileAttachment(\"rubusd.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"fx = fetched.series[0].data.filter(\n (d) => new Date(d.date) > new Date(\"1999-12-01T00:00\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"var_x = \"x\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"var_y = \"y\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"xAccessor = getMetricAccessor(getMetricType(data.map((d) => d[var_x])), var_x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"yAccessor = getMetricAccessor(getMetricType(data.map((d) => d[var_y])), var_y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xScale = d3\n .scaleUtc()\n .domain([\n d3.min(\n d3.extent(\n fx,\n getMetricAccessor(getMetricType(fx.map((d) => d[var_x])), var_x)\n )\n ) - 1000000000,\n d3.max(d3.extent(fx, xAccessor))\n ])\n .range([0, dms.boundedWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"yScale = d3.scaleLinear().domain([0, 0.05]).nice().range([dms.boundedHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"xAxis = d3.axisBottom(xScale).ticks(12).tickSizeOuter(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"yAxis = d3.axisLeft(yScale).ticks(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"function drawAxes(bounds) {\n bounds\n .append(\"g\")\n .attr(\"transform\", move(0, dms.boundedHeight))\n .call(xAxis)\n .attr(\"color\", \"white\")\n .call((g) =>\n g.selectAll(\".tick\").attr(\"color\", \"white\").attr(\"stroke-opacity\", 1)\n )\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"color\", \"white\")\n .attr(\"x\", 0)\n .attr(\"dy\", 10)\n );\n\n bounds\n .append(\"g\")\n .call(yAxis)\n .call((g) => g.select(\".domain\").remove())\n .call((g) => g.selectAll(\".tick line\").remove())\n .call((g) =>\n g\n .selectAll(\".tick text\")\n .attr(\"color\", \"white\")\n .attr(\"x\", -10)\n .attr(\"dy\", 0)\n );\n\n bounds.append(\"g\").call(grid);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"function drawData(bounds, data) {\n bounds\n .append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#FFC700\")\n .attr(\"stroke-width\", 2.2)\n .attr(\"d\", d3.line().x(x).y(y));\n\n bounds\n .append(\"circle\")\n .attr(\"r\", 4)\n .attr(\"fill\", \"white\")\n .attr(\"cx\", xScale(xAccessor(fx[xx])))\n .attr(\"cy\", yScale(yAccessor(fx[xx])));\n\n bounds\n .append(\"g\")\n .attr(\"class\", \"images\")\n .append(\"svg:image\")\n .attr(\"transform\", move(10, -60))\n .attr(\"x\", xScale(xAccessor(fx[xx])))\n .attr(\"y\", yScale(yAccessor(fx[xx])))\n .attr(\"width\", 35)\n .attr(\"height\", 55)\n .attr(\"xlink:href\", ptn);\n\n bounds\n .append(\"text\")\n .attr(\"class\", \"value\")\n .attr(\"fill\", \"white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", \"14\")\n .attr(\"transform\", move(27, 0))\n .attr(\"x\", xScale(xAccessor(fx[xx])))\n .attr(\"y\", yScale(yAccessor(fx[xx])))\n .text(d3.format(\",.3f\")(yAccessor(fx[xx])));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"# Final result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"html`\n

\n\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"chart = {\n const svg = d3.select(\"#chrt\");\n svg.selectAll(\"*\").remove();\n svg.style(\"overflow\", \"visible\");\n\n svg.append(\"g\").attr(\"transform\", move(dms.marginLeft, dms.marginTop));\n\n drawAxes(svg);\n drawData(svg, data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"/// structure\nmd`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"xx = {\n var x = 0;\n while (x < fx.length - 1) {\n await Promises.delay(30);\n yield (x += 1);\n if (x >= fx.length - 1) {\n var x = 0;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"ptn = FileAttachment(\"ptn@5.png\").blob().then(URL.createObjectURL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"data = {\n var lst = [];\n for (let index = 0; index < xx; ++index) {\n lst.push(fx[index]);\n }\n return lst;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"dms = {\n let dms = {\n width: 500,\n height: 500,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 50,\n marginLeft: 50\n };\n dms.boundedWidth = dms.width - dms.marginLeft - dms.marginRight;\n dms.boundedHeight = dms.height - dms.marginTop - dms.marginBottom;\n\n return dms;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"move = (x = 0, y = 0) => `translate(${x}, ${y})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"\nx = d => xScale(xAccessor(d))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"\ny = (d) => yScale(yAccessor(d))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"grid = (g) =>\n g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"color\", \"white\")\n .attr(\"stroke-dasharray\", 3.3)\n\n .call((g) =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(yScale.ticks())\n .join(\"line\")\n .attr(\"y1\", (d) => 0.5 + yScale(d))\n .attr(\"y2\", (d) => 0.5 + yScale(d))\n .attr(\"x1\", 0)\n .attr(\"x2\", dms.boundedWidth)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"///\ngetMetricAccessor = (type, elem) => {\n if (type == \"numerical\") return (d) => +d[elem];\n if (type == \"numerical-string\") return (d) => +d[elem].replace(/[%,]/g, \"\");\n if (type == \"datetime\") return (d) => new Date(d[elem]);\n return (d) => d[elem];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function getMetricType(\n values,\n name = \"\",\n dateMetrics = [\"time\", \"date\", \"datetime\"]\n) {\n const uniqueValues = [...new Set(values)]\n .filter((d) => d || d != \"NA\")\n .sort();\n const uniqueValuesString = uniqueValues.join(\",\");\n\n return [\"0,1\", \"0,1,NaN\"].includes(uniqueValuesString)\n ? \"categorical\"\n : dateMetrics.includes(name)\n ? \"datetime\"\n : uniqueValues.filter((d) => Number.isFinite(+d)).length >=\n uniqueValues.length - 1\n ? \"numerical\"\n : uniqueValues.filter((d) => Number.isFinite(+d.replace(/[%,]/g, \"\")))\n .length == uniqueValues.length\n ? \"numerical-string\"\n : typeof uniqueValues[0] == \"string\" &&\n (uniqueValues[0].startsWith(\"rgb\") || uniqueValues[0].startsWith(\"#\"))\n ? \"color\"\n : uniqueValues.length < 10\n ? \"categorical\"\n : \"text\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"import { icons } from \"@danilofiumi/social-sharing-links\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 33:null