| license: mit |
Built with blockbuilder.org
forked from jmuyskens's block: data-storytelling-d3-workshop-1
forked from jmuyskens's block: data-storytelling-d3-workshop-3
forked from jmuyskens's block: data-storytelling-d3-workshop-4
forked from jmuyskens's block: data-storytelling-d3-workshop-4
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| svg { | |
| background: silver; | |
| } | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {'top': 20, 'right': 20, 'bottom': 20, 'left': 20}; | |
| var width = 200 - margin.right - margin.left; | |
| var height = 200 - margin.top - margin.bottom; | |
| function translate(x, y) { | |
| return 'translate(' + x + ',' + y + ')'; | |
| } | |
| var svg = d3.select('body').append('svg') | |
| .attr('width', width + margin.right + margin.left) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', translate(margin.left, margin.top)); | |
| svg.append('rect') | |
| .attr('width', 60) | |
| .attr('height', 30) | |
| .attr('x', 20) | |
| .attr('y', 10) | |
| .attr('fill', 'white') | |
| .attr('stroke', 'black') | |
| svg.append('circle') | |
| .attr('r', 20) | |
| .attr('cx', 50) | |
| .attr('cy', 70) | |
| .attr('fill', 'white') | |
| .attr('stroke', 'black') | |
| var g = svg.append('g') | |
| .attr('transform', 'translate(10, 10)rotate(10)') | |
| g.append('text') | |
| .attr('dx', 50) | |
| .attr('dy', 50) | |
| .attr('text-anchor', 'middle') | |
| .text('Hello, world') | |
| g.append('path') | |
| .attr('d', 'M 0 0 L 100 100 Z') | |
| .attr('stroke', 'black') | |
| </script> | |
| </body> |