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
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
<!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> | |
<svg width=100 height=100> | |
<rect width=60 height=30 x=20 y=10 fill=white stroke=black></rect> | |
<circle r=20 cx=50 cy=70 fill=white stroke=black></circle> | |
<g transform="translate(10, 10)rotate(10)"> | |
<text dx=50 dy=50 text-anchor=middle>Hello, world</text> | |
<path d="M 0 0 L 100 100 Z" stroke=black></path> | |
</g> | |
</svg> | |
<script> | |
var svg = d3.select('body').append('svg') | |
.attr('width', 100) | |
.attr('height', 100); | |
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> |