Create a gist now

Instantly share code, notes, and snippets.

@nstawski /README.md forked from milroc/README.md
Last active Aug 29, 2015

Download ZIP
Raw
README.md

d3.unconf gist.

Raw
index.html
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="utf-5">
<title>Nina Stawski</title>
<meta name="description">
<meta name="author" content="Nina Stawski">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="ns.css">
<script src="ns.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<style>
#content-right {
width: 500px;
}
</style>
<script>
$(document).ready(function () {
createProjectPreviews('content-left');
$('#portfolio').addClass('current').attr('href', '');
$(document).on('click', function() {
$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'});
$('.project-icon').hover(function() {
var id = $(this).attr('id');
$(".btn path").eq(findProjectID(id)).d3Click();
//dimAll();
$('#' + id + ' img').css({'border' : '1px solid grey'});
$('#' + id + ' a').css({'opacity' : '1'});
}, function() {
$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
});
});
$(".project-icon, svg").click(function(e) {
e.stopPropagation();
});
$('.project-icon').hover(function() {
var id = $(this).attr('id');
$(".btn path").eq(findProjectID(id)).d3Click();
//dimAll();
$('#' + id + ' img').css({'border' : '1px solid grey'});
$('#' + id + ' a').css({'opacity' : '1'});
}, function() {
$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
});
});
jQuery.fn.d3Click = function () {
this.each(function (i, e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
e.dispatchEvent(evt);
});
};
</script>
</head>
<body>
<div id="main-content">
<div id="content-left" style="max-width: 600px; padding-top: 10px; float: left;"></div>
<div id="content-circle-right">
<script>
var matrix = returnMatrix();
</script>
<script>
var chord = d3.layout.chord()
.padding(0.1)
.matrix(matrix);
var width = 326,
height = 360,
innerRadius = Math.min(width, height) * .21,
outerRadius = innerRadius * 1.4;
var fill = d3.scale.ordinal()
.domain(d3.range(4))
.range(["#5958A1", "#5958A1", "#996699", "#996699", "#996699", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#5958A1", "#996699", "#813742"]);
var svg = d3.select("#content-circle-right").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2.18 + "," + height / 2.01 + ")");
svg.append("g")
.attr("class", "btn")
.selectAll("path")
.data(chord.groups)
.enter().append("path")
.style("fill", function(d) { return fill(d.index); })
.style("stroke", function(d) { return fill(d.index); })
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
.on("click", selectElement())
var ticks = svg.append("g").selectAll("g")
.data(chord.groups)
.enter().append("g").selectAll("g")
.data(groupTicks)
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + outerRadius + ",0)";
});
// ticks.append("line")
// .attr("x1", 1)
// .attr("y1", 0)
// .attr("x2", 5)
// .attr("y2", 0)
// .style("stroke", "#999");
ticks.append("text")
.attr("x", 8)
.attr("dy", ".3em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return d.label; });
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 1);
// Returns an array of tick angles and labels, given a group.
function groupTicks(d) {
var k = (d.endAngle - d.startAngle) / d.value;
var labels = ['Illustrator', 'Photoshop', 'Wireframing', 'Prototyping', 'OmniGraffle', 'Python', 'Javascript', 'jQuery', 'jQueryUI', 'jQueryMobile', 'HTML5', 'CSS3', 'Bootstrap', 'GIT', 'jsPlumb', 'PHP', 'Design', 'UX/UI', 'Programming'
];
return d3.range(0, d.value, 1000).map(function(v, i) {
return {
angle: k*0.5 + d.startAngle,
label: labels[d.index]
};
});
}
// Returns an event handler for fading a given chord group.
function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.duration(100)
.style("opacity", opacity);
};
}
function selectElement() {
return function(g, i) {
var indexes = [];
makeSelection(svg.selectAll(".chord path"), indexes);
selectOther($("g text"), indexes);
selectOther($(".btn path"), indexes);
return false
function makeSelection(selection, indexes) {
if ($('.project-icon:hover').length == 0) { highlightElements(i); $('.project-icon').unbind('mouseenter mouseleave'); };
indexes.push(i);
selection
.filter(function(d) { return d.source.index != i && d.target.index != i; })
.transition()
.duration(100)
.style("opacity", 0.1);
selection
.filter(function(d) {
if (d.target.index == i) {
indexes.push(d.source.index)
} else if (d.source.index == i && indexes.indexOf(d.target.index) == -1) {
indexes.push(d.target.index)
}; return d.source.index == i || d.target.index == i; })
.transition()
.duration(100)
.style("opacity", 1);
}
function selectOther(selection, indexes) {
selection
.each(function(d){
if (indexes.indexOf(d) == -1) {
$(this)
.css({"opacity" : 0.4, "font-weight" : "normal"});
}
else {
$(this)
.css({"opacity" : 1, "font-weight" : "bold"});
}
})
}
}
}
</script>
</div>
<div id="content-bottom"></div>
</div>
<div id="footer"><img src="http://ninastawski.com/ns.png"></div>
</body>
Raw
ns.css
body {
margin: 20px auto;
text-align: center;
width: 894px;
background: ghostwhite;
}
a {
color: #000;
/* text-decoration: none;*/
}
#footer {
width:100%;
height: 100%;
clear: both;
}
#footer img {
float: right;
margin-top: 50px;
margin-bottom: 40px;
}
a:hover {
background-image: url(http://ninastawski.com/img/bg.png);
text-decoration: none;
}
.current {
font-weight: bold;
color: #b6001b;
}
.name {
display: inline;
font-size: large;
padding: 0 4px;
background-image: url(http://ninastawski.com/img/bg.png);
}
.firstline {
font-size: x-large;
padding-top: 16px;
padding-bottom: 10px;
}
#container {
width: 80%;
padding: 0;
margin: 0;
display: block;
}
#home {
text-decoration: none;
font-size: x-large;
margin: 0;
padding: 5px 20px;
}
#logos {
float: right;
padding: 10px;
}
p {
padding: 8px 0;
margin: 0;
/*width: 80%;*/
}
/*#lefty {*/
/*float: left;*/
/*display: inline;*/
/*max-width: 600px;*/
/*}*/
#header {
width: 100%;
height: 70px;
padding-top: 15px;
padding-bottom: 0;
}
#logo {
float: left;
}
#social-icons {
float: right;
margin-top: 7px;
}
#social-icons a {
margin: 11px 0 0 5px;
}
.divider {
height: 1px;
background: #ccc;
}
#main-navigation {
float: right;
display: inline;
margin-top: -17px;
padding-right: 20px;
padding-bottom: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#main-navigation ul {
overflow: hidden;
width: auto;
list-style: none;
margin: 0;
padding: 0;
}
#main-navigation li {
float: left;
font-size: large;
margin: 0;
padding: 3px 10px;
background: white;
border: 1px solid #ccc;
border-radius: 50px;
margin-left: 10px;
}
#main-navigation li a {
display: block;
/*color: #000;*/
text-decoration: none;
}
#main-navigation a {
/*background: #fff; */
}
/*.rotate:hover {*/
/*background-image: url(../img/bg.png);*/
/*}*/
#main-content {
margin-top: 20px;
font-size: large;
text-align: left;
}
#content-left {
float: left;
display: inline;
max-width: 500px; /*580*/
}
#content-right {
float: right;
display: inline;
margin-right: -30px;
margin-top: 10px;
}
/* ~~~~~~~~~ twitter ~~~~~~~~~~ */
#sidebar-title {
font-size: x-large;
font-weight: normal;
padding: 0;
padding-top: 5px;
margin: 0;
}
#twitter_update_list li {
list-style-type: none;
padding-bottom: 6px;
padding-top: 6px;
}
#twitter_update_list {
padding: 0;
font-size: small;
}
#twitter-link {
padding: 0;
margin: 0;
}
/* ~~~~~~~~~ aside ~~~~~~~~~~ */
aside {
display: inline;
float: left;
width: 250px;
border: 1px solid black;
padding: 10px 18px 10px 20px;
margin-top: 3px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
-ms-border-radius:12px;
-o-border-radius:12px;
border-radius:12px;
border-right: 3px solid black;
border-bottom: 3px solid black;
}
aside a {
color: #000;
text-decoration: none;
text-align: left;
}
/*aside a:hover {*/
/*background-image: url(../img/bg.png);*/
/*}*/
#logos li {
float: right;
padding: 0 5px;
margin: 0;
list-style-type: none;
}
#pic {
padding-left: 2px;
float:right;
}
.pics {
height: 125px;
padding-left: 10px;
padding-top: 60px;
right: auto;
overflow: hidden;
z-index: 1;
max-width: 880px;
}
.pics img {
width: 100px;
padding: 0 2px;
}
.rotate{
/*transform*/
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
transform:rotate(-8deg);
border-bottom: 3px black solid;
border-right: 1px black solid;
/* border-top: 1px black solid;*/
/* border-left: 1px black solid;*/
padding: 2px 8px;
margin: 2px;
border-radius: 30px;
}
.chord path {
fill-opacity: .67;
stroke: #000;
stroke-width: .5px;
}
.project-icon {
display: inline-block;
float: left;
width: 255px;
height: 170px;
margin: 15px 60px 20px 0;
}
.grey {
background: grey;
}
.project-icon img {
border: 1px solid #ccc;
}
#content-circle {
font: 13px sans-serif;
margin-left: -32px;
margin-top: 40px;
/*margin-right: -23px;*/
display: inline-block;
/*width: 400px;*/
height: 378px;
float: left;
}
#content-circle-right {
font: 13px sans-serif;
margin-right: -32px;
margin-top: 10px;
display: inline;
height: 378px;
float: right;
z-index: 1000;
}
#content-bottom {
width: 100%;
clear: both;
text-align: center;
}
Raw
ns.js
/**
* Author: Nina Stawski, me@ninastawski.com
* Date: 5/27/13
* Time: 8:57 PM
*/
function createProjectPreviews(element) {
var projects = ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"];
for (var project in projects) {
var el = '<div class="project-icon" id="' + projects[project] + '"><a href="http://ninastawski.com/' + projects[project] + '.html' + '"><img src="http://ninastawski.com/img/projects/ns-' + projects[project] + '.png"/></a><div>';
if (project <=3) {
$('#' + element).append(el);
}
else {
$('#content-bottom').append(el)
}
}
$('#' + element +' .project-icon:nth-child(2n)').css({'margin-right' : '0'});
$('#content-bottom .project-icon:nth-child(3n)').css({'margin-right' : '0'});
}
function findProjectID(projectName) {
var names = {
"uxui" : 17,
"prpr" : 18,
"frog" : 18,
"olix" : 17,
"sfsu" : 16,
"olpc" : 16,
"tsla" : 17,
"dots" : 16,
"grph" : 16
}
return names[projectName]
}
function getProjectPictures(projectName) {
var num_pictures = {"prpr" : 7, "sfsu" : 5, "dots" : 3, "olpc" : 4, "uxui" : 3, "tsla" : 4, "grph" : 5, "frog" : 1, "olix" : 2};
var pictures = '';
for (var counter = 1; counter < num_pictures[projectName] + 1; counter++) {
var source = 'http://ninastawski.com/img/' + projectName + '/' + projectName + '-0' + counter + '.png';
pictures += '<img src="' + source + '" style="border: 1px solid #ccc; margin: 30px auto;" />';
}
return pictures
}
function highlightElements(index) {
var elementGroups = {
0 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph"], //Illustrator
1 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"], //Photoshop
2 : ["uxui", "prpr", "olpc", "tsla" ], //Wireframing
3 : ["uxui", "prpr", "tsla", "olix" ], //Prototyping
4 : ["uxui", "prpr", "tsla" ], //OmniGraffle
5 : ["prpr"], //Python
6 : ["prpr", "frog"], //Javascript
7 : ["prpr"], //jQuery
8 : ["prpr"], //jQueryUI
9 : [], //jQueryMobile
10 : ["prpr", "frog"], //HTML5
11 : ["prpr", "frog"], //CSS3
12 : ["prpr"], //Bootstrap
13 : ["prpr"], //GIT
14 : ["prpr"], //jsPlumb
15 : [], //PHP
16 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "olix"], //Design
17 : ["uxui", "prpr", "tsla", "olix"], //UX/UI
18 : ["prpr", "frog"] //Programming
};
dimAll();
for (var num in elementGroups[index]) {
var project = elementGroups[index][num];
$('#' + project + ' img').css({'border' : '1px solid grey'});
$('#' + project + ' a').css({'opacity' : '1'});
}
}
function dimAll() {
$('.project-icon img').each(function() {
$(this).css({'border' : '1px solid #ccc'});
$(this).parent().css({'opacity' : '0.2'});
});
}
function returnMatrix() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
];
}
function returnMatrixPrpr() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
[0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0, 0.3], //UX/UI
[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
];
}
function returnMatrixSfsu() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
[0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3], //UX/UI
[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
];
}
function returnMatrixUxui() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
];
// return [
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
// [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
// [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
// [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
// [0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0.3], //UX/UI
// [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
// ];
}
function returnMatrixTsla() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
];
}
function returnMatrixFrog() {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
[0, 0, 0, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Prototyping
[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Python
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
[0, 0, 0, 0.5, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQuery
[0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryUI
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0], //Bootstrap
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0], //jsPlumb
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
[0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
[0, 0, 0.4, 0.4, 0.4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.4, 0, 0], //UX/UI
[0, 0.15, 0, 0, 0, 0, 0.15, 0, 0, 0, 0.15, 0.15, 0, 0.15, 0, 0, 0, 0, 0] //Programming
];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment