Initial import of page from https://github.com/uwdata/vega/tree/new-g…

…h-pages @kanitw
vega · Apr 4, 2015 · b2c86f6 · b2c86f6
1 parent 86d1c2c
commit b2c86f6
Show file tree

Hide file tree

Showing 22 changed files with 812 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
diff --git a/css/site.css b/css/site.css
@@ -0,0 +1,81 @@
+* {
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  font-size: 17px;
+  line-height: 24px;
+}
+
+strong {
+  font-weight: 400;
+}
+
+body {
+  margin: 0 auto;
+  margin-top: 20px;
+  padding: 15px;
+  max-width: 700px;
+}
+
+a {
+  color: #0aa84a;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #f05a00;
+}
+
+#side {
+  float: left;
+  width: 130px;
+}
+
+#main {
+  margin-left: 160px;
+}
+
+#links {
+  float: right;
+  margin: 11px 12px 0 0;
+  text-align: left;
+  line-height: 26px;
+}
+
+#links strong {
+  font-weight: bold;
+}
+
+#links a {
+  color: #0aa84a;
+}
+
+#links a:hover {
+  color: #f05a00;
+}
+
+.example img {
+  width: 120px;
+  border: 1px solid #ccc;
+}
+
+.example img:hover {
+  border: 1px solid #f05a00;
+}
+
+.content {
+  margin-top: 0.5em;
+}
+
+.credits {
+  margin-top: 1.3em;
+  text-align: left;
+}
+
+.credits a img {
+  border: 1px solid #fff;
+  margin-right: 1em;
+}
+
+.credits a:hover img {
+  border: 1px solid #f05a00;
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/image.png b/image.png
diff --git a/image.svg b/image.svg
diff --git a/images/bar1.png b/images/bar1.png
diff --git a/images/bar2.png b/images/bar2.png
diff --git a/images/example-bar.png b/images/example-bar.png
diff --git a/images/example-choropleth.png b/images/example-choropleth.png
diff --git a/images/example-force.png b/images/example-force.png
diff --git a/images/example-population.png b/images/example-population.png
diff --git a/images/example-wordcloud.png b/images/example-wordcloud.png
diff --git a/images/forkme.png b/images/forkme.png
diff --git a/images/idl-logo.png b/images/idl-logo.png
diff --git a/images/lyra.png b/images/lyra.png
diff --git a/images/polestar.png b/images/polestar.png
diff --git a/images/stanford-logo.png b/images/stanford-logo.png
diff --git a/images/trifacta-logo.png b/images/trifacta-logo.png
diff --git a/images/vega.png b/images/vega.png
diff --git a/images/vg.png b/images/vg.png
diff --git a/images/voyager_main.png b/images/voyager_main.png
diff --git a/index.html b/index.html
@@ -0,0 +1,182 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <title>Vega</title>
+    <link rel="shortcut icon" href="http://trifacta.github.com/vega/favicon.ico"/>
+    <link rel="stylesheet" type="text/css" href="css/main.css"/>
+    <script src="d3.v3.min.js"></script>
+    <script src="vega.min.js"></script>
+  </head>
+    <body>
+     <!--<div class="gutter">
+        <div id="logo"><a href="/"><img src="/static/images/logo/idl-logo.png"></a></div>
+        <div class="nav">
+          <a href="#vega">Vega</a><br/>
+          <a href="#vegalite">Vegalite</a>
+          <br/>
+          <br/>
+          <a href="#lyra">Lyra</a><br/>
+          <a href="#polestar">PoleStar</a><br/>
+          <a href="#voyager">Voyager</a><br/>
+          
+        </div>
+        <div class="orgs">
+          <a href="http://dub.washington.edu/" title="dub: Design, Use, Build - Human-Computer Interaction &amp; Design"><img src="/static/images/logo/dub.png"/></a>
+          <a href="http://escience.washington.edu/" title="eScience Institute"><img src="/static/images/logo/escience.png"/></a>
+          <a href="http://cs.washington.edu/" title="UW Computer Science &amp; Engineering"><img src="/static/images/logo/cse.png"/></a>
+          <a href="http://idl.cs.washington.edu/" title="Interactive Data Lab"><img src="images/idl-logo.png"/></a>
+        </div>
+      </div> -->
+      <div id="main">
+        <div class="header">
+          <div class="mark">
+            <span class="uw">Vega</span>
+
+            <!-- <span class="mark-i">Vega</span> -->
+            <span class="mark-d">Projects</span>
+            <!-- <span class="mark-l">Lab</span> -->
+          </div>
+        </div>
+        <div class="content">
+
+          <div class="mission"> <a href="/about" class="at">  <span class="lead">our goal</span> is to develop a  <strong>declarative visualization grammar</strong> that serves as <strong>a format for creating, saving and sharing visualization designs</strong>. </a></div>
+          <div class="header">
+            <div class="mark">Declarative Toolkits</div>
+          </div>
+
+          <div class="paper project">
+            <div class="thumbnail">
+              <a class="thumbnail-wrapper" href="https://github.com/uwdata/vega/"><div class='thumbnail-img' style="background-image: url(images/vg.png)"></div></a>
+              <div class="desc">
+                <span class="lead">
+                  <a href="">Vega</a>
+                </span> 
+                is a visualization grammar, a declarative format for creating, saving and sharing visualization designs.
+
+                With Vega you can describe data visualizations in a JSON format, and
+                generate interactive views using either HTML5 Canvas or SVG.
+
+                <div class="links">
+                  <a href="editor">Online Editor</a>
+                  |
+                  <a href="https://github.com/uwdata/vega/wiki/Tutorial">Tutorial</a> 
+                  |
+                  <a href="https://github.com/uwdata/vega/wiki">Documentation</a> 
+                  |
+                  <a href="https://groups.google.com/forum/?fromgroups#!forum/vega-js">Discussion</a>
+
+                </div>
+              </div>
+            </div>
+            <div class="thumbnail">
+              <img src="images/vl.png"/>
+              <div class="desc">
+                <span class="lead">
+                  Vegalite
+                </span> 
+                is a high-level grammar for visual analysis, built on top of Vega. 
+                Vegalite provides ease-of-use comparable to tools like ggplot or Tableau, but generates full-featured Vega specifications as output.
+
+                <div class="links">
+                  <a href="http://uwdata.github.io/vegalite">Online Editor</a>
+                </div>
+              </div>
+
+            </div>
+          </div>
+          <div style="clear:both"></div>
+          <div class="header">
+            <div class="mark">User Interface Tools</div>
+          </div>
+          <div class="paper project">
+            <div class="thumbnail">
+              <a class="thumbnail-wrapper" href="http://idl.cs.washington.edu/projects/lyra/"><div class='thumbnail-img' style="background-image: url(images/lyra.png)"></div></a>
+
+              <div class="desc">
+                <span class="lead">
+                  <a href="http://idl.cs.washington.edu/projects/lyra/">Lyra</a>
+                </span> 
+                is an interactive environment that enables custom visualization design without writing any code, 
+                allowing designers to create custom visualizations that are 
+                comparable to hand-coded visualizations built with D3 or Processing.
+
+
+                <div class="links">
+                  <a href="https://github.com/uwdata/lyra/wiki">Wiki</a> 
+                  |
+                  <a href="https://groups.google.com/forum/#!forum/lyra-vde">Discussion</a>
+                  |
+                  <a href="http://idl.cs.washington.edu/projects/lyra/app/">Online Demo</a>
+                </div>
+              </div>
+            </div>
+            <div class="thumbnail">
+              <a href="" class="thumbnail-wrapper"><div class='thumbnail-img' style="background-image: url(images/polestar.png)"></div></a>
+              <div class="desc">
+                <span class="lead">
+                  PoleStar
+                </span> 
+                is a web-based visualization specification tool built on top of Vegalite.
+
+                <div class="links">
+                  <a href="http://uwdata.github.io/polestar">Online Demo</a>
+                </div>
+              </div>
+            </div>
+            <div class="thumbnail">
+              <a href="" class="thumbnail-wrapper"><div class='thumbnail-img' style="background-image: url(images/voyager_main.png)"></div></a>
+              <div class="desc">
+                <span class="lead">
+                  Voyager
+                </span> 
+                is a visualization browser for open-ended data exploration. 
+                <div class="links">
+                  <a href="http://uwdata.github.io/voyager">Online Demo</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+        </div>
+      </div>
+      <script>
+        document.write('<script src="/static/lib/vendor/'+('__proto__' in {}?'zepto':'jquery')+'.min.js"><\/script>');
+      </script>
+      <script src="/static/lib/vendor/underscore.min.js"></script>
+      <script src="/static/lib/vendor/backbone.min.js"></script>
+      <script src="/static/lib/vendor/d3.v3.min.js"></script>
+      <script src="/static/lib/idl.min.js"></script>
+      <script type="text/javascript">idl.init();</script>
+    </body>
+<!-- 
+    <div id="side">
+      <div class="example">
+        <a href="editor/index.html?spec=bar" title="Bar Chart">
+          <img src="images/example-bar.png" />
+        </a>
+      </div>
+      <div class="example">
+        <a href="editor/index.html?spec=force" title="Force-Directed Layout">
+          <img src="images/example-force.png" />
+        </a>
+      </div>
+      <div class="example">
+        <a href="editor/index.html?spec=population" title="Population Pyramid">
+          <img src="images/example-population.png" />
+        </a>
+      </div>
+      <div class="example">
+        <a href="editor/index.html?spec=choropleth" title="Choropleth Map">
+          <img src="images/example-choropleth.png" />
+        </a>
+      </div>
+      <div class="example">
+        <a href="editor/index.html?spec=wordcloud" title="Word Cloud">
+          <img src="images/example-wordcloud.png" />
+        </a>
+      </div>
+    </div> -->
+  </body>
+</html>