31:[] 2f:{"title":"Trying out rough.js","cells":[{"id":0,"value":"md`# Trying out rough.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"data = [1,5,3,4,5,1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Bar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`

`","pinned":false,"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 \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`## Bubble`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`

`","pinned":false,"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 }","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Pie`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`

`","pinned":false,"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 \n \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`## Donut`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"html`

`","pinned":false,"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 \n \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`## Line`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`

`","pinned":false,"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 \n \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`## Area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"html`

`","pinned":false,"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 \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"mapDrawing = {\n var selector = 'mapCanvas';\n var rc = getrc(selector);\n \n clear(selector);\n\n \n d3.json(\"https://gist.githubusercontent.com/rveciana/181f41663ae9cef7c00ad80cd085f413/raw/63a2b578f5d9536ca51c49e71f3d6a429ae93392/us.json\").then(us => {\n \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 });\n });\n\n\n});\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`## Neccessary helpers`","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":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"function getCanvas(selector){\n return document.getElementById(selector)\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"function getContext(selector){\n var canvas = getCanvas(selector);\n return canvas.getContext('2d');\n}","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":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Including libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"rough = require('roughjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3=require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}