https://github.com/abcnews/d3-layout-narrative

A d3 layout for creating XKCD style narrative charts
https://github.com/abcnews/d3-layout-narrative

chart d3js javascript layout-engine library narrative-charts xkcd

Last synced: 4 months ago
JSON representation

A d3 layout for creating XKCD style narrative charts

• Host: GitHub
• URL: https://github.com/abcnews/d3-layout-narrative
• Owner: abcnews
• License: mit
• Created: 2016-01-30T10:06:40.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-05T07:24:25.000Z (about 10 years ago)
• Last Synced: 2025-10-13T20:09:46.819Z (8 months ago)
• Topics: chart, d3js, javascript, layout-engine, library, narrative-charts, xkcd
• Language: JavaScript
• Homepage:
• Size: 389 KB
• Stars: 192
• Watchers: 9
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - abcnews/d3-layout-narrative - A d3 layout for creating XKCD style narrative charts (library)

README

          
# Narrative Charts

[XKCD](http://xkcd.com/657/) style narrative charts layout engine for [d3](http://d3js.org).

This is just a layout engine; how you go about presenting and styling the result is entirely up to you.

![All the xys you'll need](https://cldup.com/jLe-UZiesy-3000x3000.png)

See [annotated source](https://abcnews.github.io/d3-layout-narrative/) for API details.

You _could_ style it something like this:

![Preview](https://cdn.rawgit.com/drzax/81fff35393fb65255621fd0ab8d11bd7/raw/cfc9d4e3063db145db94c9d237f628437180b448/preview.png)

Check out the [bare-bones example](http://bl.ocks.org/drzax/81fff35393fb65255621fd0ab8d11bd7) if you're having trouble getting started.