2d:null 2e:["$","title",null,{"children":"Exploring SVG Transform | Malik Koné | Observable"}] 33:[] 31:{"id":"16781f7e7016ca7c","slug":"svg-transform","title":"Exploring SVG Transform","thumbnail":"f21479bdccc08a5ffe16641e02b6ed1ae305d2faa69b0bcb4a40498ed7415fef","access_level":"public","create_time":"$D2019-07-05T08:53:45.940Z","update_time":"$D2019-09-13T09:54:42.465Z","view_time":null,"first_public_time":"$D2019-07-05T14:05:39.702Z","has_unpublished_edits":null,"fork":{"id":"2436ffc72b5e66ab","slug":"chart-base-template","title":"Chart base template","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"stars":1,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":360,"publish_version":360,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"33332922de5e29a1","slug":"seeds","title":"Seeds","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Exploring SVG Transform","cells":[{"id":0,"value":"md`# Exploring SVG Transform\n- [see online docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"html`

Transform with the matrix parameters

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html`

Transform shortcuts

${viewof use_matrix}		${viewof shape_type}
${viewof a}	${viewof c}	${viewof e}
${viewof b}	${viewof d}	${viewof f}

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart={ \n const svg = d3.select(DOM.svg(dim.W, dim.H))\n .attr(\"viewBox\", [dim.mid.nW, dim.mid.nH, dim.W, dim.H]); // stuff to center coordinates\n\n var g = svg.append(\"g\")\n .attr('tranform', `translate(${dim.mgs.g}, ${dim.mgs.s})`)\n .attr(\"viewBox\", [dim.mid.ngW, dim.mid.ngH, dim.gW, dim.gH]) // stuff to center coordinates\n .attr(\"fill\", \"pink\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke\", \"black\")\n .append(\"path\")\n .attr(\"d\", shape_generator);\n\n if (use_matrix) {\n g.attr('transform', `matrix(${a} ${b} ${c} ${d} ${e*dim.W} ${f*dim.H})`);\n }else{\n var transform = \"\"\n transform += (scale) ? `scale(${scale})` :'';\n transform += (skewX) ? `skewX(${skewX*dim.W})` : '';\n transform += (skewY) ? `skewY(${skewY*dim.H})` : '';\n /*transform += (translate) ? `translate(${translate.x}, ${translate.y})` : '';\n transform += (rotate) ? `scale(${rotate} ${rotate} ${rotate} ${rotate})` : '';*/\n g.attr('transform', transform);\n }\n return svg.node()\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"shape_generator = (d) => d3.symbol()\n .type(shapes[shape_type])\n .size(.5 * dim.gW * dim.gH)();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"shapes = ({Circle: d3.symbolCircle, \n Cross: d3.symbolCross, \n Diamond: d3.symbolDiamond, \n Square: d3.symbolSquare, \n Star: d3.symbolStar, \n Triangle: d3.symbolTriangle, \n Wye: d3.symbolWye});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dim = {\n let W = width, \n H = 400,\n // margins sup, droite (right), inf, gauche (left)\n mgs = ({s:H/4,d:W/4, i:H/4,g:W/4}); \n \n let gW = W - mgs.g - mgs.d,\n gH = H - mgs.s - mgs.i;\n \n // creating half widht and highs, negative & positive respectively \n let tmpO = {W, H, gW, gH};\n let mid = Object.keys(tmpO).reduce((o, k) => ({...o, [k]: Math.round(tmpO[k]/2), \n [`n${k}`]: -Math.round(tmpO[k]/2)})\n , {})\n \n let radius = d3.min([gW, gH])/ 2;\n \n return {mgs, mid, W, H, gW, gH, radius}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {slider, number, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {bind} from \"@mbostock/inline-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`### Views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof shape_type = select({\n title: \"Shape type\",\n description: \"Select a type\",\n options: Object.keys(shapes),\n value: Object.keys(shapes).slice(-1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof rotate = slider({\n title: \"rotate\",\n min: 0, \n max: 1, \n step: .01,\n value: 0,\n description: 'to do...'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"viewof translate = slider({\n title: \"translate\",\n min: 0, \n max: 1, \n step: .1,\n value: 0,\n description: 'to do...'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof skewY = number({\n title: \"skewY\",\n min: -1, \n max: 1, \n step: .01,\n value: 0,\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof skewX = number({\n title: \"skewX\",\n min: -1, \n max: 1, \n step: .01,\n value: 0,\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"viewof scale = slider({\n title: \"scale\",\n min: 0, \n max: 4, \n step: .1,\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof a = number({\n title: \"a\",\n min: -3, \n max: 3, \n step: .2,\n value: 1,\n description:'default 1',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof b = number({\n title: \"b\",\n min: -3, \n max: 3, \n step: .2, \n value:0,\n description:'default 0',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof c = number({\n title: \"c\",\n min: -3, \n max: 3, \n step: .2, \n value: 0,\n description:'default 0',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof d = number({\n title: \"d\",\n min: -3, \n max: 3, \n step: .2, \n value: 1,\n description:'default 1',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof e = slider({\n title: \"e\",\n min: -.5, \n max: .5, \n step: .1, \n value:0,\n format: \".0%\",\n description: \"width %\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof f = slider({\n title: \"f\",\n min: -.5, \n max: .5, \n step: .1, \n value:0,\n format: \".0%\",\n description: \"height %\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof use_matrix = checkbox({\n options: [{ value: \"toggle\", label: \"Use matrix transformation\" }],\n value: \"toggle\",\n description: \"If checked use matrix transformation, else the transform shortcuts %\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

${viewof rotate}	${viewof translate}
${viewof skewX}	${viewof skewY}	${viewof scale}