Merge pull request #18 from chrismattmann/quick-ex

Quick Examples HTML shows resolution d1KitTimeline constructor. This closes #17.
kristw · Feb 24, 2018 · 6ba58c1 · 6ba58c1
2 parents f4446e8 + 81c46c2
commit 6ba58c1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 0 deletions.
diff --git a/examples/quick/data.js b/examples/quick/data.js
@@ -0,0 +1,9 @@
+var data = [
+	    {time: new Date(1977, 4,25), episode: 4, name: 'A New Hope'},
+	    {time: new Date(1980, 4,17), episode: 5, name: 'The Empire Strikes Back'},
+	    {time: new Date(1984, 4,25), episode: 6, name: 'Return of the Jedi'},
+	    {time: new Date(1999, 4,19), episode: 1, name: 'The Phantom Menace'},
+	    {time: new Date(2002, 4,16), episode: 2, name: 'Attack of the Clones'},
+	    {time: new Date(2005, 4,19), episode: 3, name: 'Revenge of the Sith'},
+	    {time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
+	    ];
diff --git a/examples/quick/index.html b/examples/quick/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Example - D3Kit-Timeline</title>
+    <style>
+       .axis path{
+         fill: none;
+         stroke-width: 2px;
+         stroke: #222;
+       }
+       .axis line{
+         fill: none;
+         stroke-width: 1px;
+         stroke: #222;
+       }
+       .axis text{
+         font-size: 10px;
+       }
+       path.link{
+         stroke-width: 2px;
+         opacity: 0.6;
+       }
+       text.label-text{
+         font-size: 12px;
+       }
+     </style>
+     <!-- Latest compiled and minified CSS -->
+     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+</head>
+
+<body>
+  <div id="crisprtimeline"></div>
+  <!-- Use d3 v4 -->
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3kit/3.2.0/d3kit.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/labella/1.1.4/labella.min.js"></script>
+  <script src="https://cdn.rawgit.com/kristw/d3kit-timeline/master/dist/d3kit-timeline.min.js"></script>
+  <script src="data.js"></script>
+  <script>
+    console.log('hmm', d3KitTimeline);
+
+    var chart = new d3KitTimeline('#crisprtimeline', {
+      direction: 'right',
+      initialWidth: 600,
+      initialHeight: 600,
+      labelBgColor: "#777",
+      textFn: function(d){ return d.time.getFullYear() + ' - ' + d.title;}
+    });
+    chart.data(data);
+  </script>
+</body>
+
+</html>