Dot in a Box

This is a simple example of the use of d3Kit which shows how to build a responsive chart. It uses the d3Kit.factory to create a d3Kit.Skeleton which provides scaffolding to quickly create a visualization.

Resize the window and watch the dot chase the center of the box.

Notice

How easy it is to define the aspect ratio of the box and size of the dot - in this case to form the flag of Japan.

xxxxxxxxxx
 
<!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 id="chart"></div>
  </body>
​
  <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/gh/twitter/d3kit/v2.0.0/dist/d3kit.js" type="text/javascript"></script>
  <script src="main.js" type="text/javascript"></script>
</html>
​
    

Updated missing url https://rawgit.com/twitter/d3kit/v2.0.0/dist/d3kit.js to https://cdn.jsdelivr.net/gh/twitter/d3kit/v2.0.0/dist/d3kit.js

https://d3js.org/d3.v4.min.js

https://rawgit.com/twitter/d3kit/v2.0.0/dist/d3kit.js