New example: using a sunburst to represent sequences of events, e.g. web site navigation flow

[Kerry Rodden]

Hi all,

I wanted to share this example that I just posted as a gist:

http://bl.ocks.org/kerryrodden/7090426

The idea is to use a sunburst to represent the relative frequencies of different sequences of events, such as how often users follow particular paths through a web site. I hope that people will be able to reuse it with their own data.

This was my first d3 project, originally written 2 years ago. (It took me a while to get around to getting approval to release it). I think it has some aspects of interest for people who are learning d3, e.g.

- transforming CSV data into hierarchical JSON

- filtering segments that would be too small to see

- highlighting all ancestors of a particular child node

- data join with a key function, and enter/update/exit (in the breadcrumb trail)

- polygons in SVG

I would appreciate any suggestions for improved code organization, or ways to use D3 better than I currently am.

thanks!

Kerry

[Phuoc Do]

Hi Kerry,

This looks nice. I'd suggest giving sequence name. And update it along with percentage. You no longer have to append svg:svg, svg:g. append("svg") is good enough.

My team runs vida.io. I'd be happy to share the viz on vida.io/community.

Phuoc

[Ian Johnson]

Kerry,

I wanted to thank you for showing this at the meetup! It's a very interesting technique and I can't wait to try it on some data I'm working with, and see where others take it.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Ian Johnson - 周彦

http://enja.org

[Kerry Rodden]

Thanks for the feedback, Phuoc! I'm not sure what you mean by giving the sequence a name, beyond what I'm already doing with the breadcrumb trail?

vida.io is a great site, so I'm honored to be asked to share there - unfortunately I think I am only allowed to post the code on Github or Google Code.

[Kerry Rodden]

Thanks Ian! I definitely hope that people will reuse and extend it, and I'm really looking forward to seeing the results!

[Phuoc Do]

Kerry, I mean giving "this sequence" a name. But it won't work either (after some thoughts).

The problem I see is there's a disconnect between "this sequence" and the breadcrum trail at top. Maybe replacing "this sequence" with sequence card stack that shows sequence at center of sunburst.

[Nikhil VJ]

Hi Kerry, this is awesome. I want to use this with a different kind of CSV, one that is more real-world than generated. Attached the csv in this message. It's a nested/hierarchical csv with id and parent_id. It would be great if you could show how to use such data with your visualization.
I've been able to visualize this data in this project by Stephen James : https://github.com/stephen-james/DataStructures.Tree/
But he's using a "circle packing" visualization which isn't very helpful. Need your kind of visualization!

PS: The data represents all the electricity-related expenditures budgeted by a city's municipal corporation in India. So it's real-world data.

[lokesh todwal]

Hi
 I wanna use it but there are few problems that I am facing with it:
1.Can you give us the visit-sequences.csv file.
2.Where should I use the Apache permission.
 Looking forward to your quick reply

Thanks
Lokesh