2d:null 2e:["$","title",null,{"children":"(Re)Discovering D3js via FrontEnd Masters workshop | Fabien Benetou | Observable"}] 33:[] 31:{"id":"9f17cf7fdff2ab27","slug":"re-discovering-d3js-via-frontend-masters-workshop","title":"(Re)Discovering D3js via FrontEnd Masters workshop","thumbnail":"62511994380eba7691efc5f053b1fb011cfa4983c6817e2ff0f3c12bd9da8cac","access_level":"public","create_time":"$D2018-04-27T08:39:16.461Z","update_time":"$D2018-09-13T15:05:31.706Z","view_time":null,"first_public_time":"$D2018-04-27T09:34:43.963Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"571c54f23a22112c","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":"starter_2024","bio":"Curious Frenchman who loves to make proof of concepts to learn and explore."},"version":369,"publish_version":369,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"bio":"Curious Frenchman who loves to make proof of concepts to learn and explore."}],"members":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"(Re)Discovering D3js via FrontEnd Masters workshop","cells":[{"id":0,"value":"md`# (Re)Discovering D3js via FrontEnd Masters workshop\n\nFollowing https://frontendmasters.com/courses/d3-v4/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## API reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`### Selection and data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"svg = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n var rectWidth = 50;\n var height = 100;\n var data = [100, 50, 10, 70, 100];\n d3.selectAll('rect')\n .data(data)\n .attr('x', (d,i) => i * rectWidth)\n .attr('y', d => height - d)\n .attr('width', rectWidth)\n .attr('height', d => d)\n .attr('fill', 'blue')\n .attr('stroke', '#fff')\n return d3.selectAll('rect')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`### Enter and append`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"svg_enter_append = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"update_svg_enter_append = {\n var rectWidth = 10;\n var height = 100;\n var data = [10, 50, 10, 70, 100, 100, 50, 10, 70, 100];\n var svg = d3.select('#svg_enter_append');\n var enter = svg.selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', (d,i) => i * rectWidth)\n .attr('y', d => height - d)\n .attr('width', rectWidth)\n .attr('height', d => d)\n .attr('fill', d => {\n if (d>50) return 'green'\n return 'blue'\n })\n .attr('stroke', '#fff')\n return md`d3 code to enter then append new rectangles`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`Getting data back via selected d3 elements: ${d3.select('#svg_enter_append').selectAll('rect').data().join(\" \")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`### Scales and Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"scales = {\n var x = d3.scaleLinear()\n .domain([0, 100])\n .range([0, 1000]);\n\n return md`entering a domain of [10, 130] with a target range of [0, 1000], getting from x(20) = ${x(20)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"chart = {\n const svg = d3.select(DOM.svg(300, 300)); \n var rectWidth = 30;\n var height = 300;\n var data = [10, 50, 10, 70, 100, 100, 50, 10, 70, 100]; \n \n var xScale = d3.scaleLinear()\n .domain([0, 100])\n .range([0, 300]);\n \n var newdata = data.map( d => xScale(d) )\n // probably a more D3 way to do that...\n \n var enter = svg.selectAll('rect')\n .data( newdata )\n .enter()\n .append('rect')\n .attr('x', (d,i) => i * rectWidth)\n .attr('y', d => height - d)\n .attr('width', rectWidth)\n .attr('height', d => d)\n .attr('fill', d => {\n if (d>50) return 'green'\n return 'blue'\n })\n .attr('stroke', '#fff')\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`### Challenge 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`[Own attempt](http://blockbuilder.org/Utopiah/82fc20056f7f0820eb14bde95f56eaaa) with official [correction](http://blockbuilder.org/sxywu/1d5123e1d5cdaced0d8dc37f70428132).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`### Shapes introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`Relying on [SVG Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) and [SVG Transforms](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform), required to know some kind of tracing vocabulary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`### d3-shape module`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`Avoiding to have the learn the specific paths/transforms vocabulary of the path *d* attribute cf [d3-shape](https://github.com/d3/d3-shape).\n\nCould actually be useful for A-Frame too since there is\n- [aframe-svgfile-component](https://github.com/7dir/aframe-svgfile-component)\n- [aframe-curve-component](https://github.com/protyze/aframe-curve-component)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"line = {\n const svg = d3.select(DOM.svg(100, 100));\n var data = [\n {i:1, d:10},\n {i:20, d:20},\n {i:30, d:50},\n {i:40, d:30},\n {i:50, d:80},\n {i:60, d:90},\n {i:70, d:100},\n ]; \n \n var line = d3.line()\n .x( d => d.i )\n .y( d => d.d )\n //.curve(d3.curveStep)\n .curve(d3.curveCatmullRom)\n // cf https://github.com/d3/d3-shape/blob/master/README.md#curveCatmullRom\n \n svg.append('path')\n .attr( 'd', line(data) )\n \t.attr('fill','none')\n \t.attr('stroke','blue')\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"pie = {\n var pie = d3.pie();\n var data = [1,2,3,15,10,1,2];\n return pie(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`Going from ${(pie[0].startAngle * 180/3.14).toFixed(2)} to ${(pie[0].endAngle * 180/3.14).toFixed(2)} using e.g. *rotation* attribute or *phi-start* of a-sphere.\n\nUsually used with d3.arc().\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`### Challenge 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"md`[Own attempt](http://blockbuilder.org/Utopiah/5ec0c538c26a2e635d7ec5a3da8afe47).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`Visit https://frontendmasters.com/courses/d3-v4/shapes-introduction to go on...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`# Expected Q&A\n- What is the coordinate system? (e.g. vs SVG, canvas, Blender, etc)\n - xyz where left is -x, up is +y and forward is -z

\n- What about https://github.com/Niekes/d3-3d ?\n - ... dunno`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`# Requirements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 32:"$31:body"