44:["$","title",null,{"children":"100 days of code Day 1 -Day 19 | Kim Fitter | Observable"}] 4c:T4de,md` **Day 2** I am going to follow a similar path to learning D3 to how I learnt R. (https://kimnewzealand.github.io/2019/03/13/learning2/#final-visualisations). The Observable tutorials look pretty good to start off with. Now that I am set up with an environment, I want to understand how to load "packages". In R one of the first chunks in an R Markdown document and workflow is to load the required R packages. Like R which has base functions, the Observable standard library is built-in to Observable (https://github.com/observablehq/stdlib). In D3, the the standard library's require method is used to load JavaScript modules (which which is a similiar concept to R packages) with the module name or path. Then @ can be used to specify the version to load ie require("d3@5"). (https://observablehq.com/@tmcw/introduction-to-require) > Because notebooks run in a web environment, we use another service, unpkg.com, that takes NPM's modules and makes them accessible to browsers. So it appears that no module installation is needed if using Observable which makes it very easy to use. Let's take a look at an example loading third party D3 modules (https://github.com/d3/d3/blob/master/API.md) using require method in the next cell. `4d:T45f,md`**Day 5** Today has involved some head scratching on JavaScript/D3 objects. *Data Types in R and JavaScript* In R there are different data types; Vectors, Matrices, Dataframes, Lists and Factors (https://resbaz.github.io/2014-r-https://swcarpentry.github.io/r-novice-inflammation/13-supp-data-structures/) In JavaScript there are also data types (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures): The latest ECMAScript standard defines eight data types: Seven data types that are primitives: Boolean, Null, Undefined, Number, bigint, String, Symbol (new in ECMAScript 6), and Object. Both R and JavaScript are object orientated languages. In R everything is created as an object even environments but in JS, objects are a data type, can also be anything stored in a variable and enhanced with properties. Let's try an example creating a new object, canvas with properties; type, x and y. We will use a key value concept called object literals (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals) ` 4e:T489,viewof point = { const width=1000; const height = 500; const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); let mousedown = false; context.beginPath(), path(graticule), context.strokeStyle = "grey", context.stroke(); context.beginPath(), path(land), context.fillStyle = "grey", context.fill(); context.lineWidth = 10, context.strokeStyle = "orange"; const image = context.getImageData(0, 0, context.canvas.width, context.canvas.height); function render(coordinates) { context.canvas.value = coordinates; context.clearRect(0, 0, width, height); context.putImageData(image, 0, 0); context.beginPath(), path({type: "Point", coordinates}), context.stroke(); } context.canvas.onmousedown = event => { mousedown = true; context.canvas.onmousemove(event); }; context.canvas.onmousemove = ({layerX, layerY}) => { if (!mousedown) return; render(projection.invert([layerX, layerY])); context.canvas.dispatchEvent(new CustomEvent("input")); }; context.canvas.onmouseup = event => { mousedown = false; }; render([0, 0]); return context.canvas; }4f:[] 48:{"id":"6efc032711c5e908","slug":"100-days-of-code","title":"100 days of code Day 1 -Day 19","thumbnail":"60ecad6d9aaed5db3c7b704653eecf71f8e1e613e75366cffe8e7732854f51f9","access_level":"public","create_time":"$D2019-05-06T00:17:31.718Z","update_time":"$D2019-06-28T00:51:07.844Z","view_time":null,"first_public_time":"$D2019-05-06T01:16:47.964Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7d7941efbb2313ba","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":"starter_2024","bio":"Data and community wrangler\n\n","followed_by_you":false,"follows_you":false},"version":450,"publish_version":450,"role":null,"authored":false,"authors":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"bio":"Data and community wrangler\n\n","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"75bb913059238850","login":"kimnewzealand","name":"Kim Fitter","avatar_url":"https://avatars-next.observableusercontent.com/e8f314afe9edb2d2300dd21dd2314c6a931b75e859f283135ae85adac04c4e76","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"100 days of code Day 1 -Day 19","cells":[{"id":0,"value":"md`# 100 days of code Day 1 -Day 19\n\nI am self taught in R and almost all the coding I do is within R using R packages. The way I think of R code is as a set of sequential steps, yet an iterative process to develop a final object, typically a visualisation object. R is an object orientated language (https://cran.r-project.org/doc/manuals/r-release/R-lang.html#Introduction).\n\nThis is my 100 days of code challenge project to learn how to create data visualisations in a different way with Data Driven Documents or D3.js ( https://d3js.org/) : \n> D3.js is a JavaScript library for manipulating documents based on data. \n\n> D3 helps you bring data to life using HTML, SVG, and CSS.\n\n> D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.\n\nWith this project I am hoping to extend my coding languages toolkit, create some cool D3 visualisations and get better at HTML and CSS too.\n\nDaily posts are posted on https://twitter.com/kim_fitter\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`**Day 1**\n\nObservable is a web-based reactive notebook environment, and used for D3.js. \n\nI had already created an Observable (https://observablehq.com/) account through my GitHub account in April when looking at a Twitter post's visualisation.\n\nSo the good news is it looks like I am already set up with my coding environment, no installation required.\n\nI have created this notebook with the + New button and used Markdown to start this write up in the notebook cells. \n\nI followed the https://observablehq.com/@observablehq/introduction-to-notebooks tutorial to get to this point. The first takeaway is that:\n\n> Notebooks are comprised of cells. A cell can be pretty much anything. \n\nThe next step is to think about how to approach this challenge and find some D3 tutorials.\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`Click on the solid arrow to view the methods of the d3 object. To use a method we can use dot, for example let's take a look at the version.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"d3.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`**Day 3**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`To get my head around the notebook cells, I decided to try some actual code, even though I don't fully understand the syntax yet. \n\nD3 Code is written as single line expressions or blocks in { } for more complex structures. \n\nLet's first view some expressions in cells, unpinned. Notice how the result is above the code. Well that's different.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"4+2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"d3.max([1,5,20,1000]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`A simple coloured circle within a block based on this example: (https://observablehq.com/@mbostock/fit-text-to-circle)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"{\n const width = 60;\n const height = width;\n const radius = width/2;\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"circle\")\n .attr(\"cx\", width/2 )\n .attr(\"cy\", height/2 )\n .style(\"fill\", \"steelblue\")\n .attr(\"r\", radius);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`**Day 4**\n\nYesterday I tried out a few code snippets so today I read up on the basics of D3. \n\nIn D3 and JavaScript the = is the operator used for object assignment.\n\nThe main D3.js website (https://d3js.org/) says in it's introduction:\n\n> D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document\n\nSo if we look at the example in Day 3, the DOM we use is DOM.SVG from the Observable standard library (https://github.com/observablehq/stdlib) to return an element, a new SVG element with the specified width and height. \n\nWe use d3 (from Day 2) and it's selection method, which creates an array of elements pulled from this document and assign it to a variable svg. We can only create this variable once in Observable as it is dynamic, otherwise we get RuntimeError: svg is defined more than once.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"svg = d3.select(DOM.svg(60, 60))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`Then we define and scope variables and use chaining with . to transform the document's content to add elements ( here a circle) and modify attributes ( such as radius) to return a group or node. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"{\n const width = 60;\n const height = width;\n const radius = width/2;\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"circle\")\n .attr(\"cx\", width/2 )\n .attr(\"cy\", height/2 )\n .style(\"fill\", \"pink\")\n .attr(\"r\", radius);\n \n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md` The change in colour is for Pink Shirt day on Friday 17th May in NZ.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"canvas = ({type:\"rectangle\",x:\"20\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"canvas.y=\"10\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`**Day 6**\n\n*Classes in R and JavaScript*\n\nIn R there are different classes; logical, numeric, integers, character and complex.(https://resbaz.github.io/2014-r-materials/lessons/01-intro_r/data-structures.html)\n\nIn JS creates objects which are not necessarily defined with class names but there are ways to define a class with any given name. A class is a template that can be used to create an object (https://observablehq.com/@midnightpineapple/feb-18-prototypes-classes-in-javascript) or in CSS it refers to attributes.\n\nSo with this new terminology on the differences between data types and classes we can use typeof to check the data type in JS and Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"typeof 123","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"typeof \"ABC\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`**Day 7**\n\nStrings are a useful data type. They can be created with different quotation marks or with template literals which evaluates the code inside the dollar and curly brackets. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`Strings like the other data types have methods which can be used to return another value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"`Today is not ${'Tuesday'.toUpperCase() }.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`Strings can also be joined together with a +.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"`Today is a ${\"rainy\" + \" day\"}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`**Day 8**\n\nThe next coding basics to cover is to create a function using the recently discovered template literal. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`I initially created the function first then printed it, then ran these in sequential cells, but I have changed the order to show how these reactive notebooks work. These notebooks don't run sequentially, they run in topological order (https://observablehq.com/@observablehq/introduction-to-code).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"dayofweek","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"dayofweek(\"Monday\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"function dayofweek(day) {\n return `It is ${day}!`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`Functions are also objects in JavaScript (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)\n>Functions are regular objects with the additional capability of being callable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"typeof(dayofweek)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`**Day 9**\n\nIn R we can use dataframes, lists or tibbles. In JavaScript and D3 arrays can be used to store tabular data. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)\n\n>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.\n\nIn JavaScript there are methods available to perform array manipulation, for example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"counter = [1,2,3,4,5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"counter.reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`There are also additional d3 library methods available for arrays (https://github.com/d3/d3-array)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"d3.merge([ counter, [2, 3] ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"d3.max(counter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`So with some understanding of how data is stored, next I want to look at the Data Driven part of D3 and create some viz.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`**Day 10**\n\nThe Data Join\n\nSo far we have only used one element using D3. Now create a visualisation using data in an array using the Data Join concept (https://bost.ocks.org/mike/join/).\n\n>Instead of telling D3 how to do something, tell D3 what you want. You want the circle elements to correspond to data. You want one circle per datum. Instead of instructing D3 to create circles, then, tell D3 that the selection \"circle\" should correspond to data. This concept is called the data join\n\nWith a data join there are three new selections that represent the three possible states: enter, update, and exit. \n\nFor a simple example using the update state only, first create an array called somedata.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"somedata = [\n {name: \"first\", number: 3},\n {name: \"second\", number: 7},\n {name: \"third\", number: 10}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"\n{const svg = d3.select(DOM.svg(100,100)) \n .style('border', '1px solid black'); \n const circlesSelection = svg.selectAll(\"circle\") \n circlesSelection.append(\"circle\")\n .data(somedata)\n .join(\"circle\")\n .attr(\"cx\", (d) => 10*d.number)\n .attr(\"r\", (d) => d.number)\n .attr(\"cy\", (d) => 10*d.number)\n .attr(\"fill\", \"green\");\n return svg.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md` The resulting three green circles have positioning and radii based on the data with the *selection*.data method to bind the data then *selection*.join (https://github.com/d3/d3-selection/blob/master/README.md#joining-data) method which appends, removes and reorders elements as necessary to match the data that was previously bound by selection.data, returning the merged selection. \n\nThis code also uses arrow functions as a more concise way to write functions (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).\n\nThis data join enter, update and exit state concept will probably take a few more examples on other days to really get to grips with though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"\nmd`**Day 11** \n\nIn the last visualisation with 3 SVG circles, the positioning of the circles were based on coordinates, cx and cy. This refers to the SVG coordinate space, the Grid. (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions). The X and Y both start in the top left hand corner. This coordinate system can also be scaled and moved around.\n\nThis system is different to the x and y axes on a graph typically used in maths or statistics using the Cartesian coordinate system. (https://en.wikipedia.org/wiki/Cartesian_coordinate_system)\n\nLet's visualise the SVG coordinate space, where one user unit equals one screen unit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"{const svg1 = d3.select(DOM.svg(200,100))\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"8px\")\n .attr(\"fill\", \"red\")\n .style(\"text-anchor\", \"start\")\n\t .style('border', '1px solid blue');\n svg1.append(\"text\")\n .attr(\"x\",1)\n .attr(\"y\",7)\n .text('x=0,y=0');\n svg1.append(\"text\")\n .attr(\"x\",1)\n .attr(\"y\",95)\n .text('x=0, y=height');\n svg1.append(\"text\")\n .attr(\"x\",153)\n .attr(\"y\",7)\n .text('x=width, y=0');\n svg1.append(\"text\")\n .attr(\"x\",135)\n .attr(\"y\",95)\n .text('x=width, y=height');\n \n return svg1.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`**Day 12** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"html`

