Narrative Charts

This is a bare-bones example for using the d3-layout-narrative module. It's a cut-down version of the Episode IV chart in Star Wars: every scene from I-VI charted at ABC News.

View the annotated source for more on the API.

forked from drzax's block: Narrative Charts

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
		font-family: "ProximaNova",Helvetica,Arial,sans-serif;
		font-size: 12px;
	}

rect {
		fill: white;
		stroke: #000;
	}
	path {
		fill: none;
		stroke-width: 2;
		stroke: #333;
	}

path.light {
		stroke: #3c6da8;
  }
  
  circle.light {
    fill: #3c6da8;
	}

path.dark, circle.dark {
		stroke: #df2929;
	}
  
  circle.dark {
    fill: #df2929;
	}

.intro text:first-child {
		fill: #fff;
	    stroke: #f9f9f9;
	    stroke-width: 3;
	}

.intro text+text {
	    fill: #333;
	}

.intro text+text.dark {
	    fill: #df2929;
	}

.intro text+text.light {
	    fill: #3c6da8;
	}
</style>

https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.js

https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js

https://d3js.org/d3.v3.min.js

https://cdn.rawgit.com/abcnews/d3-layout-narrative/1.0.0/narrative.js