fall back on a default red styling for narratives

src/js/map/map.js

@@ -357,22 +357,26 @@ Stop and start the development process in terminal after you have added your tok
       .exit()
       .remove();
 
+    let styleName
     narrativesDom
       .enter().append('path')
       .attr('class', 'narrative')
       .attr('d', sequenceLine)
       .style('stroke-width', d => {
+        styleName = d[0].narrative && d[0].narrative in narrativeProps
+          ? d[0].narrative
+          : 'default'
         const n = d[0].narrative;
-        return (n) ? narrativeProps[n].strokeWidth : 3;
+        return (n) ? narrativeProps[styleName].strokeWidth : 3;
       })
       .style('stroke-dasharray', d => {
         const n = d[0].narrative;
-        if (narrativeProps[n].style === 'dotted') return "2px 5px";
+        if (narrativeProps[styleName].style === 'dotted') return "2px 5px";
         return 'none';
       })
       .style('stroke', d => {
         const n = d[0].narrative;
-        return (n) ? narrativeProps[n].stroke : '#fff';
+        return (n) ? narrativeProps[styleName].stroke : '#fff';
       })
       .style('fill', 'none');
   }

src/scss/_colors.scss

@@ -1,3 +1,5 @@
+$event_default: red;
+
 $offwhite: #efefef;
 $midwhite: #a0a0a0;
 $darkwhite: darken($midwhite, 15%);

src/scss/map.scss

@@ -30,7 +30,7 @@
       z-index: $map;
   }
   .event {
-    fill: $yellow;
+    fill: $event_default;
     cursor: pointer;
     opacity: 0.45;
   }
@@ -144,6 +144,7 @@
 */
 
 .location-event-marker {
+  fill: $event_default;
   stroke-width: 0;
   transition: 0.2s ease;
   fill-opacity: 0.8;

src/scss/timeline.scss

@@ -177,6 +177,7 @@
       }
 
       .event {
+        fill: $event_default;
         cursor: pointer;
         opacity: .7;
 

src/store/initial.js

@@ -84,10 +84,16 @@ const initial = {
       palette: d3.schemeCategory10,
 
       narratives: {
-        narrative_1: {
+        default: {
           style: 'dotted',                  // ['dotted', 'solid']
           opacity: 0.4,                     // range between 0 and 1
-          stroke: '#ffffff',               // Any hex or rgb code
+          stroke: 'red',               // Any hex or rgb code
+          strokeWidth: 2
+        },
+        narrative_1: {
+          style: 'solid',                  // ['dotted', 'solid']
+          opacity: 0.4,                     // range between 0 and 1
+          stroke: 'red',               // Any hex or rgb code
           strokeWidth: 2
         }
       }