T-Shape Visualization

Developer
Peter Hrynkow
Size
3,883 Kb
Views
26,312
  1. T-Shape Visualization Previews
  2. T-Shape Visualization HTML Codes
  3. T-Shape Visualization CSS Codes
  4. T-Shape Visualization JS Codes

How do I make an t-shape visualization?

Experimenting with a t-shape visualization for my site. What is a t-shape visualization? How do you make a t-shape visualization? This script and codes were developed by Peter Hrynkow on 08 September 2022, Thursday.

T-Shape Visualization Previews
IQ Test

T-Shape Visualization - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>T-Shape Visualization</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="axis axis-y">expertise</div> <div class="axis axis-x"><span class="right">curiosity</span><span class="influence">influences</span></div> <div class="nodes"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

T-Shape Visualization - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
.nodes { position: absolute; width: 100%; height: 100%; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.labels { position: absolute;
}
.label { position: absolute; padding: .5em;
}
.label-curiosity { right: 0; bottom: 0;
}
.label-influence { left: 0; bottom: 0;
}
.label-expertise { left: 0%; width: 100%; text-align: center;
}
.node { position: absolute; left: 50%; top: 100%; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); text-align: center; opacity: 0; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; width: 20px; height: 20px;
}
.node:hover { z-index: 999;
}
.node-shape { position: absolute; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; width: 20px; height: 20px; line-height: 20px; top: -10px; left: -10px; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; cursor: pointer; font-size: .75em; white-space: nowrap;
}
.node-shape:hover { -moz-transform: scale(2); -ms-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); color: #000;
}
.category-tech { background: cornflowerblue;
}
.category-design { background: orange;
}
.category-other { background: teal;
}
.axis { position: absolute; padding: .25em;
}
.axis-x { top: 100%; width: 100%; border-top: 1px solid #ccc;
}
.axis-y { height: 100%; width: 1px; left: 50%; text-align: center; border-left: 1px solid #ccc;
}
.container { position: relative; width: 90%; height: 90%; margin: 2rem auto;
}
.left { float: left;
}
.right { float: right;
}

T-Shape Visualization - Script Codes JS Codes

var nodes = [ {name: "JavaScript", expertise: .85, breadth: .03, category: 'tech'}, {name: "CSS", expertise: .95, breadth: .02, category: 'tech'}, {name: "UI Design", expertise: .9, breadth: -.0, category: 'design'}, {name: "UX Research", expertise: .4, breadth: .12, category: 'design'}, {name: "UX Design", expertise: .75, breadth: .0, category: 'design'}, {name: "IA", expertise: .8, breadth: -.05, category: 'design'}, {name: "Python", expertise: .15, breadth: .2, category: 'tech'}, {name: "PHP", expertise: .8, breadth: .05, category: 'tech'}, {name: "Raspberry Pi", expertise: .2, breadth: .6, category: 'tech'}, {name: "Arduino", expertise: .22, breadth: .42, category: 'tech'}, {name: "Objective-C", expertise: .15, breadth: .5, category: 'tech'}, {name: "SQL", expertise: .75, breadth: -.1, category: 'tech'}, {name: "MongoDB", expertise: .3, breadth: -.1, category: 'tech'}, {name: "Robotics", expertise: .15, breadth: -.2, category: 'tech'}, {name: "3D design", expertise: .6, breadth: .1, category: 'design'}, {name: "Typography", expertise: .7, breadth: -.05, category: 'design'}, {name: "Redis", expertise: .45, breadth: -.1, category: 'tech'}, {name: "Music Production", expertise: .15, breadth: -.9, category: 'other'}, {name: "Industrial Design", expertise: .2, breadth: -.5, category: 'design'}, {name: "Beer", expertise: .1, breadth: .8, category: 'other'}, {name: "Gaming", expertise: .1, breadth: -.8, category: 'other'}, {name: "Architecture", expertise: .1, breadth: -.7, category: 'design'}, {name: "Economics", expertise: .05, breadth: -1, category: 'other'}, {name: "Branding", expertise: .1, breadth: .3, category: 'design'}, {name: "Animation", expertise: .55, breadth: -.05, category: 'tech'}, {name: "Film", expertise: .1, breadth: -.3, category: 'other'}, {name: "3D Printing", expertise: .1, breadth: .6, category: 'tech'}, {name: "Fighter Jets", expertise: .05, breadth: -.45, category: 'other'}, {name: "Home Audio", expertise: .1, breadth: .45, category: 'other'}, ], nodeContainer = document.querySelector('.nodes');
createNodes();
function createNodes() { var i, l = nodes.length, n, nElem, nElemShape; for (i = 0; i < l; i++) { n = nodes[i]; nElem = document.createElement('div'); nElem.className = 'node'; nElem.style.opacity = 0; nElemShape = document.createElement('div'); nElemShape.innerHTML = '&nbsp; &nbsp; &nbsp; &nbsp; ' + n.name; nElemShape.className = 'node-shape category-' + n.category; nElem.appendChild(nElemShape); nodeContainer.appendChild(nElem); nodes[i].elem = nElem; }
}
function animate() { var i, l = nodes.length, n, nElem, x, y, trans; for (i = 0; i < l; i++) { n = nodes[i]; x = Math.round(n.breadth * nodeContainer.offsetWidth / 2); y = - Math.round(.025 + n.expertise * nodeContainer.offsetHeight * .95); transform(n.elem, 'translate(' + x + 'px, ' + y + 'px)'); n.elem.style.transitionDelay = i/16 + 's'; n.elem.style.opacity = 1; }
}
$(window).resize(function () { animate();
});
animate();
function transform (elem, trans) { var style = elem.style; style.webkitTransform = trans; style.MozTransform = trans; style.OTransform = trans; style.msTransform = trans; style.transform = trans; return elem;
};
T-Shape Visualization - Script Codes
T-Shape Visualization - Script Codes
Home Page Home
Developer Peter Hrynkow
Username peterhry
Uploaded September 08, 2022
Rating 4.5
Size 3,883 Kb
Views 26,312
Do you need developer help for T-Shape Visualization?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Peter Hrynkow (peterhry) Script Codes
Name
CSS Animation seeking with JavaScript
Source Order Switching
Holographic Projection
Simple scroll prompt
Word Wrap Algorithm for Multiline Canvas Text
CSS Button with Angled Sides
Cross-browser vertical centering without Javascript and almost no CSS.
Mobile Navigation for Big Phones
3D Message Flipper
Hardward Accelerate Mask Reveal
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!