D3-powered Stately map

.gitattributes

@@ -0,0 +1,22 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs     diff=csharp
+*.sln    merge=union
+*.csproj merge=union
+*.vbproj merge=union
+*.fsproj merge=union
+*.dbproj merge=union
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain

.gitignore

@@ -1,2 +1,7 @@
 .DS_Store
-.sass-cache
+.sass-cache
+
+# Project Files
+mixture.json
+*.komodoproject
+tmp/

README.md

@@ -2,13 +2,15 @@
 Stately is a symbol font that makes is easy to create a map of the United States using only HTML and CSS. Each state can be styled independently with CSS for making simple visualizations. And since it's a font, it scales bigger and smaller while staying sharp as a tack.
 
 ##Files
-    map.svg      - SVG map used to create the font
-    assets\font  - Folder containing the web-font files
-    assets\sass  - Folder containing basic Sass files, including both Stately setup and stately.html demo customizations
-    assets\css   - Folder containing compiled CSS files
-    stately.html - Basic Demo
-    stately.svg  - SVG font file
-    stately.ttf  - TrueType font file
+    map.svg         - SVG map used to create the font
+    assets\font     - Folder containing the web-font files
+    assets\sass     - Folder containing basic Sass files, including both Stately setup and stately.html demo customizations
+    assets\css      - Folder containing compiled CSS files
+    assets\js       - Folder containing JS file with a drawMap() class to integrate with D3.js to dynamically create a State.ly map. Includes a minified version.
+    stately.html    - Basic Demo
+    stately-d3.html - D3 version Demo
+    stately.svg     - SVG font file
+    stately.ttf     - TrueType font file
 
 
 ##What is Stately?
