Skip to content

Instantly share code, notes, and snippets.

@almccon

almccon/.block

Forked from alandunning/.block
Last active July 20, 2017 06:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save almccon/9c1bc27fc45c89dbe8e6d3351283e951 to your computer and use it in GitHub Desktop.
Save almccon/9c1bc27fc45c89dbe8e6d3351283e951 to your computer and use it in GitHub Desktop.
Download ZIP
Bellingham.design Radar Chart
Raw
.block
height: 650
Raw
README.md
Raw
data.json
[
[
{"area": "Central ", "value": 80},
{"area": "Kirkdale", "value": 40},
{"area": "Kensington ", "value": 40},
{"area": "Everton ", "value": 90},
{"area": "Picton ", "value": 60},
{"area": "Riverside ", "value": 80}
]
]
Raw
index.html
<!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>
Raw
RadarChart.js
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++;
});
}
};
Raw
survey_results_skill_interest.csv
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
Raw
survey_results_skill_level.csv
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