D3 breadcrumbs

See the Project Page for interactive example!

screenshot

History

I was tired copying same thing over and over in different projects and decided to create small lib for breadcrumbs

Highlights

• Dynamic resizing
• Support of breadcrumbs wrapping
• High number of customization options

Usage

1. Include breadcrumb.js file into you app

 <script src="breadcrumb.js"></script>

2. Initialize breadcumb inside your d3 visual

  var breadcrumb = d3.breadcrumb()
          .container('svg')   // any element or selection 

3. Show or hide it on your events

//show
breadcrumb.show([
  {text:"Hi"},
  {text:"I am breadcrumb"}
])

//hide
breadcrumb.hide()

Author

David B (twitter)
David B (linkedin)

I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise

You can also book data viz related consultation session with me