@@ -103,10 +105,50 @@ Style Individual State:
 ```
 
 If you are not using Sass for your project, you can use and edit the compiled CSS files. The included files have been compiled using the `expanded` output style for readability.
-
+
+##D3 Version Use Case
+Following added by @CheriHung
+
 ##Live Example
 
-[Stately Microsite](http://intridea.github.com/stately/)
+[Stately + D3 Examples](http://d.cyhung.net/sandbox/stately/stately-d3.html)
+
+##Basic Usage
+
+1. You will need a csv as the data source. Can be an actual .csv file or, as in the case of this demo, use a Google doc published CSV url.
+See the <a href="https://docs.google.com/spreadsheet/ccc?key=0AjmYvlppihFRdGJjelBDeDAzbGlUWld3YXdoSEN1dFE&usp=sharing">sample Google doc</a>.
+
+2. Include these three files in HEAD
+
+```html
+<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<link rel="stylesheet" href="assets/css/stately.css?v=1.1">
+<script src="assets/js/main.min.js?v=1.0" charset="utf-8"></script>
+```
+
+3. In BODY, create a holder UL element for the dynamic map. Give it an unique ID. e.g. ```html <ul class="stately" id="mymap"></ul>```
+
+4. Create a new drawMap() instance to generate the map. See stately-d3.html demo file for a code sample.  Here's a brief explanation to the code sample:
+
+```html
+	window.onload = function () {
+                //create the new instance
+                var map = new drawMap();
+
+                //initiate the draw function. It takes 3 required parameter: draw([id], [data source], [data point])
+                map.draw("mymap", "https://docs.google.com/spreadsheet/pub?key=0AjmYvlppihFRdGJjelBDeDAzbGlUWld3YXdoSEN1dFE&output=csv", "selected");
+	}
+```
+
+- *id*: the holder element id to display the map
+- *data source*: url to csv file or google doc's csv link
+- *data point*: name of the column header in the data source to be used for mapping.  This is helpful when you have one data file that holds multiple data points for every state. And you want to map one data point per map instance. Saves time for creating multiple data files.
+
+The stately-d3.html demo file shows how to add multiple maps to a page.  It also shows the purpose of having a "data point" parameter. Map 1 and 2 use the same data point, "selected" which is a column with boolean (true/false) values. Map 3 uses a different data point, "type" which contains values "rep," "dem," and "na" which are useful to describe US political map.
+
+##About Color Coding in this D3-powered Version
+
+Color of each state is set by assigning a css class to it.  The class is the value in the data point column with all white spaces removed and text lowercased. e.g. Map 1 and 2 assigns either .true or .false to each state. Map 3 assigns .rep, .dem or .na to each state.  Then, you define the color for each class in _customization.scss. This gives flexibility in styling the maps. No need to edit the drawMap() function to change style.
 
 ##Resources
 
@@ -122,7 +164,12 @@ Ben Markowitz
 [website](http://www.benmarkowitz.com)  
 
 Intridea  
-[website](http://www.intridea.com)  
+[website](http://www.intridea.com)
+
+D3 support created by Cheri Hung
+
+[twitter](http://www.twitter.com/cyhung) <br/>
+[blog](http://www.cyhung.net)
 
 ##License
 

assets/css/screen.css

@@ -1,56 +1,44 @@
-/*yahoo reset http://developer.yahoo.com/yui/reset/*/
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
   margin: 0;
-  padding: 0;
-}
+  padding: 0; }
 
 table {
   border-collapse: collapse;
-  border-spacing: 0;
-}
+  border-spacing: 0; }
 
 fieldset, img {
-  border: 0;
-}
+  border: 0; }
 
 address, caption, cite, code, dfn, em, strong, th, var {
   font-style: normal;
-  font-weight: normal;
-}
+  font-weight: normal; }
 
 ol, ul {
-  list-style: none;
-}
+  list-style: none; }
 
 caption, th {
-  text-align: left;
-}
+  text-align: left; }
 
 h1, h2, h3, h4, h5, h6 {
   font-size: 100%;
-  font-weight: normal;
-}
+  font-weight: normal; }
 
 q:before, q:after {
-  content: '';
-}
+  content: ''; }
 
 abbr, acronym {
-  border: 0;
-}
+  border: 0; }
 
 /*end reset*/
 body {
   width: 300px;
   margin: 0 auto;
   font-family: "helvetica neue",arial,sans-serif;
   -webkit-font-smoothing: antialiased;
-  padding: 0 0 40px;
-}
+  padding: 0 0 40px; }
 
 h1 {
   font-size: 24px;
   font-weight: bold;
   margin: 24px 0 6px;
-  color: #9d9d9d;
-}
+  color: #9d9d9d; }

assets/css/stately.css

@@ -5,11 +5,11 @@
   src: url("../font/stately-webfont.eot");
   src: url("../font/stately-webfont.eot?#iefix") format("embedded-opentype"), url("../font/stately-webfont.woff") format("woff"), url("../font/stately-webfont.ttf") format("truetype"), url("../font/stately-webfont.svg#testfontRegular") format("svg");
   font-weight: normal;
-  font-style: normal;
-}
+  font-style: normal; }
 
 .stately {
-  font: normal normal 300px/100% "stately-webfont";
+  font: normal normal 600px "stately-webfont";
+  line-height: 100%;
   font-size-adjust: none;
   -webkit-text-rendering: optimizeLegibility;
   -moz-text-rendering: optimizeLegibility;
@@ -20,110 +20,94 @@
   -ms-font-feature-settings: "liga" 1;
   -ms-font-feature-settings: "liga", "dlig";
   overflow: hidden;
-  width: 300px;
+  width: 600px;
   display: block;
   margin: 0 auto;
   padding: 0;
   list-style: none;
-}
-.stately li {
-  float: left;
-  margin: -20% 0 0 -100%;
-  position: relative;
-  left: 101%;
-  width: 100%;
-  cursor: default;
-  -webkit-transition: all 1s ease-in;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+  background: #eeeeee;
+  border-radius: 0; }
+  .stately li {
+    float: left;
+    margin: -20% 0 0 -100%;
+    position: relative;
+    left: 101%;
+    width: 100%;
+    cursor: default;
+    -webkit-transition: all 1s ease-in;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
 
 /** Style customizations
 *************************************/
-.stately {
-  background: #f2f2f2;
-  padding: 20px;
-  border-radius: 10px;
-  border-top: 1px solid #dddddd;
-}
+/** Page styles
+*************************************/
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
+  margin: 0;
+  padding: 0; }
 
-#intrideans {
-  color: #b0b0b0;
-}
-#intrideans .ca,
-#intrideans .co,
-#intrideans .dc,
-#intrideans .fl,
-#intrideans .ks,
-#intrideans .md,
-#intrideans .mn,
-#intrideans .mi,
-#intrideans .nj,
-#intrideans .ny,
-#intrideans .oh,
-#intrideans .va,
-#intrideans .wa,
-#intrideans .wy {
-  color: #a3d07e;
-}
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+fieldset, img {
+  border: 0; }
+
+address, caption, cite, code, dfn, em, strong, th, var {
+  font-style: normal;
+  font-weight: normal; }
+
+ol, ul {
+  list-style: none; }
+
+caption, th {
+  text-align: left; }
 
-#election {
-  color: #00aeef;
-}
-#election .id,
-#election .ut,
-#election .az,
-#election .ak,
-#election .wy,
-#election .mt,
-#election .no,
-#election .sd,
-#election .nd,
-#election .ne,
-#election .ks,
-#election .ok,
-#election .tx,
-#election .mo,
-#election .in,
-#election .ar,
-#election .la,
-#election .ms,
-#election .tn,
-#election .ky,
-#election .wv,
-#election .nc,
-#election .sc,
-#election .ga,
-#election .al {
-  color: #ff7474;
-}
+h1, h2, h3, h4, h5, h6 {
+  font-size: 100%;
+  font-weight: normal; }
+
+q:before, q:after {
+  content: ''; }
+
+abbr, acronym {
+  border: 0; }
+
+/*end reset*/
+body {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "helvetica neue",arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  padding: 0 0 40px; }
+
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 24px 0 6px;
+  color: #9d9d9d; }
+
+#mymap {
+  color: #b0b0b0; }
+  #mymap .true {
+    color: #ff8b3e; }
+  #mymap .false {
+    color: #b0b0b0; }
+
+#intrideans {
+  color: #b0b0b0; }
+  #intrideans .true {
+    color: #a3d07e; }
+  #intrideans .false {
+    color: #b0b0b0; }
 
-#presidents {
-  color: #b0b0b0;
-}
-#presidents .va,
-#presidents .oh,
-#presidents .ma,
-#presidents .ny,
-#presidents .nc,
-#presidents .tx,
-#presidents .vt,
-#presidents .ar,
-#presidents .ca,
-#presidents .ct,
-#presidents .ga,
-#presidents .hi,
-#presidents .il,
-#presidents .ia,
-#presidents .ky,
-#presidents .mo,
-#presidents .ne,
-#presidents .nj,
-#presidents .pa,
-#presidents .sc {
-  color: #ff8b3e;
-}
+#political {
+  color: #b0b0b0; }
+  #political .red, #political .rep {
+    color: #ff7474; }
+  #political .blue, #political .dem {
+    color: #00aeef; }