Up until now I have been using Markdown to make these daily notes. We can also use the HTML language with HTML tags instead of Markdown in the notebook cells with hyperlinks.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"\nhtml`\n\n

Use HTML in a notebook cell

<\\p>\n

This is a link to the HTML wikipedia

\n\n\n\n\n

Now add some CSS styling to the HTML

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`**Day 13**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"html`\n\n\n

I have also been using SVG graphic objects written in JavaScript using the D3 library.\nWe can also add SVG elements written in SVG (XML text) within HTML code. Here is another type of SVG element, in this case a line.\n

<\\p>\nThe SVG attributes specify the coordinates and colour, for example the yellow line starts in the tope left and finishes in the bottom right; x1=\"0\" y1=\"0\" x2=\"100\" y2=\"100\" stroke=\"yellow\".

`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`**Day 14**\nMore on SVG elements.\n\nThe SVG language has in built elements. \n\nIn the previous examples I have used the container element **svg**. Another useful SVG container element is the **g** used to group other SVG elements.\n\nWe have also used the basic shapes **circle** and **line** ; and the **text** content element.\n\nThis is useful reference documentation to the SVG elements (https://developer.mozilla.org/en-US/docs/Web/SVG/Element) and attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`We can also use the SVG path element and SVG code to create a shape of the D3 learning curve, initially it is easy to install but the initial learning curve is steep. (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) Although in reality it is probably a wriggly line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`We can also use a D3 shape generator to create this shape (https://github.com/d3/d3-shape). These generators are functions of data, which can be used to set an attribute.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"linefunction= d3.line()\n .x(d => d.x)\n .y(d => d.y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"linedata = [ { \"x\": 0, \"y\": 100},{ \"x\": 30, \"y\": 95}, \n { \"x\":55, \"y\": 65}, { \"x\": 80, \"y\": 40}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"{\n const svg = d3.select(DOM.svg(100,100)) \n .style('border', '1px solid black'); \n svg.append(\"path\")\n .datum(linedata) // attach one path datum to the DOM so no selection is needed\n .attr(\"d\", linefunction)\n .attr(\"stroke\", \"blue\")\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`**Day 15**\n\nThe dynamic secret sauce looks like the generator. So today I investigated generators and how to count to 10.\n\n> Observable uses generators to represent values that change over time. Generators enable interaction, animation, realtime data streaming, and all the other exciting, dynamic capabilities of Observable notebooks.\n(https://observablehq.com/@observablehq/introduction-to-generators)\n\nGenerators ((https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) use yield instead of return (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)\n> The yield keyword is used to pause and resume a generator function. \n\nLet's look at some examples.\n\nRerun the following code to for the cell to count to 10.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"i = {\n let i = 0;\n while (i<10) {\n yield Promises.delay(1000, ++i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`The width value will adjust based on the browers width`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"now","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md`**Day 16** Create a static map using this D3 example https://observablehq.com/@mbostock/map-coloring\n\nWe will again use SVG elements container element, svg, and append a path element to create a basic shape of gridlines. \n\nD3 includes default modules, including d3-geo, Geographic projections, shapes and math. (https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo).\n\nIn day 14 we created a shape generator, but for maps we will use a geographic path generator and set the geographic projection to the spherical Mercator projection.\n> d3.geoPath - create a new geographic path generator.\n\nWe also use a graticule generator to create a MultiLineString object of meridians and parallels.\n> d3.geoGraticule - create a graticule generator.\n\nWe attach this path graticule data to the d attribute of the path element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"projection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"geographicpath = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"map = {\n const width=500;\n const height = 250;\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"d\", geographicpath(graticule));\n\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`Now we get TopoJSON data for the countries from the Natural Earth World Atlas (https://github.com/topojson/world-atlas) and perform a data join to the g SVG element. To retrieve this data we will need to load the topojson-client library using require.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"world = d3.json(await require.resolve(\"world-atlas@1/world/50m.json\")) \n//world = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"staticmap = {\n const width=1000;\n const height = 500;\n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"grey\")\n .attr(\"d\", geographicpath(graticule));\n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(countries)\n .join(\"path\")\n .attr(\"fill\", \"green\")\n .attr(\"d\", geographicpath);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`**Day 17** HTML static map\n\nInstead of SVG elements, we will use an HTML canvas as recommended for interactivity. (https://github.com/d3/d3-geo).\n\nTo recreate the graticules we use the same graticules and projection, however use DOM.context2d for the container involves a slightly different syntax to SVG elements.\n\nThe container in this case is called the context with attributes and methods and the canvas is the DOM node (https://www.html5canvastutorials.com/tutorials/html5-canvas-element/).\n\nTo draw shapes on a canvas First, you create the path (beginPath()). Then you use drawing commands to draw into the path (path methods). Once the path has been created, you can stroke or fill the path to render it. (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":" {\n const width=1000;\n const height = 500;\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n \n context.beginPath(), path(graticule), context.strokeStyle = \"black\", context.stroke();\n \n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"\nmd`This time we will use the land data from the Natural Earth World Atlas world object as a path on the canvas for block colour.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"world.objects.land","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"\n {\n const width=1000;\n const height = 500;\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n \n context.beginPath(), path(graticule), context.strokeStyle = \"black\", context.stroke();\n context.beginPath(), path(land), context.fillStyle = \"green\", context.fill();\n \n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`**Day 18**\n\nViews\n\nNext add user interactivity to the map with a clickable point based on the notebook example. (https://observablehq.com/@observablehq/introduction-to-views)\n\n> In Observable, a *view* is a user interface element that directly controls a value in the notebook. A view consists of two parts:\n\n> - The view, which is typically an interactive DOM element.\\n\n> - The value, which is any JavaScript value.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`**Day 19**\n\nMutable concept\n\nImmutable objects are unchangeable whereas mutable objects are changeable.\n\nWe can also use a mutable value in Observable, which behaves like a variable, where the value is re-evaluated by another cell but without tracking dependencies and it doesn't update more often than needed.(https://observablehq.com/@observablehq/introduction-to-mutable-state)\n\nLet's look at the map example again and create a moving coordinate point, this time driven by mutable values.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"mutable xcoord = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"mutable ycoord = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof mutablepoint = {\n const width=1000;\n const height = 500;\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n let mousedown = false;\n \n\n \n context.beginPath(), path(graticule), context.strokeStyle = \"grey\", context.stroke();\n context.beginPath(), path(land), context.fillStyle = \"grey\", context.fill();\n\n context.lineWidth = 10, context.strokeStyle = \"orange\";\n const image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);\n function render(coordinates) {\n context.canvas.value = coordinates;\n context.clearRect(0, 0, width, height);\n context.putImageData(image, 0, 0);\n context.beginPath(), path({type: \"Point\", coordinates}), context.stroke();\n }\n\n\n render([xcoord, ycoord]);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"coordscounter ={\n var i=0\n while (true) {\n if (i % 2 === 0) mutable xcoord = Math.cos(i)*50;\n if (i % 5 === 0) mutable ycoord = Math.sin(i)*50 ;\n yield Promises.delay(1000, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null