flatdata = {
const data = await d3.json(`https://gist.githubusercontent.com/bengarvey/5421ec4f4b681172b4dc6f07432c962b/raw/97a995bba5358311a65b0c907813ac839a5ab9f7/gistfile1.txt`);
return data;
}
data = {
function calcStep(team, step, data) {
var result = 0;
for (var k=0; k<step; k++) {
result += data[k];
}
return result;
}
function getStep(team, step) {
var data = [ team.penalty * -1, team.calcWeight != null ? team.calcWeight : 0, team.calcLongForm, team.calcStyle, team.calcSpontaneous];
var res = [
calcStep(team, step, data),
calcStep(team, step + 1, data),
]
res['data'] = data;
return res;
}
console.log(flatdata);
var result = [];
for (var i=0; i<keys.length; i++) {
result[i] = [];
dataWithDividers.forEach( function(team, j) {
result[i][j] = getStep(team, i)
});
}
return result;
}
x = d3.scaleBand()
.domain(names)
.range([margin.left,width - margin.right])
.padding(0)
y = d3.scaleLinear()
.domain([Math.min.apply(null, flatdata.map( d => d.penalty * -1)) - 10, d3.max(totals)])
.rangeRound([height - margin.bottom, margin.top])
color = (cat) => {
switch(cat) {
case 'penalty':
return '#C8553D';
break;
case 'calcLongTerm':
return '#58778C';
break;
case 'calcStyle':
return '#FFD5C2';
break;
case 'calcSpontaneous':
return '#F28F3B';
break;
case 'calcWeight':
return '#666666';
break;
default:
return '#cccccc';
}
}
xAxis = g => g
.attr("transform", `translate(-12,${height - margin.bottom + 30})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
.call(g => g.selectAll(".tick line").remove())
.selectAll(".tick text")
.attr("transform", "rotate(-90)")
.attr("font-size", 8)
.attr( "class", d => d.match("COLLING") ? "bold" : "")
yAxis = g => g
.call(d3.axisBottom(x).tickSizeOuter(0))
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
legend = svg => {
console.log(data);
const g = svg
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(data.keys.slice().reverse().slice(0,4))
.join("g")
.attr("transform", (d, i) => `translate(0,${i * 20})`);
g.append("rect")
.attr("x", -19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", color);
g.append("text")
.attr("x", -24)
.attr("y", 9.5)
.attr("dy", "0.35em")
.text(d => d);
}
height = 600
margin = ({top: 10, right: 0, bottom: 220, left: 0})
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
