d) // method chain 1 .join( enter => enter.append("text") // method chain 2 START .attr("fill", "green") // method chain 2 .attr("x", (d, i) => i * 16) // method chain 2 .attr("y", -30) // method chain 2 .text(d => d) // method chain 2 .call( // .call branches method chain 2 enter => enter.transition(t) // method chain 3 START .attr("y", 0) // method chain 3 END ) // method chain 2 END , update => update // method chain 4 START .attr("fill", "black") // method chain 4 .attr("y", 0) // method chain 4 .call( // .call branches method chain 4 update => update.transition(t) // method chain 5 START .attr("x", (d, i) => i * 16) // method chain 5 END ) // method chain 4 END , exit => exit // method chain 6 START .attr("fill", "brown") // method chain 6 .call( // .call branches method chain 6 exit => exit.transition(t) // method chain 7 START .attr("y", 30) // method chain 7 .remove() // method chain 7 END ) // method chain 6 END ) // method chain 8 START (& 1 END) .attr("foo","bar") // method chain 8 .call( // .call branches method chain 8 merge => merge.transition(t) // method chain 9 START .attr("foo", "baz") // method chain 9 END ) // method chain 8 END yield svg.node(); await Promises.tick(2500); } }The method chains:selectAll("text")enter selectionenter.transitionupdate selectionupdate.transitionexit selectionexit.transitionmerged selection (merged enter + update selections)merged.transitionMaybe we can picture it like this: selectAll("text").data().join() .------------------------´ |`- enter selection | `- enter.transition ---. |`- update selection | | `- update.transition --+ `- exit selection | `- exit.transition | .--------------------------´ `- merged selection `- merged.transition Learning Javascript - by having FunAlong the way I came across some fun places to learn JavaScript.JSFiddle For fiddling around with JavaScript online CodePen An elegant environment for coding, for example, this awesome CSS Sunrise Animation Pen by The Brutal Tooth WarriorJS A game to develop your JavaScript 'sword' by programming your warrior-bot to fight against foe ... and stuff.CodeWars is a ninja-like place to pit your coding skills against others CodeWars offers small focussed tasks, which really help you to hone your skills by forcing you to APPLY any half-baked knowledge you have. I can really recommend it.2020-02-25 RW: Note: CodeWars ranks place 7 in The 10 most popular coding challenge websites for 2020 AND in The Top 20 Websites to Learn Coding for FreeReact, JSX, REDUX & Co. (Svelte) React is currently the leading JavaScript FrameworkJSX is a markup syntax - a mix of HTML+Javascript - which makes it possible to calculate attributes + code on the fly.It uses custom tags backed by JavaScript functions, anduses curly braces (in place of quotes) to allow dynamic calculation foo-bar Checkout the JSX-intro. In larger React projects, you might want to use Redux to (centrally) manage application state. (React Redux is the official React bindings for Redux) If you need a small version of React, try Preact.Virtual DOM vs SvelteReact uses a virtual DOM to decide what to change in the real DOM. While making it possible to update just the necessary DOM elements, the virtual DOM method represents a heavy CPU-load on the device. https://twitter.com/0xca0a/status/1199997552466288641 and there are moves to counter this new programming language Svelte 👀 New webp image formatThere is a new image format for the web: webplossless / lossy = 26% smaller / 25-34% smallerUses 'predictive coding' = predicts difference to neighbors. TrendsWhere to find out what is trending / changing in our world?https://octoverse.github.com/https://googletrends.github.io/data/to be continued…2020-02-09 Back to the future with vizhub 🚯 Due to some bug in the works somewhere, I've just had to retype most of this page, as the first version got sucked up by a black hole in the ether. That reminds me of my first experiences of programming back in the early 80s on a ZX Spectrum and Atari 400 ... ♻️ 2020-02-13 Time to start going through the Svelte tutorial You could only save to cassette back then and the only validation method to check if it had saved correctly was just to reload it, and if didn't load, that confirmed it hadn't saved properly ... and you just stayed up half the night and programmed it again (and crossed your fingers a litle harder)Defining local CSS (or how to pimp your blog)2020-02-13 After a long conversation with Curran about the development of vizhub, one of the topics that was raised, was how to make CSS which is local to this readme - so I went searching…Apparently, for a while (in the history of HTML) it was possible to scope styles to the current containing element using #blog .bgblk {background-color:black;} #blog .bgwht {background-color:white;} #blog .fl {float:left;margin-right:10px;margin-bottom:0px;} #blog .fr {float:right;margin-left:10px;margin-bottom:5px;} #blog .m0 {margin:0px;} #blog .p6 {padding:6px;} PUT YOUR BLOG TEXT HERE Need to check my CSS against this cool list of methods to organize your css…and if you look at the README file, you will see that this is exactly how I have implemented styles in this blog.SVG Paths I've got a (kind-of) broken SVG:Well, at least, …it works in my browser,it works in my svg viewer "Gaplin",it breaks in my svg editor "Sketch", it breaks when I import it into FileMaker as an svg-button icon!=> Time to learn about SVG Paths... and before I summarize it myself check out this ideal gist I've just used the CSS scale() transform function to reduce the size of the embedded page.(but the SPACE it occupies is NOT scaling = problem for later) # Cheatsheet for SVG Path Data Straight line commands+------------+-------------------+--------+ | *M* or *m* | moveto | (x y)+ | +------------+-------------------+--------+ | *Z* or *z* | close path | (none) | +------------+-------------------+--------+ | *L* or *l* | lineto | (x y)+ | +------------+-------------------+--------+ | *H* or *h* | horizontal lineto | (x)+ | +------------+-------------------+--------+ | *V* or *v* | vertical lineto | (y)+ | +------------+-------------------+--------+Curve commands+------------+----------------------------+--------------------+ | *C* or *c* | Bézier curveto | (x1 y1 x2 y2 x y)+ | +------------+----------------------------+--------------------+ | *S* or *s* | Shorthand Bézier curveto | (x2 y2 x y)+ | +------------+----------------------------+--------------------+ | *Q* or *q* | Quadratic bézier curveto | (x1 y1 x y)+ | +------------+----------------------------+--------------------+ | *T* or *t* | Shorthand/Smooth Quadratic | | | | bézier curveto | (x y)+ | +------------+----------------------------+--------------------+ | *A* or *a* | Elliptical arc | (rx ry | | | | x-axis-rotation | | | | large-arc-flag | | | | sweep-flag x y)+ | +------------+----------------------------+--------------------+NotesUppercase commands uses absolute positions, lowercase commands uses relative positions.For further descriptions check: http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommandExamplesSimple Triangle See http://codepen.io/spoike/pen/ogMGoJCloud See http://codepen.io/spoike/pen/NPBbpN...and now I need to understand the error...which I think is something to do with the last path in the SVG... maybe it's turning (clockwise/anti-clockwise)? Help! 🧐 Interesting stuff to check out later IconsIconify Universal/Unified icons framework & codeIconify Material Design IconsMore CSS StuffCSS Selector-Fun First learn The 30 CSS Selectors You Must Memorizeand then test yourself :DCSS VariablesAt last, we can make our CSS modular using CSS var(--s) !See Using CSS custom properties (variables) for detais. How?You can define a custom property using a double-dash like this:#blog { --corners: 4px; }[or - if you want it defined globally - use the :root pseudo-class (and a longer name!)]and then reference it like thisvar(--variable-name, default-value);For example:#blog .aside { border:1px solid green; border-radius:var(--corners,6px); background-color:#ffeebb; padding:0px 10px; color:#333; } #blog .embed { border:1px solid grey; border-radius:var(--corners,6px); background-color:#eee; padding:10px; } #blog .sheet { box-shadow: 5px 10px rgba(0,0,0,0.1); border-radius:var(--corners,6px); background-color:white; } 'Standard' structures in d3?Q. asked by Mark Hughes on the D3 help slack channel & Curran replied: Struture represented as A record An Object, where each property corresponds to a column A table An Array of Object records …with metadata The Array returned by d3.csvParse includes a property array.columns which returns an Array of column-names. A network See d3-force A tree See d3-hierarchy There are also ways to get "from here to there" (e.g. from database to JS), such as https://github.com/d3/d3-dsv and https://github.com/d3/d3-hierarchy#stratify VSCodium A less sinister version of VSCode! Free/Libre Open Source Software Binaries of VSCode Removes telemetry but needs somw workarounds to get all features working Advanced Animation: JS, CSS, CPU or GPU?2020-02-17 GPU Animation: Doing it right - a very interesting article about (pros and cons of) getting the GPU (Graphics Processor Unit) to do the animation rather than the CPU.For example, here the upper square is animated via CSS by the GPU, the lower square by JS + the CPU.Whilst a couple of heavy JS-functions steal the CPU time from the lower square, the GPU-animation is smooth. A RegEx Logo /^$/  g    \1 RegEx More RegEx StuffHere's a good Regex Cheat-Sheet which explains RegEx with code examples.regex101.com is great for analysing regexes, BUT… regexr.com seems to be a great place to test using regex replace More CSS StuffNeed to consider the BEM CSS model. The HTML & CSS Is Hard website appears to have great tutorials about:CSS positioningBox ModelFloat Model 👇 LEARN 👇 Flexbox Model ☝ THIS ☝"Float-based layouts have mostly been replaced with Flexbox in modern websites." Advanced Positioning Responsive Designand loads of other stuffooh! …also including Web Typography 🚂 SVG Animation using SMIL, Tom Steeples just turfed up a great thing ... animation in SVG using the tag. See his animated smiley.Check out the animate elementIt seems to be based on SMILCheck out this really cool Toy train SMIL Animation:::/Blog 🎉" /> d) // method chain 1 .join( enter => enter.append("text") // method chain 2 START .attr("fill", "green") // method chain 2 .attr("x", (d, i) => i * 16) // method chain 2 .attr("y", -30) // method chain 2 .text(d => d) // method chain 2 .call( // .call branches method chain 2 enter => enter.transition(t) // method chain 3 START .attr("y", 0) // method chain 3 END ) // method chain 2 END , update => update // method chain 4 START .attr("fill", "black") // method chain 4 .attr("y", 0) // method chain 4 .call( // .call branches method chain 4 update => update.transition(t) // method chain 5 START .attr("x", (d, i) => i * 16) // method chain 5 END ) // method chain 4 END , exit => exit // method chain 6 START .attr("fill", "brown") // method chain 6 .call( // .call branches method chain 6 exit => exit.transition(t) // method chain 7 START .attr("y", 30) // method chain 7 .remove() // method chain 7 END ) // method chain 6 END ) // method chain 8 START (& 1 END) .attr("foo","bar") // method chain 8 .call( // .call branches method chain 8 merge => merge.transition(t) // method chain 9 START .attr("foo", "baz") // method chain 9 END ) // method chain 8 END yield svg.node(); await Promises.tick(2500); } }The method chains:selectAll("text")enter selectionenter.transitionupdate selectionupdate.transitionexit selectionexit.transitionmerged selection (merged enter + update selections)merged.transitionMaybe we can picture it like this: selectAll("text").data().join() .------------------------´ |`- enter selection | `- enter.transition ---. |`- update selection | | `- update.transition --+ `- exit selection | `- exit.transition | .--------------------------´ `- merged selection `- merged.transition Learning Javascript - by having FunAlong the way I came across some fun places to learn JavaScript.JSFiddle For fiddling around with JavaScript online CodePen An elegant environment for coding, for example, this awesome CSS Sunrise Animation Pen by The Brutal Tooth WarriorJS A game to develop your JavaScript 'sword' by programming your warrior-bot to fight against foe ... and stuff.CodeWars is a ninja-like place to pit your coding skills against others CodeWars offers small focussed tasks, which really help you to hone your skills by forcing you to APPLY any half-baked knowledge you have. I can really recommend it.2020-02-25 RW: Note: CodeWars ranks place 7 in The 10 most popular coding challenge websites for 2020 AND in The Top 20 Websites to Learn Coding for FreeReact, JSX, REDUX & Co. (Svelte) React is currently the leading JavaScript FrameworkJSX is a markup syntax - a mix of HTML+Javascript - which makes it possible to calculate attributes + code on the fly.It uses custom tags backed by JavaScript functions, anduses curly braces (in place of quotes) to allow dynamic calculation foo-bar Checkout the JSX-intro. In larger React projects, you might want to use Redux to (centrally) manage application state. (React Redux is the official React bindings for Redux) If you need a small version of React, try Preact.Virtual DOM vs SvelteReact uses a virtual DOM to decide what to change in the real DOM. While making it possible to update just the necessary DOM elements, the virtual DOM method represents a heavy CPU-load on the device. https://twitter.com/0xca0a/status/1199997552466288641 and there are moves to counter this new programming language Svelte 👀 New webp image formatThere is a new image format for the web: webplossless / lossy = 26% smaller / 25-34% smallerUses 'predictive coding' = predicts difference to neighbors. TrendsWhere to find out what is trending / changing in our world?https://octoverse.github.com/https://googletrends.github.io/data/to be continued…2020-02-09 Back to the future with vizhub 🚯 Due to some bug in the works somewhere, I've just had to retype most of this page, as the first version got sucked up by a black hole in the ether. That reminds me of my first experiences of programming back in the early 80s on a ZX Spectrum and Atari 400 ... ♻️ 2020-02-13 Time to start going through the Svelte tutorial You could only save to cassette back then and the only validation method to check if it had saved correctly was just to reload it, and if didn't load, that confirmed it hadn't saved properly ... and you just stayed up half the night and programmed it again (and crossed your fingers a litle harder)Defining local CSS (or how to pimp your blog)2020-02-13 After a long conversation with Curran about the development of vizhub, one of the topics that was raised, was how to make CSS which is local to this readme - so I went searching…Apparently, for a while (in the history of HTML) it was possible to scope styles to the current containing element using #blog .bgblk {background-color:black;} #blog .bgwht {background-color:white;} #blog .fl {float:left;margin-right:10px;margin-bottom:0px;} #blog .fr {float:right;margin-left:10px;margin-bottom:5px;} #blog .m0 {margin:0px;} #blog .p6 {padding:6px;} PUT YOUR BLOG TEXT HERE Need to check my CSS against this cool list of methods to organize your css…and if you look at the README file, you will see that this is exactly how I have implemented styles in this blog.SVG Paths I've got a (kind-of) broken SVG:Well, at least, …it works in my browser,it works in my svg viewer "Gaplin",it breaks in my svg editor "Sketch", it breaks when I import it into FileMaker as an svg-button icon!=> Time to learn about SVG Paths... and before I summarize it myself check out this ideal gist I've just used the CSS scale() transform function to reduce the size of the embedded page.(but the SPACE it occupies is NOT scaling = problem for later) # Cheatsheet for SVG Path Data Straight line commands+------------+-------------------+--------+ | *M* or *m* | moveto | (x y)+ | +------------+-------------------+--------+ | *Z* or *z* | close path | (none) | +------------+-------------------+--------+ | *L* or *l* | lineto | (x y)+ | +------------+-------------------+--------+ | *H* or *h* | horizontal lineto | (x)+ | +------------+-------------------+--------+ | *V* or *v* | vertical lineto | (y)+ | +------------+-------------------+--------+Curve commands+------------+----------------------------+--------------------+ | *C* or *c* | Bézier curveto | (x1 y1 x2 y2 x y)+ | +------------+----------------------------+--------------------+ | *S* or *s* | Shorthand Bézier curveto | (x2 y2 x y)+ | +------------+----------------------------+--------------------+ | *Q* or *q* | Quadratic bézier curveto | (x1 y1 x y)+ | +------------+----------------------------+--------------------+ | *T* or *t* | Shorthand/Smooth Quadratic | | | | bézier curveto | (x y)+ | +------------+----------------------------+--------------------+ | *A* or *a* | Elliptical arc | (rx ry | | | | x-axis-rotation | | | | large-arc-flag | | | | sweep-flag x y)+ | +------------+----------------------------+--------------------+NotesUppercase commands uses absolute positions, lowercase commands uses relative positions.For further descriptions check: http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommandExamplesSimple Triangle See http://codepen.io/spoike/pen/ogMGoJCloud See http://codepen.io/spoike/pen/NPBbpN...and now I need to understand the error...which I think is something to do with the last path in the SVG... maybe it's turning (clockwise/anti-clockwise)? Help! 🧐 Interesting stuff to check out later IconsIconify Universal/Unified icons framework & codeIconify Material Design IconsMore CSS StuffCSS Selector-Fun First learn The 30 CSS Selectors You Must Memorizeand then test yourself :DCSS VariablesAt last, we can make our CSS modular using CSS var(--s) !See Using CSS custom properties (variables) for detais. How?You can define a custom property using a double-dash like this:#blog { --corners: 4px; }[or - if you want it defined globally - use the :root pseudo-class (and a longer name!)]and then reference it like thisvar(--variable-name, default-value);For example:#blog .aside { border:1px solid green; border-radius:var(--corners,6px); background-color:#ffeebb; padding:0px 10px; color:#333; } #blog .embed { border:1px solid grey; border-radius:var(--corners,6px); background-color:#eee; padding:10px; } #blog .sheet { box-shadow: 5px 10px rgba(0,0,0,0.1); border-radius:var(--corners,6px); background-color:white; } 'Standard' structures in d3?Q. asked by Mark Hughes on the D3 help slack channel & Curran replied: Struture represented as A record An Object, where each property corresponds to a column A table An Array of Object records …with metadata The Array returned by d3.csvParse includes a property array.columns which returns an Array of column-names. A network See d3-force A tree See d3-hierarchy There are also ways to get "from here to there" (e.g. from database to JS), such as https://github.com/d3/d3-dsv and https://github.com/d3/d3-hierarchy#stratify VSCodium A less sinister version of VSCode! Free/Libre Open Source Software Binaries of VSCode Removes telemetry but needs somw workarounds to get all features working Advanced Animation: JS, CSS, CPU or GPU?2020-02-17 GPU Animation: Doing it right - a very interesting article about (pros and cons of) getting the GPU (Graphics Processor Unit) to do the animation rather than the CPU.For example, here the upper square is animated via CSS by the GPU, the lower square by JS + the CPU.Whilst a couple of heavy JS-functions steal the CPU time from the lower square, the GPU-animation is smooth. A RegEx Logo /^$/  g    \1 RegEx More RegEx StuffHere's a good Regex Cheat-Sheet which explains RegEx with code examples.regex101.com is great for analysing regexes, BUT… regexr.com seems to be a great place to test using regex replace More CSS StuffNeed to consider the BEM CSS model. The HTML & CSS Is Hard website appears to have great tutorials about:CSS positioningBox ModelFloat Model 👇 LEARN 👇 Flexbox Model ☝ THIS ☝"Float-based layouts have mostly been replaced with Flexbox in modern websites." Advanced Positioning Responsive Designand loads of other stuffooh! …also including Web Typography 🚂 SVG Animation using SMIL, Tom Steeples just turfed up a great thing ... animation in SVG using the tag. See his animated smiley.Check out the animate elementIt seems to be based on SMILCheck out this really cool Toy train SMIL Animation:::/Blog 🎉" />