Add VT2-examples: all 6 chapters of 'Visualize This' (110 files) — data scraping, ETL, trends, categorical, multivariate, spatial, distribution analysis

VT2-examples/vt2-ch6-codedata-dir/web/barbell/style/style.css

@@ -0,0 +1,91 @@
+/* #Reset & Basics (Inspired by E. Meyers)
+================================================== */
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline; }
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+		display: block; }
+	body {
+		line-height: 1; }
+	ol, ul {
+		list-style: none; }
+	blockquote, q {
+		quotes: none; }
+	blockquote:before, blockquote:after,
+	q:before, q:after {
+		content: '';
+		content: none; }
+	table {
+		border-collapse: collapse;
+		border-spacing: 0; }
+        
+
+/* Main layout
+============================ */        
+
+#main-wrapper {
+    width: 600px;
+    margin: 40px auto;
+    font-family: Georgia, serif;
+}        
+h1 {
+    font-family: Georgia, serif;
+    font-size: 1.45em;
+    text-align: center;
+}
+        
+        
+/* Chart
+============================ */
+
+#chart {
+    position: relative;
+    margin: 0 auto;
+}
+text {
+    font-family: "Courier New", Courier, monospace;
+    font-size: .8rem;
+}
+
+.axis .axistitle {
+	text-transform: uppercase;
+    fill: #333;
+	font-size: .8rem;
+}
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #e0e0e0;
+  stroke-width: .5px;
+  shape-rendering: crispEdges;
+}
+.x.axis path, .y.axis path {
+  display: none;
+}
+.barbell line {
+    stroke-width: 1px;
+}
+.barbell circle {
+    stroke: #000;
+    stroke-width: 1px;
+}
+.barbell circle.men {
+    fill: #317e7f;
+}
+.barbell circle.women {
+    fill: #f98e1a;
+}
+
+
+/* Interaction
+============================ */
+
+circle.current {
+    stroke: #000;
+    stroke-width: 3px;
+}
+