Radar chart visualization of skills in the bellingham.design community.
Based on blocks from nbremer and alandunning.
-
-
Save almccon/9c1bc27fc45c89dbe8e6d3351283e951 to your computer and use it in GitHub Desktop.
Bellingham.design Radar Chart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 650 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| [ | |
| {"area": "Central ", "value": 80}, | |
| {"area": "Kirkdale", "value": 40}, | |
| {"area": "Kensington ", "value": 40}, | |
| {"area": "Everton ", "value": 90}, | |
| {"area": "Picton ", "value": 60}, | |
| {"area": "Riverside ", "value": 80} | |
| ] | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| </head> | |
| <style> | |
| body { | |
| background-color: #F1F3F3 | |
| } | |
| .axis { | |
| font: 15px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #D4D8DA; | |
| stroke-width: 2px; | |
| shape-rendering: crispEdges; | |
| } | |
| #chart1 { | |
| position: absolute; | |
| top: 50px; | |
| left: 50px; | |
| } | |
| #chart2 { | |
| position: absolute; | |
| top: 50px; | |
| left: 400px; | |
| } | |
| #label1 { | |
| font: 15px sans-serif; | |
| position: absolute; | |
| top: 400px; | |
| left: 250px; | |
| } | |
| #label2 { | |
| font: 15px sans-serif; | |
| position: absolute; | |
| top: 400px; | |
| left: 600px; | |
| } | |
| .toolTip { | |
| font: 15px sans-serif; | |
| pointer-events: none; | |
| position: absolute; | |
| display: none; | |
| min-width: 50px; | |
| height: auto; | |
| background: none repeat scroll 0 0 #ffffff; | |
| padding: 9px 14px 6px 14px; | |
| border-radius: 2px; | |
| text-align: center; | |
| line-height: 1.3; | |
| color: #5B6770; | |
| box-shadow: 0px 3px 9px rgba(0, 0, 0, .15); | |
| } | |
| .toolTip span { | |
| font-weight: 500; | |
| color: #081F2C; | |
| } | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-queue.v3.min.js"></script> | |
| <script src="RadarChart.js"></script> | |
| <div id="chart1"></div> | |
| <div id="chart2"></div> | |
| <div id="label1">Skill level</div> | |
| <div id="label2">Skill interest</div> | |
| <script> | |
| var width = 300, | |
| height = 300; | |
| // Config for the Radar chart | |
| var config = { | |
| w: width, | |
| h: height, | |
| radius: 5, | |
| dotOpacityArea: 0.001, | |
| dotOpacityStroke: 0, | |
| opacityArea: 0.1, | |
| opacityStroke: 0.2, | |
| maxValue: 10, | |
| levels: 5, | |
| ExtraWidthX: 300 | |
| } | |
| d3.queue() | |
| .defer(d3.csv,"survey_results_skill_level.csv") | |
| .defer(d3.csv,"survey_results_skill_interest.csv") | |
| .awaitAll(function(error, data) { | |
| //d3.json("data.json", function(error, data) { | |
| if (error) throw error; | |
| var dataJson1 = []; | |
| data[0].forEach((row) => { | |
| console.log(row); | |
| var record = []; | |
| d3.keys(row).forEach((key) => { | |
| if (key != 'id') { | |
| record.push({ | |
| "axis": key, | |
| "value": +row[key] | |
| }); | |
| } | |
| }); | |
| dataJson1.push(record); | |
| }); | |
| console.log(dataJson1); | |
| var dataJson2 = []; | |
| data[1].forEach((row) => { | |
| console.log(row); | |
| var record = []; | |
| d3.keys(row).forEach((key) => { | |
| if (key != 'id') { | |
| record.push({ | |
| "axis": key, | |
| "value": +row[key] | |
| }); | |
| } | |
| }); | |
| dataJson2.push(record); | |
| }); | |
| console.log(dataJson2); | |
| //Call function to draw the Radar chart | |
| RadarChart.draw("#chart1", dataJson1, config); | |
| RadarChart.draw("#chart2", dataJson2, config); | |
| }); | |
| var svg = d3.select('body') | |
| .selectAll('svg') | |
| .append('svg') | |
| .attr("width", width) | |
| .attr("height", height); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var RadarChart = { | |
| draw: function(id, d, options){ | |
| var cfg = { | |
| radius: 5, | |
| w: 600, | |
| h: 600, | |
| factor: 1, | |
| factorLegend: .85, | |
| levels: 3, | |
| maxValue: 100, | |
| radians: 2 * Math.PI, | |
| dotOpacityArea: 1, | |
| dotOpacityStroke: 1, | |
| opacityArea: 0.5, | |
| opacityStroke: 0.8, | |
| ToRight: 5, | |
| TranslateX: 80, | |
| TranslateY: 30, | |
| ExtraWidthX: 100, | |
| ExtraWidthY: 100, | |
| color: d3.scaleOrdinal().range(["#6F257F", "#CA0D59"]) | |
| }; | |
| if('undefined' !== typeof options){ | |
| for(var i in options){ | |
| if('undefined' !== typeof options[i]){ | |
| cfg[i] = options[i]; | |
| } | |
| } | |
| } | |
| var allAxis = (d[0].map(function(i, j){return i.axis})); | |
| var total = allAxis.length; | |
| var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); | |
| var Format = d3.format('%'); | |
| d3.select(id).select("svg").remove(); | |
| var g = d3.select(id) | |
| .append("svg") | |
| .attr("width", cfg.w+cfg.ExtraWidthX) | |
| .attr("height", cfg.h+cfg.ExtraWidthY) | |
| .append("g") | |
| .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")"); | |
| var tooltip; | |
| /* | |
| //Circular segments | |
| for(var j=0; j<cfg.levels; j++){ | |
| var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); | |
| g.selectAll(".levels") | |
| .data(allAxis) | |
| .enter() | |
| .append("svg:line") | |
| .attr("x1", function(d, i){return levelFactor*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) | |
| .attr("y1", function(d, i){return levelFactor*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) | |
| .attr("x2", function(d, i){return levelFactor*(1-cfg.factor*Math.sin((i+1)*cfg.radians/total));}) | |
| .attr("y2", function(d, i){return levelFactor*(1-cfg.factor*Math.cos((i+1)*cfg.radians/total));}) | |
| .attr("class", "line") | |
| .style("stroke", "grey") | |
| .style("stroke-opacity", "0.75") | |
| .style("stroke-width", "0.3px") | |
| .attr("transform", "translate(" + (cfg.w/2-levelFactor) + ", " + (cfg.h/2-levelFactor) + ")"); | |
| } | |
| //Text indicating at what % each level is | |
| for(var j=0; j<cfg.levels; j++){ | |
| var levelFactor = cfg.factor*radius*((j+1)/cfg.levels); | |
| g.selectAll(".levels") | |
| .data([1]) //dummy data | |
| .enter() | |
| .append("svg:text") | |
| .attr("x", function(d){return levelFactor*(1-cfg.factor*Math.sin(0));}) | |
| .attr("y", function(d){return levelFactor*(1-cfg.factor*Math.cos(0));}) | |
| .attr("class", "legend") | |
| .style("font-family", "sans-serif") | |
| .style("font-size", "10px") | |
| .attr("transform", "translate(" + (cfg.w/2-levelFactor + cfg.ToRight) + ", " + (cfg.h/2-levelFactor) + ")") | |
| .attr("fill", "#737373") | |
| .text((j+1)*cfg.maxValue/cfg.levels); | |
| } | |
| */ | |
| series = 0; | |
| /* | |
| var axis = g.selectAll(".axis") | |
| .data(allAxis) | |
| .enter() | |
| .append("g") | |
| .attr("class", "axis"); | |
| axis.append("line") | |
| .attr("x1", cfg.w/2) | |
| .attr("y1", cfg.h/2) | |
| .attr("x2", function(d, i){return cfg.w/2*(1-cfg.factor*Math.sin(i*cfg.radians/total));}) | |
| .attr("y2", function(d, i){return cfg.h/2*(1-cfg.factor*Math.cos(i*cfg.radians/total));}) | |
| .attr("class", "line") | |
| .style("stroke", "grey") | |
| .style("stroke-width", "1px"); | |
| /* | |
| axis.append("text") | |
| .attr("class", "legend") | |
| .text(function(d){return d}) | |
| .style("font-family", "sans-serif") | |
| .style("font-size", "11px") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", "1.5em") | |
| .attr("transform", function(d, i){return "translate(0, -10)"}) | |
| .attr("x", function(d, i){return cfg.w/2*(1-cfg.factorLegend*Math.sin(i*cfg.radians/total))-60*Math.sin(i*cfg.radians/total);}) | |
| .attr("y", function(d, i){return cfg.h/2*(1-Math.cos(i*cfg.radians/total))-20*Math.cos(i*cfg.radians/total);}); | |
| */ | |
| d.forEach(function(y, x){ | |
| dataValues = []; | |
| g.selectAll(".nodes") | |
| .data(y, function(j, i){ | |
| dataValues.push([ | |
| cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), | |
| cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) | |
| ]); | |
| }); | |
| dataValues.push(dataValues[0]); | |
| g.selectAll(".area") | |
| .data([dataValues]) | |
| .enter() | |
| .append("polygon") | |
| .attr("class", "radar-chart-serie"+series) | |
| .style("stroke-width", "2px") | |
| .style("stroke-opacity", cfg.opacityStroke) | |
| .style("stroke", cfg.color(series)) | |
| .attr("points",function(d) { | |
| var str=""; | |
| for(var pti=0;pti<d.length;pti++){ | |
| str=str+d[pti][0]+","+d[pti][1]+" "; | |
| } | |
| return str; | |
| }) | |
| .style("fill", function(j, i){return cfg.color(series)}) | |
| .style("fill-opacity", cfg.opacityArea) | |
| .on('mouseover', function (d){ | |
| z = "polygon."+d3.select(this).attr("class"); | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", 0.1); | |
| g.selectAll(z) | |
| .transition(200) | |
| .style("fill-opacity", .7); | |
| }) | |
| .on('mouseout', function(){ | |
| g.selectAll("polygon") | |
| .transition(200) | |
| .style("fill-opacity", cfg.opacityArea); | |
| }); | |
| series++; | |
| }); | |
| series=0; | |
| var tooltip = d3.select("body").append("div").attr("class", "toolTip"); | |
| d.forEach(function(y, x){ | |
| g.selectAll(".nodes") | |
| .data(y).enter() | |
| .append("svg:circle") | |
| .attr("class", "radar-chart-serie"+series) | |
| .attr('r', cfg.radius) | |
| .attr("alt", function(j){return Math.max(j.value, 0)}) | |
| .attr("cx", function(j, i){ | |
| dataValues.push([ | |
| cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)), | |
| cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)) | |
| ]); | |
| return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)); | |
| }) | |
| .attr("cy", function(j, i){ | |
| return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total)); | |
| }) | |
| .attr("data-id", function(j){return j.axis}) | |
| .style("fill", "#fff") | |
| .style("stroke-width", "2px") | |
| .style("stroke", cfg.color(series)) | |
| .style("fill-opacity", cfg.dotOpacityArea) | |
| .style("stroke-opacity", cfg.dotOpacityStroke) | |
| .on('mouseover', function (d){ | |
| console.log(d.axis) | |
| tooltip | |
| .style("left", d3.event.pageX - 40 + "px") | |
| .style("top", d3.event.pageY - 80 + "px") | |
| .style("display", "inline-block") | |
| .html((d.axis) + "<br><span>" + (d.value) + "</span>"); | |
| }) | |
| .on("mouseout", function(d){ tooltip.style("display", "none");}); | |
| series++; | |
| }); | |
| } | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| id | ethnography and discovery—user goals, motivations, and work patterns | user modeling—persona and scenario creation; role-playing | product design—product-level interaction principles and concepts | interaction design—function-level interaction principles and concepts | interface design—component-level interaction principles and concepts | information architecture and information design—content structure and presentation principles | project management | time management | stakeholder or client management | basic business writing—letters, email messages, meeting notes, and summaries | rhetoric and persuasive writing | expository writing and composition | technical writing | public speaking and presenting | visual communication | mediation and facilitation | active listening | team-building | collaboration | understanding of bit-depth, pixel-density, and resolution issues | managing color palettes | icon design and pixel-level design | graphic user interface (GUI) screen layout and composition | page layout and composition | animation | sound design | prototyping—paper, Visual Basic, HTML/CSS, Director, Flash, or other methods | knowledge of file formats and tradeoffs | understanding of basic computer programming principles, tools, and technologies | GUI development principles, tools, and technologies | database principles, tools, and technologies | understanding of software and hardware development processes—specification, coding, and testing | knowledge of existing and new technologies and constraints | knowledge of mechanical engineering and manufacturing—for hardware devices | knowledge of usability testing principles and methods | knowledge of principles of cognitive psychology | Wireframing / low / medium fidelity (Visio or OmniGraffle) | High Fidelity (Sketch, Adobe Creative Suite) | empathy | passion | humor | skepticism | analytical thinking | ability to synthesize information and identify salient points | ability to visualize solutions—before they are built | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |
| 2 | 4 | 7 | 5 | 7 | 7 | 8 | 8 | 8 | 6 | 3 | 3 | 2 | 3 | 3 | 2 | 5 | 3 | 6 | 7 | 2 | 4 | 2 | 6 | 5 | 3 | 1 | 4 | 3 | 7 | 5 | 7 | 8 | 5 | 1 | 7 | 6 | 4 | 4 | 7 | 5 | 6 | 3 | 3 | 4 | 3 | |
| 3 | 4 | 3 | 5 | 4 | 7 | 5 | 5 | 7 | 8 | 8 | 7 | 5 | 4 | 8 | 7 | 5 | 6 | 5 | 6 | 7 | 7 | 6 | 4 | 4 | 7 | 6 | 7 | 6 | 5 | 5 | 7 | 7 | 6 | 7 | 6 | 7 | 5 | 8 | 5 | 5 | 7 | 8 | 4 | 4 | 5 | |
| 4 | 7 | 5 | 3 | 7 | 9 | 5 | 6 | 6 | 2 | 3 | 2 | 2 | 2 | 6 | 6 | 3 | 2 | 2 | 2 | 5 | 7 | 8 | 8 | 8 | 10 | 6 | 8 | 5 | 7 | 7 | 4 | 2 | 4 | 2 | 7 | 4 | 8 | 9 | 3 | 8 | 5 | 5 | 8 | 8 | 5 | |
| 5 | 8 | 8 | 10 | 10 | 10 | 10 | 5 | 6 | 9 | 4 | 7 | 7 | 7 | 7 | 7 | 9 | 4 | 5 | 7 | 3 | 6 | 6 | 10 | 10 | 10 | 1 | 10 | 1 | 5 | 7 | 1 | 3 | 10 | 1 | 10 | 10 | 10 | 10 | 7 | 7 | 7 | 7 | 10 | 10 | 10 | |
| 6 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 3 | 3 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 3 | 3 | 3 | 1 | 3 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 3 | 1 | 1 | 3 | 1 | 1 | 1 | 1 | |
| 7 | 5 | 6 | 7 | 3 | 3 | 5 | 5 | 4 | 6 | 3 | 3 | 4 | 5 | 4 | 3 | 3 | 2 | 2 | 2 | 7 | 8 | 8 | 8 | 8 | 9 | 7 | 4 | 6 | 7 | 8 | 5 | 5 | 4 | 3 | 6 | 6 | 5 | 7 | 5 | 4 | 4 | 4 | 7 | 8 | 4 | |
| 8 | 10 | 10 | 10 | 7 | 7 | 8 | 6 | 4 | 7 | 4 | 6 | 6 | 2 | 7 | 8 | 7 | 6 | 2 | 6 | 4 | 4 | 4 | 4 | 4 | 2 | 1 | 6 | 1 | 6 | 7 | 7 | 7 | 6 | 1 | 10 | 10 | 6 | 6 | 8 | 8 | 8 | 8 | 8 | 9 | 9 | |
| 9 | 5 | 5 | 10 | 10 | 10 | 10 | 6 | 6 | 8 | 5 | 7 | 7 | 8 | 7 | 8 | 7 | 8 | 10 | 10 | 7 | 8 | 8 | 8 | 8 | 5 | 6 | 8 | 6 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 6 | 3 | 10 | 10 | 10 | 4 | 6 | 10 | 10 | |
| 10 | 8 | 4 | 1 | 7 | 7 | 9 | 6 | 10 | 4 | 1 | 1 | 1 | 1 | 1 | 6 | 7 | 1 | 5 | 5 | 2 | 3 | 1 | 4 | 8 | 1 | 1 | 1 | 5 | 1 | 1 | 3 | 1 | 2 | 1 | 9 | 9 | 1 | 1 | 1 | 9 | 2 | 1 | 6 | 6 | 7 | |
| 11 | 3 | 2 | 4 | 4 | 3 | 6 | 5 | 6 | 6 | 3 | 2 | 2 | 1 | 3 | 7 | 2 | 7 | 5 | 8 | 4 | 6 | 6 | 6 | 8 | 5 | 2 | 4 | 3 | 2 | 4 | 2 | 4 | 6 | 1 | 6 | 5 | 2 | 6 | 5 | 5 | 5 | 1 | 4 | 5 | 6 | |
| 12 | 6 | 8 | 8 | 8 | 8 | 8 | 6 | 6 | 4 | 1 | 5 | 5 | 5 | 8 | 10 | 5 | 1 | 5 | 5 | 10 | 8 | 8 | 8 | 9 | 1 | 1 | 10 | 8 | 1 | 8 | 8 | 10 | 10 | 10 | 9 | 10 | 8 | 8 | 1 | 1 | 10 | 1 | 1 | 1 | 1 | |
| 13 | 5 | 4 | 6 | 6 | 8 | 5 | 2 | 2 | 3 | 1 | 2 | 2 | 2 | 1 | 2 | 2 | 2 | 2 | 2 | 7 | 7 | 8 | 9 | 8 | 7 | 6 | 7 | 7 | 5 | 9 | 3 | 6 | 7 | 1 | 6 | 6 | 3 | 7 | 5 | 2 | 3 | 1 | 5 | 3 | 4 | |
| 14 | 6 | 4 | 10 | 5 | 10 | 4 | 10 | 7 | 5 | 1 | 6 | 6 | 1 | 1 | 8 | 8 | 5 | 5 | 1 | 8 | 10 | 6 | 8 | 8 | 6 | 8 | 8 | 4 | 1 | 7 | 5 | 1 | 2 | 3 | 10 | 10 | 7 | 5 | 10 | 10 | 10 | 1 | 1 | 10 | 10 | |
| 15 | 6 | 6 | 7 | 7 | 7 | 6 | 7 | 7 | 7 | 6 | 6 | 6 | 6 | 6 | 8 | 7 | 6 | 7 | 7 | 7 | 8 | 8 | 8 | 8 | 8 | 8 | 7 | 7 | 10 | 8 | 7 | 7 | 7 | 7 | 7 | 7 | 7 | 10 | 7 | 7 | 7 | 6 | 9 | 8 | 8 | |
| 16 | 4 | 3 | 7 | 8 | 7 | 8 | 3 | 3 | 4 | 4 | 5 | 5 | 4 | 3 | 7 | 4 | 5 | 5 | 5 | 9 | 9 | 9 | 9 | 9 | 8 | 5 | 5 | 4 | 7 | 9 | 9 | 9 | 8 | 8 | 8 | 6 | 6 | 6 | 5 | 8 | 5 | 5 | 7 | 7 | 10 | |
| 17 | 7 | 7 | 4 | 4 | 8 | 9 | 4 | 6 | 6 | 7 | 7 | 7 | 7 | 7 | 5 | 5 | 5 | 5 | 5 | 6 | 6 | 7 | 7 | 7 | 3 | 3 | 7 | 7 | 3 | 7 | 3 | 6 | 6 | 3 | 8 | 8 | 7 | 7 | 5 | 5 | 5 | 5 | 5 | 7 | 7 | |
| 18 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | |
| 19 | 5 | 4 | 6 | 8 | 10 | 10 | 6 | 9 | 4 | 4 | 3 | 6 | 3 | 6 | 10 | 5 | 9 | 5 | 10 | 10 | 10 | 10 | 10 | 10 | 6 | 3 | 8 | 9 | 10 | 8 | 6 | 4 | 6 | 3 | 7 | 8 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| id | ethnography and discovery—user goals, motivations, and work patterns | user modeling—persona and scenario creation; role-playing | product design—product-level interaction principles and concepts | interaction design—function-level interaction principles and concepts | interface design—component-level interaction principles and concepts | information architecture and information design—content structure and presentation principles | project management | time management | stakeholder or client management | basic business writing—letters, email messages, meeting notes, and summaries | rhetoric and persuasive writing | expository writing and composition | technical writing | public speaking and presenting | visual communication | mediation and facilitation | active listening | team-building | collaboration | knowledge of usability testing principles and methods | knowledge of principles of cognitive psychology | understanding of bit-depth, pixel-density, and resolution issues | managing color palettes | icon design and pixel-level design | graphic user interface (GUI) screen layout and composition | page layout and composition | animation | sound design | prototyping—paper, Visual Basic, HTML/CSS, Director, Flash, or other methods | knowledge of file formats and tradeoffs | understanding of basic computer programming principles, tools, and technologies | GUI development principles, tools, and technologies | database principles, tools, and technologies | understanding of software and hardware development processes—specification, coding, and testing | knowledge of existing and new technologies and constraints | knowledge of mechanical engineering and manufacturing—for hardware devices | Wireframing / low / medium fidelity (Visio or OmniGraffle) | High Fidelity (Sketch, Adobe Creative Suite) | empathy | passion | humor | skepticism | analytical thinking | ability to synthesize information and identify salient points | ability to visualize solutions—before they are built | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 8 | 0 | 0 | 0 | 0 | 0 | 8 | 8 | 8 | 10 | 10 | 10 | 0 | 8 | 8 | 8 | 8 | 8 | 8 | 0 | 0 | 6 | 6 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 6 | 8 | 8 | 0 | 0 | 8 | 6 | 6 | |
| 2 | 6 | 4 | 6 | 6 | 6 | 6 | 6 | 6 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 6 | 6 | 6 | 8 | 4 | 6 | 8 | 4 | 4 | 6 | 6 | 4 | 2 | 6 | 8 | 8 | 6 | 8 | 4 | 8 | 2 | 4 | 8 | 6 | 8 | 6 | 8 | 10 | 8 | 10 | |
| 3 | 8 | 8 | 6 | 8 | 6 | 6 | 8 | 4 | 6 | 6 | 4 | 6 | 8 | 6 | 8 | 6 | 6 | 6 | 6 | 8 | 6 | 4 | 4 | 4 | 8 | 6 | 2 | 2 | 8 | 4 | 8 | 8 | 4 | 6 | 6 | 2 | 8 | 8 | 8 | 8 | 6 | 4 | 8 | 8 | 8 | |
| 4 | 4 | 4 | 2 | 2 | 2 | 4 | 6 | 6 | 2 | 4 | 6 | 2 | 2 | 6 | 6 | 6 | 8 | 4 | 6 | 2 | 2 | 2 | 2 | 4 | 2 | 6 | 4 | 2 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 6 | 8 | 8 | 6 | 4 | 6 | 8 | 6 | |
| 5 | 8 | 6 | 8 | 8 | 8 | 8 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | 8 | 6 | 6 | 6 | 2 | 6 | 6 | 8 | 8 | 8 | 4 | 0 | 6 | 8 | 2 | 6 | 2 | 2 | 4 | 0 | 8 | 8 | 6 | 8 | 6 | 6 | 8 | 8 | 8 | |
| 6 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 10 | 8 | 6 | 10 | 8 | 10 | 10 | 8 | 8 | 6 | 4 | 2 | 4 | 4 | 2 | 2 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 2 | 10 | 8 | 8 | 10 | 10 | 10 | 10 | 10 | 10 | |
| 7 | 4 | 4 | 6 | 2 | 2 | 4 | 6 | 8 | 4 | 6 | 4 | 6 | 4 | 6 | 6 | 4 | 6 | 6 | 8 | 2 | 2 | 2 | 6 | 2 | 2 | 4 | 6 | 2 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 6 | 8 | 8 | 10 | 6 | 6 | 6 | 8 | |
| 8 | 6 | 6 | 6 | 6 | 8 | 8 | 6 | 6 | 6 | 8 | 4 | 4 | 4 | 4 | 6 | 4 | 6 | 6 | 8 | 4 | 2 | 8 | 8 | 8 | 8 | 8 | 2 | 2 | 8 | 8 | 8 | 8 | 2 | 4 | 6 | 2 | 8 | 8 | 6 | 6 | 6 | 6 | 6 | 6 | 6 | |
| 9 | 4 | 6 | 4 | 4 | 4 | 4 | 6 | 6 | 6 | 6 | 6 | 6 | 4 | 8 | 6 | 4 | 4 | 4 | 8 | 6 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 4 | 2 | 4 | 2 | 4 | 4 | 4 | 2 | 4 | 2 | 4 | 6 | 8 | 10 | 8 | 6 | 6 | |
| 10 | 2 | 2 | 2 | 2 | 2 | 6 | 6 | 6 | 8 | 10 | 10 | 8 | 8 | 6 | 6 | 4 | 8 | 6 | 6 | 2 | 4 | 2 | 2 | 2 | 2 | 4 | 2 | 0 | 0 | 6 | 8 | 2 | 0 | 0 | 2 | 0 | 0 | 2 | 8 | 6 | 8 | 8 | 10 | 8 | 6 | |
| 11 | 2 | 2 | 2 | 4 | 2 | 6 | 6 | 6 | 4 | 6 | 4 | 4 | 4 | 4 | 8 | 2 | 4 | 6 | 6 | 2 | 2 | 6 | 6 | 6 | 4 | 8 | 4 | 2 | 2 | 6 | 6 | 4 | 4 | 2 | 2 | 2 | 2 | 6 | 6 | 8 | 6 | 6 | 6 | 6 | 6 | |
| 12 | 4 | 4 | 4 | 4 | 4 | 4 | 6 | 8 | 4 | 6 | 6 | 6 | 6 | 6 | 6 | 4 | 6 | 6 | 6 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 2 | 2 | 8 | 4 | 8 | 4 | 4 | 6 | 4 | 2 | 4 | 6 | 8 | 8 | 10 | 10 | 10 | 8 | 8 | |
| 13 | 4 | 4 | 4 | 4 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 8 | 6 | 6 | 8 | 6 | 8 | 2 | 6 | 2 | 2 | 2 | 4 | 4 | 2 | 2 | 4 | 2 | 6 | 4 | 8 | 6 | 4 | 2 | 2 | 2 | 8 | 8 | 6 | 6 | 8 | 8 | 6 | |
| 14 | 2 | 4 | 4 | 2 | 4 | 2 | 4 | 8 | 2 | 10 | 6 | 8 | 10 | 10 | 6 | 6 | 10 | 10 | 10 | 4 | 4 | 2 | 2 | 2 | 4 | 4 | 2 | 2 | 2 | 2 | 10 | 6 | 6 | 10 | 6 | 2 | 2 | 2 | 10 | 10 | 10 | 10 | 10 | 6 | 6 | |
| 15 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 4 | 2 | 2 | 4 | 4 | 2 | 4 | 6 | 4 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 4 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 4 | 4 | 4 | 4 | |
| 16 | 4 | 4 | 2 | 4 | 2 | 4 | 8 | 6 | 6 | 4 | 2 | 4 | 6 | 6 | 6 | 8 | 8 | 8 | 8 | 6 | 4 | 2 | 2 | 2 | 4 | 4 | 2 | 2 | 4 | 2 | 4 | 4 | 2 | 2 | 2 | 4 | 4 | 6 | 10 | 4 | 4 | 4 | 6 | 6 | 4 | |
| 17 | 6 | 6 | 4 | 6 | 8 | 6 | 6 | 6 | 4 | 4 | 6 | 4 | 4 | 4 | 8 | 6 | 6 | 8 | 8 | 6 | 4 | 6 | 8 | 6 | 8 | 8 | 2 | 2 | 6 | 6 | 2 | 6 | 2 | 4 | 6 | 2 | 6 | 8 | 6 | 6 | 6 | 6 | 6 | 4 | 6 | |
| 18 | 0 | 2 | 4 | 2 | 2 | 6 | 8 | 6 | 6 | 4 | 10 | 10 | 6 | 10 | 6 | 10 | 10 | 10 | 10 | 2 | 8 | 10 | 6 | 4 | 8 | 6 | 6 | 4 | 6 | 8 | 10 | 6 | 10 | 10 | 8 | 2 | 2 | 2 | 10 | 10 | 6 | 6 | 8 | 10 | 10 | |
| 19 | 0 | 0 | 2 | 4 | 6 | 4 | 2 | 2 | 0 | 2 | 0 | 0 | 0 | 4 | 6 | 0 | 6 | 2 | 6 | 2 | 2 | 6 | 6 | 6 | 4 | 6 | 0 | 0 | 4 | 4 | 2 | 4 | 4 | 0 | 4 | 0 | 2 | 6 | 8 | 6 | 6 | 6 | 8 | 6 | 6 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment