| license: mit |
Built with blockbuilder.org
forked from Vintharas's block: Simple example moving divs
forked from Vintharas's block: Simple example circle
forked from Vintharas's block: Simple example rect data bind
forked from Vintharas's block: Simple example scales
forked from Vintharas's block: Simple example axes
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| <svg width=900 height=500></svg> | |
| </head> | |
| <body> | |
| <script> | |
| // create a bar chart to get an understanding of how many cinnamon buns | |
| // you eat throuhgout a week | |
| // => SVG in MDN: https://developer.mozilla.org/en-US/docs/Web/SVG | |
| // => D3 API: https://github.com/d3/d3/blob/master/API.md | |
| // cinnamon buns | |
| const kanelbullarThisWeek = [ | |
| {day: 'Monday', buns: 10}, | |
| {day: 'Tuesday', buns: 20}, | |
| {day: 'Wednesday', buns: 10}, | |
| {day: 'Thursday', buns: 61}, | |
| {day: 'Friday', buns: 1}, | |
| {day: 'Saturday', buns: 12}, | |
| {day: 'Sunday', buns: 2}]; | |
| const svg = d3.select("svg"); | |
| svg | |
| .selectAll("rect") | |
| .data(kanelbullarThisWeek) | |
| .enter() | |
| .append('rect') | |
| </script> | |
| </body> |