Styling changes (#2)

johnwalley · Dec 14, 2016 · 4206e79 · 4206e79
1 parent 0d547ef
commit 4206e79
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 43 deletions.
diff --git a/example/bumps.css b/example/bumps.css
@@ -22,21 +22,27 @@ a {
     justify-content: flex-start;
 }
 
-.chart {
+.share {
     display: flex;
-    flex-direction: row;
-    justify-content: center;
+    align-items: center;
+}
+
+.facebook-share-button {
+    display: inline-block;
+    padding-right: 4px;
+    cursor: pointer;
 }
 
-.line {
-    fill: none;
-    stroke: black;
-    stroke-width: 5px;
+.twitter-share-button {
+    display: inline-block;
+    padding-left: 4px;
+    cursor: pointer;
 }
 
-.background {
-    fill: none;
-    stroke-opacity: 0.1;
+.chart {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 }
 
 .blades {
@@ -47,16 +53,6 @@ a {
     stroke-dasharray: 5,5;
 }
 
-.line.highlighted {
-    fill: none;
-    stroke-width: 6px;
-}
-
-.line.hover {
-    fill: none;
-    stroke-width: 6px;
-}
-
 .year {
     font-size: 22px;
 }
@@ -76,20 +72,3 @@ a {
 .position-label-right {
     font-size: 16px;
 }
-
-.share {
-    display: flex;
-    align-items: center;
-}
-
-.facebook-share-button {
-    display: inline-block;
-    padding-right: 4px;
-    cursor: pointer;
-}
-
-.twitter-share-button {
-    display: inline-block;
-    padding-left: 4px;
-    cursor: pointer;
-}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-bumps-chart",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Draw bumps charts.",
   "keywords": [
     "d3",

diff --git a/src/chart.js b/src/chart.js
@@ -12,7 +12,7 @@ export default function () {
 
   function chart() {
   }
-  
+
   chart.setup = function setup(el) {
     svg = select(el).select('svg');
 
@@ -167,7 +167,7 @@ export default function () {
       .attr('class', 'division')
       .attr('id', d => d.start)
       .style('stroke', 'black')
-      .style('fill', (d, i) => (i % 2 ? '#E0E0E0' : '#FFFFFF'))
+      .style('fill', (d, i) => (i % 2 ? '#F4F4F4' : '#FFFFFF'))
       .attr('x', d => x(d.year - startYear) * 5)
       .attr('y', d => y(d.start - 0.5))
       .attr('width', x(4) - x(0))
@@ -224,14 +224,15 @@ export default function () {
       .attr('class', d => `line ${d.name.replace(/ /g, '-')}`)
       .attr('transform', `translate(${x(-dayShift)},0)`)
       .classed('highlighted', d => d.highlighted)
-      .classed('background', d => d.background)
       .style('filter', d => (d.highlighted || d.hover ? 'url(#dropShadow)' : ''))
-      .style('stroke', d => (d.highlighted || d.hover ? crewColor(d.name) : '#000000'));
+      .style('fill', 'none')
+      .style('stroke', d => (d.highlighted || d.hover ? crewColor(d.name) : '#000000'))
+      .style('stroke-width', d => (d.highlighted || d.hover ? '3px' : '2px'));
 
     crew.classed('highlighted', d => d.highlighted)
-      .classed('background', d => d.background)
       .style('filter', d => (d.highlighted || d.hover ? 'url(#dropShadow)' : ''))
       .style('stroke', d => (d.highlighted || d.hover ? crewColor(d.name) : '#000000'))
+      .style('stroke-width', d => (d.highlighted || d.hover ? '3px' : '2px'))
       .transition()
       .duration(transitionLength)
       .attr('transform', `translate(${x(-dayShift)},0)`);
@@ -287,6 +288,7 @@ export default function () {
       })
       .attr('d', d => lineFunc(d.values))
       .attr('class', 'background')
+      .style('stroke-opacity', '0.1')
       .style('cursor', 'pointer');
 
     crewBackground.transition()