NODES = [ { title: 'Photo Sets', name: 'piclinq', descr: 'Dynamic social photosets presented as a continuous stream', type: 'webapp', tags: ['Product concept','Visual design','Prototype'], tools: ['Photoshop','VIM','HTML/CSS/jQuery'], pos: {x: 3100, y: 100} }, { title: 'Datamart', name: 'datamart', descr: 'Internal webapp for aggregating sales account data', type: 'webapp', tags: ['Product concept','Visual design','Prototype','Production'], tools: ['Photoshop','Powerpoint','VIM','HTML/CSS/jQuery'], pos: {x: 1000, y: 100} }, { title: 'Dashboard', name: 'dash', descr: 'Channel/grid style reports dashboard', type: 'concept', tags: ['Product concept','Visual design','Prototype'], tools: ['Photoshop','Illustrator','VIM','HTML/CSS/jQuery'], pos: {x: 400, y: 100} }, { title: 'Product Ecology', name: 'ecology', descr: 'Examining the photo ecology of a prototype family', type: 'diagram', tags: ['Research','Analysis','Design'], tools: ['Illustrator'], pos: {x: 1300, y: 100} }, { title: 'UI Sheet', name: 'uisheet', descr: 'UI Assets for application, arranged onto a spritesheet', type: 'icons', tags: ['Design','Graphics'], tools: ['Photoshop','Illustrator'], pos: {x: 4300, y: 100} }, { title: 'Icons', name: 'icons', descr: 'Series of icons used in product ecology diagrams', type: 'icons', tags: ['Visual design','Production'], tools: ['Illustrator'], pos: {x: 1900, y: 100} }, { title: 'Volume Data', name: 'spatio', descr: 'Analytics visualizing massive dataset trending', type: 'webapp', tags: ['Concept','Visual design','Prototype'], tools: ['Photoshop','3DS Max','VIM','HTML/CSS/Prototype'], pos: {x: 3700, y: 100} }, { title: 'Info Architecture', name: 'ia', descr: 'Wall sized diagram of entire program, actions, and mappings', type: 'diagram', tags: ['Analysis','Mapping','Info Architecture'], tools: ['Visio'], pos: {x: 1380, y: 300} }, { title: 'OLAP Visualizer', name: 'hre', descr: 'Data hypercube in a 3D display', type: 'concept', tags: ['Product concept','Visual design'], tools: ['Photoshop','3DS Max'], pos: {x: 1600, y: 100} }, { title: 'Photo Object', name: 'photoobj', descr: 'Diagram depicting construction and lifecycle of system photo object', type: 'diagram', tags: ['Concept','Design'], tools: ['Powerpoint','Illustrator'], pos: {x: 2800, y: 100} }, { title: 'Ultriva', name: 'ultriva', descr: 'Kanban webapp for supply chain performance', type: 'webapp', tags: ['Info architecture','Visual design','Prototype'], tools: ['Photoshop','VIM','HTML/CSS'], pos: {x: 4600, y: 100} }, { title: 'UpTake', name: 'uptake', descr: 'Travel reviews site product page redesign', type: 'webapp', tags: ['Design','Info architecture'], tools: ['Photoshop'], pos: {x: 4900, y: 100} }, { title: 'Visual Search', name: 'vizsearch', descr: 'Browsing contact cards in a visual search concept', type: 'concept', tags: ['Concept','Visual design'], tools: ['Photoshop'], pos: {x: 5200, y: 100} }, { title: 'Wireframe', name: 'dashwire', descr: 'High fidelity wireframe of reporting framework', type: 'concept', tags: ['Concept','Info architecture'], tools: ['Powerpoint'], pos: {x: 700, y: 100} }, { title: 'MashMobile', name: 'mashmobile', descr: 'A consumer web portal for mobile phone management', type: 'webapp', tags: ['Product management','Visual design','Front end'], tools: ['Photoshop','VIM','HTML/CSS/jQuery','Python/Django'], pos: {x: 2500, y: 100} }, { title: 'Social Graphs', name: 'socnet', descr: 'Visualizing complex social network relationships', type: 'diagram', tags: ['Concept','Design'], tools: ['Powerpoint'], pos: {x: 3400, y: 100} }, { title: 'Sugar', name: 'sugar', descr: 'Product marketing and identity for retail', type: 'design', tags: ['Design','Identity'], tools: ['Photoshop','3DS Max'], pos: {x: 3900, y: 400} }, { title: 'Toolswitch', name: 'toolswitch', descr: 'Owned and operated an online store for exploring PPC optimization', type: 'misc', tags: ['eCommerce','Adwords'], tools: ['Yahoo Store','HTML/CSS','PHP/RTML'], pos: {x: 4000, y: 100} }, { title: 'Mental Ray', name: 'mental', descr: 'Testing out materials and lighting for photorealistic rendering in Mental Ray', type: 'artwork', tags: ['Modeling','Lighting','Shaders','Rendering'], tools: ['3DS Max','Mental Ray'], pos: {x: 2700, y: 300} }, { title: 'Head Rig', name: 'headrig', descr: '3D character model and animation armature', type: 'design', tags: ['Modeling','Rigging','Animation'], tools: ['3DS Max'], pos: {x: 800, y: 350} }, { title: 'Marker Rendering', name: 'marker', descr: 'I am also a classically trained marker artist', type: 'illustration', tags: ['Industrial design','Illustration'], tools: ['Marker','Guache'], pos: {x: 2200, y: 100} }, { title: 'Exploded Assembly', name: 'exploded', descr: 'Exploded assembly diagram of coffee maker', type: 'illustration', tags: ['Drafting','Technical drawing','Inking'], tools: ['Rapidograph Pen'], pos: {x: 450, y: 280} }, { title: 'Train Station', name: 'trains', descr: 'Designa nd marker rendering for futuristic train station', type: 'illustration', tags: ['Design','Rendering'], tools: ['Marker','Guache'], pos: {x: 4200, y: 300} }, { title: 'Camera', name: 'camera', descr: 'Hardware design of video camera', type: 'design', tags: ['Product concept', 'Design', 'Fabrication'], tools: ['PVC', 'Wood', 'Aluminum'], pos: {x: 100, y: 100} }, { title: 'Boots', name: 'boots', descr: 'Boots designed for videogame character', type: 'artwork', tags: ['Design','Modeling','Rendering'], tools: ['3DS Max'], pos: {x: 150, y: 300} } ] FOOTBAR = [ { id: 'technology' }, { id: 'html5', tipText: 'This page lives life on the edge with HTML5, and validates ' + 'with the HTML5 Conformance Checker. All the way down to IE7, no less - ' + 'using a javascript shiv to force element recognition.', url: 'http://en.wikipedia.org/wiki/HTML5' }, { id: 'css3', tipText: 'Selective use of CSS3, applying a subset of styles that decompose well. ' + 'Try Firefox to see rounded everything!', url: 'http://en.wikipedia.org/wiki/HTML5' }, { id: 'jquery', tipText: 'jQuery sure makes life easier! Thank you John Resig and community.', url: 'http://jquery.com' }, { id: 'separator', // will be ignored css: 'separator' }, { id: 'madeusing' }, { id: 'vim', tipText: 'VIM - my text editor of choice. Press a letter, and it shows up on the terminal ... ' + 'and it does some other stuff too ;)', url: 'http://vim.org' }, { id: 'ps', tipText: 'Pushing pixels with Photoshop since 1990-something', url: 'http://www.adobe.com/products/photoshop/family/' }, { id: 'ai', tipText: 'When vector based work is needed, I just reach for Illustrator', url: 'http://www.adobe.com/products/illustrator' }, { id: 'max', tipText: '3D Studio Max is an awesome package for everything 3D', url: 'http://usa.autodesk.com/adsk/servlet/pc/index?id=13567410&siteID=123112' }, { id: 'maya', tipText: 'Maya is better suited for advanced pipeline animation work', url: 'http://usa.autodesk.com/adsk/servlet/pc/index?id=13577897&siteID=123112' }, { id: 'separator', // will be ignored css: 'separator' }, { id: 'testedon' }, { id: 'ie', tipText: 'Works on IE7 and IE8, with slight decomposition. IE6, sorry - nothing personal', url: 'http://www.microsoft.com/windows/internet-explorer/default.aspx' }, { id: 'ff', tipText: 'Firefox is my personal browser of choice. Firefox 3 supports the HTML5 and CSS3 features natively!', url: 'http://www.mozilla.com/en-US/firefox/personal.html' }, { id: 'chrome', tipText: 'The new kid on the block. Chrome still has some rough edges but there is no doubt about the future.', url: 'http://www.google.com/chrome' }, { id: 'safari', tipText: "Honestly, I don't use Safari much, but the HTML5/CSS3 feature support works well ...", url: 'http://www.apple.com/safari/' }, { id: 'opera', tipText: "Opera interop just came along for free. There are some interesting ideas " + "in Opera but the space is just too crowded to pay it much mind.", url: 'http://www.opera.com/' } /* { id: '', tipText: '', url: '' }, { id: '', tipText: '', url: '' }, */ ]