31:[] 2f:{"title":"D3 + Rough + Indie Flower ","cells":[{"id":0,"value":"md`# D3 + Rough + Indie Flower `","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"html`\n\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"mapDrawing = {\n var selector = 'mapCanvas';\n clear(selector);\n var rc = getrc(selector);\n \n\n\n \n d3.json(\"https://gist.githubusercontent.com/rveciana/181f41663ae9cef7c00ad80cd085f413/raw/63a2b578f5d9536ca51c49e71f3d6a429ae93392/us.json\")\n .then(us=>{\n var projection = d3.geoAlbersUsa();\n var mappath = d3.geoPath()\n .projection(projection);\n var colorScale = d3.scaleOrdinal(d3.schemeCategory10);\n var features = topojson.feature(us, us.objects.states).features;\n \n features.forEach(function(d,j){\n var path = rc.path(mappath(d),{\n fill : colorScale(d.id),\n simplification:0.2,\n fillWeight: 1.5\n });\n }); \n });\n // return html(\" \");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"data = [1,5,3,4,5,1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`## text`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"html`\n\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"textDrawing = {\n \n // Set interval is needed, because font is loaded asynchronously\n setInterval(function(){\n var ctx = getContext('canvasText');\n clear('canvasText')\n ctx.font=\"30px 'Indie Flower'\";\n ctx.fillText(\"This is hand drawn like text inside canvas\",10,50);\n },1000)\n \n return html(\" \");\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Bar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"rectDrawing = {\n var rc = getrc('canvas');\n clear('canvas');\n var max = d3.max(data);\n var pix = 20;\n data.forEach((d,i)=>{\n rc.rectangle(\n i*50+10,\n max*pix-d*pix,\n 10,\n d*pix,\n {fill:'green'})\n }) \n return html(\" \");\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`## Bubble`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"bubbleDrawing = {\n var rc = getrc('circleCanvas');\n var max = d3.max(data);\n var pix = 10;\n \n clear('circleCanvas');\n data.forEach((d,i)=>{\n rc.circle(\n i*60+20,\n 40,\n d*pix,\n {\n fill:'green',\n fillWeight: 0.5 // thicker lines for hachure\n })\n }) \n \n return html(\" \");\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Pie`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"pieDrawing = {\n var selector = 'pathCanvas';\n var context = getContext(selector)\n var rc = getrc(selector);\n var max = d3.max(data);\n var pix = 10;\n \n clear(selector);\n\n \n var pie = d3.pie()\n .value(d=>d)\n .sort(null)\n \n var piedData = pie(data);\n \n \n piedData.forEach((d,i)=>{\n \n \n var a = rc.arc(100, 100, 100, 100, d.startAngle - Math.PI/2, d.endAngle - Math.PI/2, true,{\n fill : 'green'\n });\n \n })\n \n return html(\" \");\n \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`## Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"donutDrawing = {\n var selector = 'donutCanvas';\n var context = getContext(selector)\n var rc = getrc(selector);\n var max = d3.max(data);\n var pix = 10;\n \n clear(selector);\n\n \n var pie = d3.pie()\n .value(d=>d)\n .sort(null)\n \n var piedData = pie(data);\n \n \n piedData.forEach((d,i)=>{\n \n \n var a = rc.arc(100, 100, 100, 100, d.startAngle - Math.PI/2, d.endAngle - Math.PI/2, true,{\n fill : 'green'\n });\n \n })\n \n \n rc.circle(\n 100,\n 100,\n 40,\n {\n fill:'white',\n fillWeight: 10 \n })\n \n return html(\" \");\n \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`## Line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"lineDrawing = {\n var selector = 'lineCanvas';\n \n\n var rc = getrc(selector);\n var pix = 50;\n var max = d3.max(data);\n var scale = d3.scaleLinear().domain([0,max]).range([100,10])\n \n clear(selector);\n \n var points = data.map((d,i)=>{\n return [i*pix,scale(d)] \n })\n \n rc.curve(points,{\n stroke:'green',\n strokeWidth:2\n })\n \n return html(\" \");\n \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`## Area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"areaDrawing = {\n var selector = 'areaCanvas';\n \n var rc = getrc(selector);\n var pix = 50;\n var max = d3.max(data);\n var scale = d3.scaleLinear().domain([0,max]).range([100,10])\n \n clear(selector);\n\n var area = d3.area()\n .x((d,i)=> i*pix)\n .y1((d,i)=> scale(d))\n .y0(150)\n .curve(d3.curveCardinal)\n \n rc.path(area(data), {fill:'green'});\n \n return html(\" \");\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Utility functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md`* Rough canvas getter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function getrc(selector){\n var canvas = getCanvas(selector);\n return rough.canvas(canvas);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`* Canvas getter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"function getCanvas(selector){\n return document.getElementById(selector)\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`* Canvas context getter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"function getContext(selector){\n var canvas = getCanvas(selector);\n return canvas.getContext('2d');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`* Canvas clearer function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function clear(selector){\n var canvas = getCanvas(selector);\n var context = getContext(selector)\n context.clearRect(0, 0, canvas.width, canvas.height);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Including libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`* Load rough.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"rough = require('roughjs@3.0.0/dist/rough.js').catch(() => window.rough)","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"md`* Load d3 for utility helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3=require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`* Load topojson for map drawing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"topojson = require(\"topojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`* Load indie flower font`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}