Skip to content

Instantly share code, notes, and snippets.

@estasney

estasney/d3.json

Forked from emeeks/d3.layout.orbit.js
Last active February 28, 2018 16:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save estasney/8ea7b2ffd5e6a975d50f56a571fccf82 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save estasney/8ea7b2ffd5e6a975d50f56a571fccf82 to your computer and use it in GitHub Desktop.
Download ZIP
Orbit Layout 4
Raw
readme.md

Mouseover nodes to get details and stop the animation. An example of d3.layout.orbit that demonstrates different revolution speeds, different orbital scales and animation available in the layout.

Raw
d3.json
{
"name": "cisco",
"children": [
{
"children": [
{
"name": "learn"
},
{
"name": "play"
},
{
"name": "life"
},
{
"children": [
{
"name": "life"
},
{
"name": "play"
},
{
"name": "world"
},
{
"name": "change"
},
{
"name": "difference"
},
{
"name": "learn"
},
{
"name": "experience"
},
{
"name": "talent"
},
{
"name": "community"
},
{
"name": "product"
},
{
"name": "closely"
},
{
"name": "ability"
}
],
"name": "work"
},
{
"name": "cut"
},
{
"name": "use"
},
{
"children": [
{
"name": "experience"
},
{
"name": "organization"
},
{
"name": "partner"
},
{
"name": "work"
},
{
"name": "role"
},
{
"name": "cycle"
},
{
"name": "product"
},
{
"children": [
{
"name": "provide"
},
{
"name": "engineer"
},
{
"name": "strongly"
},
{
"name": "environment"
},
{
"name": "training"
},
{
"name": "account"
},
{
"name": "learn"
},
{
"name": "year"
},
{
"name": "level"
},
{
"name": "engineering"
},
{
"name": "coaching"
},
{
"name": "tool"
}
],
"name": "support"
},
{
"name": "year"
},
{
"children": [
{
"children": [
{
"children": [
{
"name": "industry"
},
{
"name": "project"
},
{
"name": "change"
},
{
"name": "high"
},
{
"name": "development"
},
{
"name": "time"
},
{
"name": "strategy"
},
{
"name": "design"
},
{
"name": "comfortable"
},
{
"name": "year"
},
{
"name": "adapt"
},
{
"name": "responsibility"
}
],
"name": "lead"
}
],
"name": "sale"
}
],
"name": "sale"
}
],
"name": "sale"
},
{
"name": "provide"
},
{
"name": "largest"
},
{
"name": "lead"
},
{
"name": "tool"
},
{
"name": "single"
}
],
"name": "edge"
},
{
"children": [
{
"name": "innovate"
},
{
"name": "connection"
},
{
"name": "bold"
},
{
"name": "change"
},
{
"name": "world"
},
{
"name": "risk"
},
{
"name": "shape"
},
{
"name": "better"
},
{
"name": "billion"
},
{
"name": "connected"
},
{
"name": "estimated"
},
{
"name": "right"
}
],
"name": "thing"
},
{
"children": [
{
"name": "industry"
},
{
"name": "market"
},
{
"name": "account"
},
{
"name": "addition"
},
{
"name": "segment"
},
{
"name": "enterprise"
},
{
"name": "platform"
},
{
"name": "right"
},
{
"name": "video"
},
{
"name": "distribution"
},
{
"name": "secondary"
},
{
"name": "group"
}
],
"name": "provider"
},
{
"children": [
{
"name": "technology"
},
{
"name": "product"
},
{
"name": "work"
},
{
"name": "experience"
},
{
"children": [
{
"name": "work"
},
{
"name": "sale"
},
{
"children": [
{
"name": "work"
},
{
"name": "shape"
},
{
"name": "smart"
},
{
"name": "risk"
},
{
"name": "change"
},
{
"name": "experience"
},
{
"name": "difference"
},
{
"name": "city"
},
{
"name": "world"
},
{
"children": [
{
"name": "entertainment"
},
{
"name": "retail"
},
{
"name": "healthcare"
},
{
"name": "education"
},
{
"name": "network"
},
{
"name": "internet"
},
{
"name": "deliver"
},
{
"children": [
{
"name": "process"
},
{
"name": "datum"
},
{
"name": "come"
},
{
"children": [
{
"children": [
{
"name": "thing"
},
{
"name": "edge"
},
{
"name": "learn"
},
{
"name": "innovate"
},
{
"name": "play"
},
{
"name": "right"
},
{
"name": "culture"
}
],
"name": "people"
}
],
"name": "people"
}
],
"name": "people"
},
{
"name": "range"
},
{
"name": "innovative"
},
{
"name": "snort"
},
{
"name": "integrity"
}
],
"name": "power"
},
{
"name": "product"
},
{
"name": "entertainment"
}
],
"name": "technology"
},
{
"children": [
{
"name": "role"
},
{
"name": "design"
},
{
"name": "effectively"
},
{
"name": "intent"
},
{
"name": "deploy"
},
{
"name": "strong"
},
{
"name": "value"
},
{
"name": "leadership"
},
{
"name": "application"
},
{
"name": "wireless"
},
{
"name": "develop"
},
{
"name": "video"
}
],
"name": "member"
},
{
"name": "difference"
},
{
"children": [
{
"name": "manager"
},
{
"name": "management"
},
{
"name": "plan"
},
{
"name": "executive"
},
{
"name": "strategic"
},
{
"name": "engineer"
},
{
"name": "assign"
},
{
"name": "large"
},
{
"name": "develop"
},
{
"name": "provide"
},
{
"name": "identify"
},
{
"name": "territory"
}
],
"name": "account"
},
{
"children": [
{
"name": "account"
},
{
"name": "channel"
},
{
"name": "develop"
},
{
"name": "leader"
},
{
"children": [
{
"children": [
{
"name": "support"
},
{
"name": "ecosystem"
},
{
"name": "strategic"
},
{
"name": "relationship"
},
{
"name": "internal"
},
{
"name": "strategy"
}
],
"name": "partner"
}
],
"name": "partner"
}
],
"name": "partner"
},
{
"children": [
{
"name": "sale"
},
{
"name": "support"
},
{
"name": "experience"
},
{
"name": "partner"
},
{
"name": "provide"
},
{
"name": "knowledge"
},
{
"name": "skill"
},
{
"name": "work"
},
{
"name": "engineer"
},
{
"name": "product"
},
{
"name": "year"
},
{
"name": "role"
}
],
"name": "technical"
},
{
"name": "support"
},
{
"children": [
{
"name": "lead"
}
],
"name": "team"
}
],
"name": "team"
},
{
"name": "security"
},
{
"name": "collaboration"
},
{
"children": [
{
"name": "sale"
},
{
"name": "faster"
},
{
"name": "software"
},
{
"name": "development"
},
{
"name": "increasingly"
},
{
"name": "sophisticated"
},
{
"name": "growth"
},
{
"name": "motion"
},
{
"name": "partner"
},
{
"name": "product"
},
{
"name": "opportunity"
},
{
"name": "need"
}
],
"name": "drive"
},
{
"name": "world"
},
{
"children": [
{
"name": "engineer"
},
{
"name": "role"
},
{
"name": "define"
},
{
"name": "leader"
},
{
"name": "class"
},
{
"name": "advance"
},
{
"name": "design"
},
{
"name": "trust"
},
{
"name": "advisor"
},
{
"name": "architecture"
},
{
"name": "switching"
},
{
"name": "software"
}
],
"name": "architect"
},
{
"name": "technical"
}
],
"name": "solution"
},
{
"children": [
{
"name": "datacenter"
},
{
"name": "functional"
},
{
"name": "design"
},
{
"name": "collaboratively"
},
{
"name": "effectively"
},
{
"name": "specification"
},
{
"name": "program"
},
{
"name": "communicate"
},
{
"name": "look"
},
{
"name": "sale"
},
{
"name": "networking"
},
{
"name": "testing"
}
],
"name": "unit"
},
{
"children": [
{
"name": "thing"
},
{
"name": "center"
},
{
"name": "innovate"
},
{
"name": "connection"
},
{
"name": "bold"
},
{
"name": "change"
},
{
"name": "experience"
},
{
"children": [
{
"name": "change"
},
{
"name": "life"
},
{
"name": "afraid"
},
{
"name": "play"
},
{
"name": "connection"
},
{
"name": "better"
},
{
"name": "personality"
},
{
"name": "learn"
},
{
"name": "innovate"
},
{
"name": "class"
},
{
"name": "real"
},
{
"name": "build"
}
],
"name": "world"
},
{
"children": [
{
"name": "software"
},
{
"name": "experience"
},
{
"name": "application"
},
{
"name": "base"
},
{
"name": "model"
},
{
"name": "platform"
},
{
"name": "help"
},
{
"name": "virtualization"
},
{
"name": "mobile"
},
{
"name": "public"
},
{
"name": "computing"
},
{
"name": "saa"
}
],
"name": "cloud"
},
{
"name": "analytic"
},
{
"name": "network"
},
{
"name": "develop"
}
],
"name": "datum"
},
{
"children": [
{
"name": "best"
},
{
"name": "relationship"
},
{
"children": [
{
"name": "relationship"
},
{
"name": "colleague"
},
{
"name": "commercial"
},
{
"name": "culture"
},
{
"name": "build"
},
{
"name": "focused"
},
{
"name": "develop"
},
{
"name": "ecosystem"
},
{
"name": "concept"
},
{
"name": "simple"
},
{
"name": "complex"
},
{
"name": "term"
}
],
"name": "incredible"
},
{
"name": "colleague"
},
{
"name": "bike"
},
{
"name": "engage"
},
{
"name": "ferry"
},
{
"name": "muni"
},
{
"name": "station"
},
{
"name": "practice"
},
{
"name": "knowledge"
},
{
"name": "document"
}
],
"name": "share"
},
{
"children": [
{
"name": "scale"
},
{
"children": [
{
"name": "prove"
},
{
"name": "scale"
},
{
"name": "trust"
},
{
"name": "demonstrate"
},
{
"name": "virtual"
},
{
"name": "provide"
},
{
"name": "include"
},
{
"name": "platform"
},
{
"name": "better"
},
{
"name": "metric"
},
{
"name": "manager"
},
{
"name": "year"
}
],
"name": "success"
},
{
"name": "trust"
},
{
"name": "prove"
},
{
"name": "partner"
},
{
"name": "practice"
},
{
"name": "account"
},
{
"name": "maximize"
},
{
"name": "revenue"
},
{
"name": "earn"
},
{
"name": "recognition"
},
{
"name": "enterprise"
}
],
"name": "global"
},
{
"children": [
{
"name": "personality"
},
{
"name": "afraid"
},
{
"name": "talent"
},
{
"name": "style"
},
{
"name": "change"
},
{
"name": "hospital"
},
{
"name": "world"
},
{
"name": "handheld"
},
{
"name": "car"
},
{
"name": "mixed"
},
{
"children": [
{
"name": "experience"
},
{
"name": "design"
},
{
"name": "complex"
},
{
"name": "management"
},
{
"name": "knowledge"
},
{
"name": "cloud"
},
{
"name": "protocol"
},
{
"name": "enterprise"
},
{
"name": "deliver"
},
{
"name": "understanding"
},
{
"name": "center"
},
{
"name": "product"
}
],
"name": "network"
},
{
"name": "complex"
}
],
"name": "unique"
},
{
"children": [
{
"children": [
{
"name": "work"
},
{
"name": "partner"
},
{
"name": "sale"
},
{
"name": "success"
},
{
"name": "experience"
},
{
"name": "team"
},
{
"children": [
{
"children": [
{
"name": "technology"
},
{
"name": "accelerate"
},
{
"name": "power"
},
{
"name": "entertainment"
},
{
"name": "retail"
},
{
"name": "drive"
},
{
"name": "engage"
},
{
"name": "share"
},
{
"name": "achieve"
},
{
"name": "experience"
},
{
"name": "innovate"
},
{
"name": "financial"
}
],
"name": "result"
},
{
"name": "technology"
},
{
"name": "accelerate"
},
{
"name": "performance"
},
{
"children": [
{
"children": [
{
"name": "team"
},
{
"name": "power"
},
{
"name": "unit"
},
{
"name": "drive"
},
{
"name": "technical"
}
],
"name": "business"
}
],
"name": "business"
}
],
"name": "business"
},
{
"name": "solution"
},
{
"name": "support"
},
{
"name": "service"
},
{
"children": [
{
"name": "build"
},
{
"name": "develop"
},
{
"name": "closely"
},
{
"name": "strong"
},
{
"name": "level"
},
{
"name": "maintain"
},
{
"name": "executive"
},
{
"name": "colleague"
},
{
"name": "leverage"
},
{
"name": "management"
},
{
"name": "ability"
},
{
"name": "positive"
}
],
"name": "relationship"
}
],
"name": "customer"
},
{
"children": [
{
"name": "business"
},
{
"name": "provider"
},
{
"children": [
{
"name": "experience"
},
{
"name": "management"
},
{
"name": "engineering"
},
{
"name": "world"
},
{
"name": "build"
},
{
"name": "line"
},
{
"name": "suite"
},
{
"name": "provide"
},
{
"name": "development"
},
{
"name": "integrate"
},
{
"name": "requirement"
},
{
"name": "manager"
}
],
"name": "product"
},
{
"children": [
{
"name": "protect"
},
{
"name": "learn"
},
{
"name": "adapt"
},
{
"name": "relationship"
},
{
"name": "networking"
},
{
"name": "today"
},
{
"name": "expand"
},
{
"name": "strong"
},
{
"name": "connectivity"
},
{
"name": "activity"
},
{
"name": "innovation"
},
{
"name": "involve"
}
],
"name": "building"
},
{
"name": "accelerate"
},
{
"children": [
{
"name": "ensure"
},
{
"name": "project"
},
{
"name": "include"
},
{
"name": "focus"
},
{
"name": "model"
},
{
"children": [
{
"name": "leadership"
},
{
"children": [
{
"name": "support"
},
{
"name": "continuous"
},
{
"name": "responsible"
},
{
"name": "proper"
}
],
"name": "delivery"
}
],
"name": "delivery"
}
],
"name": "delivery"
},
{
"name": "team"
},
{
"name": "experience"
},
{
"name": "advance"
},
{
"children": [
{
"name": "development"
},
{
"name": "engineer"
},
{
"name": "develop"
},
{
"name": "engineering"
},
{
"name": "sophisticated"
},
{
"name": "increasingly"
},
{
"name": "faster"
},
{
"name": "include"
},
{
"name": "year"
},
{
"name": "feature"
},
{
"name": "hardware"
},
{
"name": "design"
}
],
"name": "software"
},
{
"children": [
{
"name": "learn"
},
{
"name": "adapt"
},
{
"name": "veteran"
},
{
"name": "status"
},
{
"name": "disability"
},
{
"name": "networking"
},
{
"name": "legally"
},
{
"name": "origin"
},
{
"name": "launch"
},
{
"name": "basis"
},
{
"name": "national"
},
{
"name": "unlawful"
}
],
"name": "protect"
}
],
"name": "service"
},
{
"children": [
{
"children": [
{
"name": "business"
},
{
"name": "solution"
},
{
"name": "team"
},
{
"children": [
{
"name": "people"
},
{
"name": "process"
},
{
"name": "datum"
},
{
"name": "come"
},
{
"name": "thing"
},
{
"name": "edge"
},
{
"name": "sale"
},
{
"name": "floor"
},
{
"name": "share"
},
{
"name": "unconnected"
},
{
"name": "incredible"
}
],
"name": "connect"
},
{
"children": [
{
"name": "network"
},
{
"name": "technology"
},
{
"children": [
{
"name": "strong"
},
{
"name": "cloud"
},
{
"name": "partner"
},
{
"children": [
{
"name": "year"
},
{
"children": [
{
"name": "development"
},
{
"children": [
{
"name": "management"
},
{
"name": "software"
},
{
"name": "knowledge"
},
{
"name": "require"
},
{
"name": "design"
},
{
"name": "application"
},
{
"name": "minimum"
},
{
"name": "equivalent"
}
],
"name": "experience"
}
],
"name": "experience"
}
],
"name": "experience"
},
{
"name": "goal"
},
{
"name": "internal"
},
{
"name": "portfolio"
},
{
"name": "group"
},
{
"name": "product"
},
{
"name": "engineer"
},
{
"name": "center"
},
{
"name": "entrepreneurial"
}
],
"name": "collaboration"
},
{
"name": "cloud"
},
{
"name": "sale"
},
{
"name": "product"
},
{
"name": "experience"
},
{
"name": "datum"
},
{
"children": [
{
"name": "level"
},
{
"name": "partner"
},
{
"name": "global"
},
{
"name": "success"
},
{
"name": "virtual"
},
{
"name": "gsso"
},
{
"name": "management"
},
{
"name": "enterprise"
},
{
"name": "support"
},
{
"name": "engineering"
},
{
"name": "provide"
},
{
"name": "develop"
}
],
"name": "organization"
},
{
"name": "global"
},
{
"name": "position"
}
],
"name": "security"
},
{
"children": [
{
"name": "work"
},
{
"children": [
{
"name": "change"
},
{
"name": "empower"
},
{
"name": "world"
},
{
"name": "culture"
},
{
"children": [
{
"name": "colorful"
},
{
"name": "hair"
},
{
"name": "care"
},
{
"name": "local"
},
{
"name": "tattoo"
},
{
"name": "encourage"
},
{
"name": "change"
},
{
"name": "enjoy"
},
{
"name": "life"
},
{
"name": "sell"
},
{
"name": "global"
},
{
"name": "assign"
}
],
"name": "community"
},
{
"name": "strive"
},
{
"children": [
{
"name": "engine"
},
{
"name": "diverse"
},
{
"name": "strategy"
},
{
"name": "attract"
},
{
"name": "software"
},
{
"name": "group"
},
{
"name": "unrivaled"
},
{
"name": "switch"
},
{
"name": "develop"
},
{
"name": "career"
},
{
"name": "community"
},
{
"name": "beacon"
}
],
"name": "talent"
},
{
"name": "colorful"
},
{
"name": "hair"
},
{
"name": "unique"
},
{
"name": "innovate"
},
{
"name": "career"
}
],
"name": "difference"
},
{
"name": "empower"
},
{
"name": "bring"
},
{
"name": "culture"
},
{
"name": "unique"
},
{
"children": [
{
"children": [
{
"name": "device"
},
{
"name": "everyday"
},
{
"name": "city"
},
{
"name": "smart"
},
{
"name": "commuter"
},
{
"name": "note"
},
{
"name": "shuttle"
},
{
"name": "value"
},
{
"name": "strong"
},
{
"name": "feature"
},
{
"name": "excellent"
},
{
"name": "demonstrate"
}
],
"name": "benefit"
},
{
"name": "device"
},
{
"name": "everyday"
},
{
"name": "city"
},
{
"name": "continually"
},
{
"name": "faster"
},
{
"name": "renewal"
},
{
"name": "consistently"
},
{
"name": "activity"
},
{
"name": "improve"
},
{
"name": "rockstar"
},
{
"name": "boundary"
}
],
"name": "strive"
},
{
"name": "talent"
},
{
"name": "community"
},
{
"name": "benefit"
},
{
"name": "skill"
}
],
"name": "person"
}
],
"name": "cisco"
}
],
"name": "cisco"
}
],
"name": "cisco"
},
{
"children": [
{
"name": "protection"
},
{
"name": "degree"
},
{
"name": "malware"
},
{
"name": "threat"
},
{
"name": "control"
},
{
"name": "management"
},
{
"name": "knowledge"
},
{
"name": "support"
},
{
"name": "help"
},
{
"name": "continuous"
},
{
"name": "software"
},
{
"name": "visibility"
}
],
"name": "advance"
},
{
"children": [
{
"name": "require"
},
{
"name": "competitive"
},
{
"name": "responsible"
},
{
"name": "role"
},
{
"name": "gsso"
},
{
"name": "step"
},
{
"name": "provide"
},
{
"name": "need"
},
{
"name": "high"
},
{
"name": "help"
},
{
"name": "strategic"
},
{
"name": "highly"
}
],
"name": "position"
},
{
"children": [
{
"name": "building"
},
{
"name": "digital"
},
{
"name": "transformation"
},
{
"name": "actively"
},
{
"name": "monitor"
},
{
"name": "protect"
},
{
"name": "share"
},
{
"name": "drive"
},
{
"name": "engage"
},
{
"name": "innovate"
},
{
"children": [
{
"name": "communication"
},
{
"name": "strong"
},
{
"name": "ability"
},
{
"name": "desire"
},
{
"name": "experience"
},
{
"name": "presentation"
},
{
"name": "write"
},
{
"name": "excellent"
},
{
"name": "verbal"
},
{
"name": "management"
},
{
"name": "knowledge"
},
{
"name": "require"
}
],
"name": "skill"
},
{
"name": "communication"
}
],
"name": "accelerate"
},
{
"children": [
{
"name": "unique"
},
{
"name": "talent"
},
{
"name": "dynamic"
},
{
"name": "international"
},
{
"name": "excitement"
},
{
"name": "experience"
},
{
"name": "life"
},
{
"name": "product"
},
{
"name": "idea"
},
{
"name": "market"
},
{
"name": "help"
},
{
"name": "corporate"
}
],
"name": "bring"
},
{
"children": [
{
"name": "geek"
},
{
"name": "aficionado"
},
{
"name": "tech"
},
{
"name": "strive"
},
{
"name": "cool"
},
{
"name": "leader"
},
{
"name": "wearecisco"
},
{
"name": "purple"
},
{
"name": "dot"
},
{
"name": "benefit"
},
{
"name": "haired"
},
{
"name": "polka"
}
],
"name": "culture"
},
{
"children": [
{
"name": "edge"
},
{
"name": "learn"
},
{
"name": "life"
},
{
"name": "play"
},
{
"name": "morning"
},
{
"name": "excited"
},
{
"name": "like"
},
{
"name": "reason"
},
{
"name": "community"
},
{
"name": "change"
},
{
"name": "local"
},
{
"name": "want"
}
],
"name": "come"
},
{
"children": [
{
"name": "culture"
},
{
"name": "strive"
},
{
"name": "benefit"
},
{
"name": "enable"
},
{
"name": "latest"
},
{
"name": "community"
},
{
"name": "device"
},
{
"name": "year"
},
{
"name": "support"
},
{
"name": "wide"
},
{
"name": "implement"
},
{
"name": "design"
}
],
"name": "empower"
},
{
"children": [
{
"name": "care"
},
{
"name": "enjoy"
},
{
"name": "imagine"
},
{
"name": "create"
},
{
"name": "unprecedented"
},
{
"name": "internet"
},
{
"name": "disruption"
},
{
"name": "network"
},
{
"name": "roughly"
},
{
"name": "connected"
},
{
"name": "billion"
}
],
"name": "unconnected"
},
{
"children": [
{
"name": "datum"
},
{
"name": "thing"
},
{
"name": "innovate"
},
{
"name": "bold"
},
{
"name": "come"
},
{
"name": "connection"
},
{
"name": "sale"
},
{
"name": "change"
},
{
"name": "improvement"
},
{
"name": "work"
},
{
"name": "tool"
},
{
"name": "identify"
}
],
"name": "process"
},
{
"children": [
{
"name": "single"
},
{
"name": "entire"
},
{
"name": "skill"
},
{
"name": "set"
},
{
"name": "planning"
},
{
"name": "tool"
},
{
"name": "experience"
},
{
"name": "ground"
},
{
"name": "flow"
},
{
"name": "newly"
},
{
"name": "clock"
},
{
"name": "distribution"
}
],
"name": "floor"
},
{
"children": [
{
"name": "user"
},
{
"children": [
{
"children": [
{
"name": "application"
},
{
"name": "management"
},
{
"name": "improve"
},
{
"name": "engagement"
},
{
"name": "operational"
},
{
"name": "high"
},
{
"name": "sale"
},
{
"name": "exceed"
},
{
"name": "experience"
}
],
"name": "performance"
}
],
"name": "performance"
}
],
"name": "performance"
}
]
}
Raw
d3.layout.orbit.js
d3.layout.orbit = function() {
var currentTickStep = 0;
var orbitNodes;
var orbitSize = [1,1];
var nestedNodes;
var flattenedNodes = [];
var tickRadianStep = 0.004363323129985824;
var orbitDispatch = d3.dispatch('tick');
var tickInterval;
var orbitalRings = [];
var orbitDepthAdjust = function() {return 2.95};
var childrenAccessor = function(d) {return d.children};
var tickRadianFunction = function() {return 1};
var fixedOrbitArray = [99];
var orbitMode = "flat";
function _orbitLayout() {
return _orbitLayout;
}
_orbitLayout.mode = function(_mode) {
//Atomic, Solar, other?
if (!arguments.length) return orbitMode;
if (_mode == "solar") {
fixedOrbitArray = [1]
}
if (_mode == "atomic") {
fixedOrbitArray = [2,8]
}
if (_mode == "flat") {
fixedOrbitArray = [99]
}
orbitMode = _mode;
if (Array.isArray(_mode)) {
fixedOrbitArray = _mode;
orbitMode = "custom";
}
return this
}
_orbitLayout.start = function() {
//activate animation here
tickInterval = setInterval(
function() {
currentTickStep++;
flattenedNodes.forEach(function(_node){
if (_node.parent) {
_node.x = _node.parent.x + ( (_node.ring) * Math.sin( _node.angle + (currentTickStep * tickRadianStep * tickRadianFunction(_node))) );
_node.y = _node.parent.y + ( (_node.ring) * Math.cos( _node.angle + (currentTickStep * tickRadianStep * tickRadianFunction(_node))) );
}
})
orbitalRings.forEach(function(_ring) {
_ring.x = _ring.source.x;
_ring.y = _ring.source.y;
})
orbitDispatch.tick();
},
10);
}
_orbitLayout.stop = function() {
//deactivate animation here
clearInterval(tickInterval);
}
_orbitLayout.speed = function(_degrees) {
if (!arguments.length) return tickRadianStep / (Math.PI / 360);
tickRadianStep = tickRadianStep = _degrees * (Math.PI / 360);
return this;
}
_orbitLayout.size = function(_value) {
if (!arguments.length) return orbitSize;
orbitSize = _value;
return this;
//change size here
}
_orbitLayout.revolution = function(_function) {
//change ring size reduction (make that into dynamic function)
if (!arguments.length) return tickRadianFunction;
tickRadianFunction = _function;
return this
}
_orbitLayout.orbitSize = function(_function) {
//change ring size reduction (make that into dynamic function)
if (!arguments.length) return orbitDepthAdjust;
orbitDepthAdjust = _function;
return this
}
_orbitLayout.orbitalRings = function() {
//return an array of data corresponding to orbital rings
if (!arguments.length) return orbitalRings;
return this;
}
_orbitLayout.nodes = function(_data) {
if (!arguments.length) return flattenedNodes;
nestedNodes = _data;
calculateNodes();
return this;
}
_orbitLayout.children = function(_function) {
if (!arguments.length) return childrenAccessor;
//Probably should use d3.functor to turn a string into an object key
childrenAccessor = _function;
return this;
}
d3.rebind(_orbitLayout, orbitDispatch, "on");
return _orbitLayout;
function calculateNodes() {
orbitalRings = [];
orbitNodes = nestedNodes;
orbitNodes.x = orbitSize[0] / 2;
orbitNodes.y = orbitSize[1] / 2;
orbitNodes.ring = orbitSize[0] / 2;
orbitNodes.depth = 0;
flattenedNodes.push(orbitNodes);
traverseNestedData(orbitNodes);
function traverseNestedData(_node) {
if(childrenAccessor(_node)) {
var y = 0;
var totalChildren = childrenAccessor(_node).length;
var _rings = 0;
var _total_positions = 0;
var _p = 0;
while (_total_positions < totalChildren) {
if (fixedOrbitArray[_p]) {
_total_positions += fixedOrbitArray[_p];
}
else {
_total_positions += fixedOrbitArray[fixedOrbitArray.length - 1];
}
_p++;
_rings++;
}
while (y < totalChildren) {
var _pos = 0;
var _currentRing = 0;
var _p = 0;
var _total_positions = 0;
while (_total_positions <= y) {
if (fixedOrbitArray[_p]) {
_total_positions += fixedOrbitArray[_p];
}
else {
_total_positions += fixedOrbitArray[fixedOrbitArray.length-1];
}
_p++;
_currentRing++;
}
var ringSize = fixedOrbitArray[fixedOrbitArray.length-1];
if (fixedOrbitArray[_currentRing-1]) {
ringSize = fixedOrbitArray[_currentRing-1];
}
if (_node.parent) {
var _ring = {source: _node, x: _node.x, y: _node.y, r: _node.parent.ring / orbitDepthAdjust(_node) * (_currentRing / _rings)};
}
else {
var _ring = {source: _node, x: _node.x, y: _node.y, r: (orbitSize[0] / 2) * (_currentRing / _rings)};
}
var thisPie = d3.layout.pie().value(function(d) {return childrenAccessor(d) ? 4 : 1});
var piedValues = thisPie(childrenAccessor(_node).filter(function(d,i) {return i >= y && i <= y+ringSize-1}));
for (var x = y; x<y+ringSize && x<totalChildren;x++) {
childrenAccessor(_node)[x].angle = ((piedValues[x - y].endAngle - piedValues[x - y].startAngle) / 2) + piedValues[x - y].startAngle;
childrenAccessor(_node)[x].parent = _node;
childrenAccessor(_node)[x].depth = _node.depth + 1;
childrenAccessor(_node)[x].x = childrenAccessor(_node)[x].parent.x + ( (childrenAccessor(_node)[x].parent.ring / 2) * Math.sin( childrenAccessor(_node)[x].angle ) );
childrenAccessor(_node)[x].y = childrenAccessor(_node)[x].parent.y + ( (childrenAccessor(_node)[x].parent.ring / 2) * Math.cos( childrenAccessor(_node)[x].angle ) );
childrenAccessor(_node)[x].ring = _ring.r;
flattenedNodes.push(childrenAccessor(_node)[x]);
traverseNestedData(childrenAccessor(_node)[x]);
}
orbitalRings.push(_ring);
y+=ringSize;
}
}
}
}
}
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Orbit Layout Modes</title>
<meta charset="utf-8" />
</head>
<style>
#viz, svg {
width: 100%;
height: 100%;
}
text {
pointer-events: none;
}
#buttons {
position: fixed;
top:0;
left:0;
}
circle.ring {
fill: none;
stroke: black;
stroke-width: 1px;
stroke-opacity: .15;
}
</style>
<script>
function makeViz() {
d3.json("d3.json", function(data) {drawOrbit(data)});
}
function drawOrbit(_data) {
var center = {};
var recenter = false;
for (var x=0;x<_data.children.length;x++) {
_data.children[x].size = _data.children[x].children ? _data.children[x].children.length : 0;
}
_data.children.sort(function(a,b) {
if (a.size > b.size) {
return 1;
}
if (a.size < b.size) {
return -1;
}
return 0;
})
sizeScale = d3.scale.linear().domain([0,1,5,10,20]).range([4,6,8,10,12]).clamp(true);
colorScale = d3.scale.linear().domain([0,1,2,3,4]).range(["rgb(161,208,120)","rgb(247,148,72)","rgb(225,203,208)","rgb(174,223,228)","rgb(245,132,102)"]);
planetColors = {Mercury: "gray", Venus: "#d6bb87", Earth: "#677188", Mars: "#7c5541", Jupiter: "#a36a3e", Saturn: "#e9ba85", Uranus: "#73cbf0", Neptune: "#6383d1"}
orbit = d3.layout.orbit().size([800,800])
.revolution(customRevolution)
.orbitSize(function(d) {return d.depth >= 2 ? 6 : 4})
.speed(.25)
.mode([35,36,8,3,1])
.nodes(_data);
center = orbit.nodes()[0];
d3.select("svg")
.append("g")
.attr("class", "viz")
.attr("transform", "translate(50,50)")
.selectAll("g.node").data(orbit.nodes())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"})
.on("mouseover", nodeOver)
.on("click", recenter)
d3.selectAll("g.node")
.append("circle")
.attr("class", "satellite")
.attr("r", function(d) {return sizeScale(d.children ? d.children.length : 0)})
.style("fill", function(d) {return colorScale(d.depth)})
.style("stroke", "brown")
.style("stroke-width", "1px")
d3.selectAll("g.node").filter(function(d) {return d.depth == 1})
.append("text")
.text(function(d) {return d.depth == 0 ? "Sun" : d.key})
.attr("y", 20)
.style("text-anchor", "middle")
d3.select("g.viz")
.selectAll("circle.ring")
.data(orbit.orbitalRings())
.enter()
.insert("circle", "g")
.attr("class", "ring")
.attr("r", function(d) {return d.r})
.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y})
orbit.on("tick", orbitTick);
orbit.start();
function orbitTick() {
var newX = 200- center.x;
var newY = 200 - center.y;
d3.select("g.viz")
.attr("transform", "scale("+(1 + (center.depth *.1)) +") translate(" + newX + "," + newY + ")")
d3.selectAll("g.node")
.attr("transform", function(d) {return "translate(" +d.x +"," + d.y+")"});
d3.selectAll("circle.ring")
.attr("cx", function(d) {return d.x})
.attr("cy", function(d) {return d.y});
d3.selectAll("line.visible")
.attr("x1", function(p) {return p.source.x})
.attr("x2", function(p) {return p.target.x})
.attr("y1", function(p) {return p.source.y})
.attr("y2", function(p) {return p.target.y})
}
function changeCenter() {
recenter = false;
orbit.stop();
var newX = 200 - center.x;
var newY = 200 - center.y;
d3.select("g.viz")
.transition()
.duration(1000)
.attr("transform", "scale("+(1 + (center.depth *.1)) +") translate(" + newX + "," + newY + ")")
.each("end", function() {orbit.start()})
}
function customRevolution(d)
{
if (d.name == "time") {
return d.depth * .25;
}
if (d.name == "geo") {
return -d.depth * .25;
}
return d.depth
}
function nodeOver(d) {
orbit.stop();
center = d;
changeCenter();
d3.selectAll("text.sat").remove();
d3.selectAll("line.visible").remove();
if (d.children) {
var lines = d.children.map(function(p) {return {source: d, target: p}})
d3.select("g.viz").selectAll("line.visible")
.data(lines)
.enter()
.insert("line", "g")
.attr("x1", function(p) {return p.source.x})
.attr("x2", function(p) {return p.target.x})
.attr("y1", function(p) {return p.source.y})
.attr("y2", function(p) {return p.target.y})
.attr("class", "visible")
.style("stroke", "rgb(73,106,154)")
.style("stroke-width", 2)
}
if (d.parent) {
d3.select("g.viz").selectAll("line.fake")
.data([{source:d, target: d.parent}])
.enter()
.insert("line", "g")
.attr("x1", function(p) {return p.source.x})
.attr("x2", function(p) {return p.target.x})
.attr("y1", function(p) {return p.source.y})
.attr("y2", function(p) {return p.target.y})
.attr("class", "visible")
.style("stroke", "rgb(165,127,124)")
.style("stroke-width", 3)
}
d3.selectAll("g.node")
.filter(function(p) {return p == d || p == d.parent || (d.children ? d.children.indexOf(p) > -1 : false)})
.append("text")
.text(function(p) {return p.name})
.style("text-anchor", "middle")
.attr("y", 15)
.attr("class", "sat")
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", 3)
.style("stroke-opacity", .7);
d3.selectAll("g.node")
.filter(function(p) {return p == d || p == d.parent || (d.children ? d.children.indexOf(p) > -1 : false)})
.append("text")
.text(function(p) {return p.name})
.style("text-anchor", "middle")
.attr("y", 15)
.attr("class", "sat");
d3.selectAll("g.node > circle").style("stroke", "brown").style("stroke-width", 1);
d3.select(this).select("circle").style("stroke", "black").style("stroke-width", 3);
}
}
</script>
<body onload="makeViz()">
<div id="viz"><svg></svg><div id="buttons"></div></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.layout.orbit.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment