This is a simple example of the use d3Kit which shows how to build a responsive chart. It uses the d3kit.Skeleton which provides scaffolding to quickly create such a visualization.
Do
Notice
| <!DOCTYPE html> | |
| <html > | |
| <head> | |
| <title>Dot in a Box</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>The Dot Likes the Center of the Box</h1> | |
| </div> | |
| <div class="chart"></div> | |
| </body> | |
| <script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <script src="https://rawgit.com/twitter/d3kit/v0.1.0/dist/d3kit.min.js" type="text/javascript"></script> | |
| <script src="main.js" type="text/javascript"></script> | |
| </html> |
| var DEFAULT_OPTIONS = { | |
| margin: {top: 0, right: 0, bottom: 0, left: 0} | |
| }; | |
| var chart = new d3Kit.Skeleton('.chart', DEFAULT_OPTIONS) | |
| .autoResize('both') | |
| .autoResizeToAspectRatio(3/2); | |
| var rect = chart.getRootG() | |
| .append('rect') | |
| .style('fill', '#fff'); | |
| var circle = chart.getRootG() | |
| .append('circle') | |
| .attr('fill', 'red'); | |
| chart.on('resize', function() { | |
| var width = chart.getInnerWidth(); | |
| var height = chart.getInnerHeight(); | |
| rect | |
| .transition() | |
| .duration(1000) | |
| .attr('width', width) | |
| .attr('height', height); | |
| circle | |
| .transition() | |
| .duration(1000) | |
| .attr('cx', width / 2) | |
| .attr('cy', height / 2) | |
| .attr('r', 3/5/2 * chart.height()); | |
| }); |
| html { | |
| font-family: 'Gotham'; | |
| color: #444; | |
| margin: 0px; | |
| padding: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body { | |
| background: #ccc; | |
| margin: 0px; | |
| padding: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .header { | |
| height: 150px; | |
| } | |
| h1 { | |
| margin: 0px; | |
| padding-top: 20px; | |
| text-align: center; | |
| } | |
| .chart { | |
| text-align: center; | |
| position: absolute; | |
| top: 150px; | |
| left: 100px; | |
| bottom: 100px; | |
| right: 100px; | |
| } |
