block by renecnielsen 780422656e2537154105

Dot in a Box

Full Screen

This is 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

forked from treboresque‘s block: Dot in a Box

index.html

<!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="//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>

main.js

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());
});

style.css

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;
}