Visualizing Hierarchical Data using:
D3.js
Neo4j
Ember.js
Ember Data
by
Dan Vingo
Who am i?
Entrepreneur currently building a product using
Ember, Neo4j, and D3
Supporting the venture through freelance
How I Got here
(How I ended up using these tools)
- Had an idea for organizing information using hierarchies, like a filesystem in the browser
- Got stuck when trying to decide on a data store
- Heard about Neo4j a few years ago, decided to investigate again
- How to visualize the hierarchies? – D3!
- Ember to tie it all together
NEo4j
It's a graph database.
Neo4j
Made by Swedes!
Neo4j
What's with the name?
Neo4j
Free book!
http://graphdatabases.com/
Cypher
Create:
CREATE (n:Person { name: 'Neo', title: 'Developer' });
Read:
MATCH (n:Person)-[r:KNOWS*]-m
WHERE n.name = 'Neo'
RETURN n AS Neo, r, m;
Update:
MATCH (n { name: 'Neo' })
SET n.surname = 'Taylor'
RETURN n; Delete:
MATCH (n { name: 'Peter' })
DELETE n; Cypher
Create Relationships:
MATCH (a:Person),(b:Person)
WHERE a.name = 'Node A' AND b.name = 'Node B'
CREATE (a)-[r:RELTYPE]->(b)
RETURN r Cypher Browser
Cypher
For more info:
neo4j.org/learn/cypher
d3
Layouts:
Derive secondary data for positioning elements
Pack
Pack
Chord
Tree
Radial Tree
Force
Treemap
Partition
ember data
Parent = Em.Mixin.create({
children: DS.hasMany('child',
{polymorphic: true, inverse: 'parent'}),
type: DS.attr('string')
});
Child = Em.Mixin.create({
parent: DS.belongsTo('parent',
{polymorphic: true, inverse: 'children'}),
type: DS.attr('string')
});
Root = DS.Model.extend(Parent, {
name: DS.attr('string')
});
Folder = DS.Model.extend(Parent, Child, {
name: DS.attr('string')
});
File = DS.Model.extend(Child, {
name: DS.attr('string')
});
Ember data
https://github.com/dvingo/data
Forked to allow abstract types in polymorphic relationships
Demo
Express app:
Ember app:
danvingo@gmail.com
Visualizing Hierarchical Data
By dvingo