Skip to content

Instantly share code, notes, and snippets.

@naxxateux
Last active December 21, 2015 07:59
Show Gist options
  • Save naxxateux/6275125 to your computer and use it in GitHub Desktop.
Save naxxateux/6275125 to your computer and use it in GitHub Desktop.
Movie scenarios over the years (static 2)
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
<title></title>
</head>
<body>
<div id="chart" align="center"></div>
<script type="text/javascript">
// Global variables
var MoviesMatrix;
var pathArray = [];
var arcArray = [];
var rectArray = [];
var rectColors = ["#f43a0b", "#4b8da0", "#4ab577", "#f2b10d"];
var maxGross = 3125082391; // Titanic
var maxRectWidth = 300;
var rectHeight = 25;
var rectVerticalPadding = 1;
var maxRectGroupHeight;
var rectGroupVerticalPadding = 5;
var yearSectVerticalPadding = 50;
var yearSectHorizontalPadding = 60;
var pathOpacity = 0.2;
var arcOpacity = 0.2;
var margin = {top: 40, right: 100, bottom: 40, left: 500};
var width = 1800 - margin.left - margin.right;
var height = 2500 - margin.top - margin.bottom;
// Utilities
// Main unit
d3.text("movies.csv", function(error, MoviesData) {
if (error) {
console.log(error);
} else {
// Read data
MoviesMatrix = d3.csv.parseRows(MoviesData).map(function(row) {
return row.map(function(value) {
return value;
});
});
// Create initial SVG
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Get paths, arcs & rectangles data
var nOfYears = MoviesMatrix.length;
var nOfMoviesInYear = ((MoviesMatrix[0].length - 1) / 3);
maxRectGroupHeight = ((6 * rectVerticalPadding) + (3 * rectGroupVerticalPadding) + (10 * rectHeight));
var X = 0;
var Y = 0;
var rowIndex = 0;
var localRectMaxWidth;
var yearIndex = 0;
var pathGroup0Array = [];
var pathGroup1Array = [];
var pathGroup2Array = [];
var pathGroup3Array = [];
var groupIndex = 0;
var pathIndex = 0;
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return d.x; })
.y0(function(d) { return d.y0; })
.y1(function(d) { return d.y1; });
var rectWidthScale = d3.scale.linear()
.domain([0, maxGross])
.range([0, maxRectWidth]);
while (yearIndex < nOfYears) {
var groupMembersCountArray = [0, 0, 0, 0];
var groupY0Array = [0, 0, 0, 0];
var groupX0Array = [0, 0, 0, 0];
var groupXArray = [0, 0, 0, 0];
var dY = 0;
localRectMaxWidth = 0;
for (var i = 1; i < nOfMoviesInYear*3; i+=3) {
// Get groups Y & Y0 coordinates
if (+MoviesMatrix[yearIndex][i + 2] === 0) {
if (groupMembersCountArray[0] === 0) {
groupY0Array[0] = (Y + dY);
}
groupMembersCountArray[0]++;
groupXArray[0] = ((rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) > groupXArray[0]) ? rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) : groupXArray[0]);
groupX0Array[0] = X;
}
if (+MoviesMatrix[yearIndex][i + 2] === 1) {
if (groupMembersCountArray[1] === 0) {
groupY0Array[1] = (Y + dY);
}
groupMembersCountArray[1]++;
groupXArray[1] = ((rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) > groupXArray[1]) ? rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) : groupXArray[1]);
groupX0Array[1] = X;
}
if (+MoviesMatrix[yearIndex][i + 2] === 2) {
if (groupMembersCountArray[2] === 0) {
groupY0Array[2] = (Y + dY);
}
groupMembersCountArray[2]++;
groupXArray[2] = ((rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) > groupXArray[2]) ? rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) : groupXArray[2]);
groupX0Array[2] = X;
}
if (+MoviesMatrix[yearIndex][i + 2] === 3) {
if (groupMembersCountArray[3] === 0) {
groupY0Array[3] = (Y + dY);
}
groupMembersCountArray[3]++;
groupXArray[3] = ((rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) > groupXArray[3]) ? rectWidthScale(+MoviesMatrix[yearIndex][i + 1]) : groupXArray[3]);
groupX0Array[3] = X;
}
// Push rectangle attributes to rectArray
var localRectWidth = rectWidthScale(+MoviesMatrix[yearIndex][i + 1]);
var rectColor = rectColors[+MoviesMatrix[yearIndex][i + 2]];
rectArray.push({ x: ((rowIndex % 2 === 0) ? X : X - localRectWidth), y: (Y + dY), width: localRectWidth, height: rectHeight, color: rectColor});
localRectMaxWidth = ((localRectWidth > localRectMaxWidth) ? localRectWidth : localRectMaxWidth);
dY += ((MoviesMatrix[yearIndex][i + 2] === MoviesMatrix[yearIndex][i + 5]) ? (rectHeight + rectVerticalPadding) : (rectHeight + rectGroupVerticalPadding));
}
// Push path attributes to pathArray
// GROUP 0
groupIndex = 0;
if (groupMembersCountArray[groupIndex] != 0) {
if (rowIndex % 2 === 0) {
pathGroup0Array.push({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup0Array.push({x: (groupX0Array[groupIndex] + groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
} else {
pathGroup0Array.unshift({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup0Array.unshift({x: (groupX0Array[groupIndex] - groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
}
// Path is closed
if (yearIndex === (nOfYears - 1) || MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') === -1) {
pathArray[pathIndex++] = pathGroup0Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup0Array = [];
}
}
// GROUP 1
groupIndex = 1;
if (groupMembersCountArray[groupIndex] != 0) {
if (rowIndex % 2 === 0) {
pathGroup1Array.push({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup1Array.push({x: (groupX0Array[groupIndex] + groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
} else {
pathGroup1Array.unshift({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup1Array.unshift({x: (groupX0Array[groupIndex] - groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
}
// Path is closed
if (yearIndex === (nOfYears - 1) || MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') === -1) {
pathArray[pathIndex++] = pathGroup1Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup1Array = [];
}
}
// GROUP 2
groupIndex = 2;
if (groupMembersCountArray[groupIndex] != 0) {
if (rowIndex % 2 === 0) {
pathGroup2Array.push({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup2Array.push({x: (groupX0Array[groupIndex] + groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
} else {
pathGroup2Array.unshift({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup2Array.unshift({x: (groupX0Array[groupIndex] - groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
}
// Path is closed
if (yearIndex === (nOfYears - 1) || MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') === -1) {
pathArray[pathIndex++] = pathGroup2Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup2Array = [];
}
}
// GROUP 3
groupIndex = 3;
if (groupMembersCountArray[groupIndex] != 0) {
if (rowIndex % 2 === 0) {
pathGroup3Array.push({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup3Array.push({x: (groupX0Array[groupIndex] + groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
} else {
pathGroup3Array.unshift({x: groupX0Array[groupIndex], y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
pathGroup3Array.unshift({x: (groupX0Array[groupIndex] - groupXArray[groupIndex]), y0: groupY0Array[groupIndex], y1: (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))});
}
// Path is closed
if (yearIndex === (nOfYears - 1) || MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') === -1) {
pathArray[pathIndex++] = pathGroup3Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup3Array = [];
}
}
X += ((rowIndex % 2 === 0) ? (localRectMaxWidth + yearSectHorizontalPadding) : -(localRectMaxWidth + yearSectHorizontalPadding));
// Do we need to change the line?
if ((X - yearSectHorizontalPadding) > 700 || (X + yearSectHorizontalPadding) < 0) {
// Change X & Y
X += ((rowIndex % 2 === 0) ? -yearSectHorizontalPadding : yearSectHorizontalPadding);
Y += (maxRectGroupHeight + yearSectVerticalPadding);
// Path is closed
// GROUP 0
groupIndex = 0;
if (groupMembersCountArray[groupIndex] != 0) {
pathArray[pathIndex++] = pathGroup0Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup0Array = [];
}
// Do we need to build arc?
if (yearIndex != (nOfYears - 1) && MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') != -1) {
var nextGroupCount = 0;
var nextGroupY0 = 0;
var nextGroupX0 = 0;
var nextGroupX = 0;
dY = 0;
if (groupMembersCountArray[groupIndex] != 0) {
// Get next group attributes
for (var i = 1; i < nOfMoviesInYear*3; i+=3) {
if (+MoviesMatrix[yearIndex + 1][i + 2] === groupIndex) {
if (nextGroupCount === 0) {
nextGroupY0 = (Y + dY);
}
nextGroupCount++;
nextGroupX = ((rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) > nextGroupX) ? rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) : nextGroupX);
nextGroupX0 = X;
}
dY += ((MoviesMatrix[yearIndex + 1][i + 2] === MoviesMatrix[yearIndex + 1][i + 5]) ? (rectHeight + rectVerticalPadding) : (rectHeight + rectGroupVerticalPadding));
}
var R1 = ((nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) - groupY0Array[groupIndex]) / 2;
var R2 = (nextGroupY0 - (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))) / 2;
if (rowIndex % 2 === 0) {
arcArray.push({path: "M " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 1 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 0 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
} else {
arcArray.push({path: "M " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 0 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 1 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
}
}
}
// Path is closed
// GROUP 1
groupIndex = 1;
if (groupMembersCountArray[groupIndex] != 0) {
pathArray[pathIndex++] = pathGroup1Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup1Array = [];
}
// Do we need to build arc?
if (yearIndex != (nOfYears - 1) && MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') != -1) {
var nextGroupCount = 0;
var nextGroupY0 = 0;
var nextGroupX0 = 0;
var nextGroupX = 0;
dY = 0;
if (groupMembersCountArray[groupIndex] != 0) {
// Get next group attributes
for (var i = 1; i < nOfMoviesInYear*3; i+=3) {
if (+MoviesMatrix[yearIndex + 1][i + 2] === groupIndex) {
if (nextGroupCount === 0) {
nextGroupY0 = (Y + dY);
}
nextGroupCount++;
nextGroupX = ((rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) > nextGroupX) ? rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) : nextGroupX);
nextGroupX0 = X;
}
dY += ((MoviesMatrix[yearIndex + 1][i + 2] === MoviesMatrix[yearIndex + 1][i + 5]) ? (rectHeight + rectVerticalPadding) : (rectHeight + rectGroupVerticalPadding));
}
var R1 = ((nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) - groupY0Array[groupIndex]) / 2;
var R2 = (nextGroupY0 - (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))) / 2;
if (rowIndex % 2 === 0) {
arcArray.push({path: "M " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 1 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 0 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
} else {
arcArray.push({path: "M " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 0 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 1 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
}
}
}
// Path is closed
// GROUP 2
groupIndex = 2;
if (groupMembersCountArray[groupIndex] != 0) {
pathArray[pathIndex++] = pathGroup2Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup2Array = [];
}
// Do we need to build arc?
if (yearIndex != (nOfYears - 1) && MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') != -1) {
var nextGroupCount = 0;
var nextGroupY0 = 0;
var nextGroupX0 = 0;
var nextGroupX = 0;
dY = 0;
if (groupMembersCountArray[groupIndex] != 0) {
// Get next group attributes
for (var i = 1; i < nOfMoviesInYear*3; i+=3) {
if (+MoviesMatrix[yearIndex + 1][i + 2] === groupIndex) {
if (nextGroupCount === 0) {
nextGroupY0 = (Y + dY);
}
nextGroupCount++;
nextGroupX = ((rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) > nextGroupX) ? rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) : nextGroupX);
nextGroupX0 = X;
}
dY += ((MoviesMatrix[yearIndex + 1][i + 2] === MoviesMatrix[yearIndex + 1][i + 5]) ? (rectHeight + rectVerticalPadding) : (rectHeight + rectGroupVerticalPadding));
}
var R1 = ((nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) - groupY0Array[groupIndex]) / 2;
var R2 = (nextGroupY0 - (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))) / 2;
if (rowIndex % 2 === 0) {
arcArray.push({path: "M " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 1 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 0 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
} else {
arcArray.push({path: "M " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 0 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 1 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
}
}
}
// Path is closed
// GROUP 3
groupIndex = 3;
if (groupMembersCountArray[groupIndex] != 0) {
pathArray[pathIndex++] = pathGroup3Array;
pathArray[pathIndex++] = rectColors[groupIndex];
pathGroup3Array = [];
}
// Do we need to build arc?
if (yearIndex != (nOfYears - 1) && MoviesMatrix[yearIndex + 1].indexOf(groupIndex+'') != -1) {
var nextGroupCount = 0;
var nextGroupY0 = 0;
var nextGroupX0 = 0;
var nextGroupX = 0;
dY = 0;
if (groupMembersCountArray[groupIndex] != 0) {
// Get next group attributes
for (var i = 1; i < nOfMoviesInYear*3; i+=3) {
if (+MoviesMatrix[yearIndex + 1][i + 2] === groupIndex) {
if (nextGroupCount === 0) {
nextGroupY0 = (Y + dY);
}
nextGroupCount++;
nextGroupX = ((rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) > nextGroupX) ? rectWidthScale(+MoviesMatrix[yearIndex + 1][i + 1]) : nextGroupX);
nextGroupX0 = X;
}
dY += ((MoviesMatrix[yearIndex + 1][i + 2] === MoviesMatrix[yearIndex + 1][i + 5]) ? (rectHeight + rectVerticalPadding) : (rectHeight + rectGroupVerticalPadding));
}
var R1 = ((nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) - groupY0Array[groupIndex]) / 2;
var R2 = (nextGroupY0 - (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding))) / 2;
if (rowIndex % 2 === 0) {
arcArray.push({path: "M " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 1 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 0 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] + groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
} else {
arcArray.push({path: "M " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) + " " + groupY0Array[groupIndex] +
" H " + X +
" A " + R1 + " " + R1 + " " + " 0 0 0 " + X + " " + (nextGroupY0 + (nextGroupCount * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" V " + nextGroupY0 +
" A " + R2 + " " + R2 + " " + " 0 0 1 " + X + " " + (groupY0Array[groupIndex] + (groupMembersCountArray[groupIndex] * (rectHeight + rectVerticalPadding) - rectVerticalPadding)) +
" H " + (groupX0Array[groupIndex] - groupXArray[groupIndex]) +
" Z"
});
arcArray.push(rectColors[groupIndex]);
}
}
}
rowIndex++;
}
yearIndex++;
}
console.log(pathArray);
// Draw paths
for (i = 0; i < pathArray.length; i+=2) {
svg.append("path")
.attr("d", area(pathArray[i]))
.attr("opacity", pathOpacity)
.style("fill", pathArray[i + 1]);
}
// Draw arcs
for (i = 0; i < arcArray.length; i+=2) {
svg.append("path")
.attr("d", arcArray[i].path)
.attr("opacity", arcOpacity)
.style("fill", arcArray[i + 1]);
}
// Draw rectangles
for (var i = 0; i < rectArray.length; i++) {
svg.append("rect")
.attr("x", rectArray[i].x)
.attr("y", rectArray[i].y)
.attr("width", rectArray[i].width)
.attr("height", rectArray[i].height)
.style("fill", rectArray[i].color);
}
}
});
</script>
</body>
</html>
1980 Звездные войны: Эпизод 5 – Империя наносит ответный удар 1502066436 3 Как только сможешь 197217689 3 Смоки и Бандит 2 184510026 3 Братья Блюз 321491393 1 Дочь шахтера 187439975 1 Голубая лагуна 164200165 1 Аэроплан 232835373 0 С девяти до пяти 288180495 0 Буйнопомешанные 282627000 0 Рядовой Бенджамин 194874100 0
1981 Супермен 2 273709836 3 Только для твоих глаз 138676389 3 На Золотом пруду 301792142 1 Лис и пёс 160546179 1 Добровольцы поневоле 215801410 0 Гонки «Пушечное ядро» 182614334 0 Индиана Джонс: В поисках утраченного ковчега 986512706 0 Огненные колесницы 149201447 0 Артур 241518055 0 Времена года 127581944 0
1982 Рокки 3 297616917 3 Звездный путь 2: Гнев Хана 187812851 3 Самый приятный бордель в Техасе 165889896 1 Рэмбо: Первая кровь 298006711 1 Тутси 421736000 0 Инопланетянин 1887127118 0 Офицер и джентльмен 308913418 0 Полтергейст 290850946 0 Порки 264869421 0 48 часов 187707049 0
1983 Звездные войны: Эпизод 6 – Возвращение Джедая 1097495268 3 Челюсти 3 203250097 3 Внезапный удар 156254620 3 Остаться в живых 149902067 3 Осьминожка 156834259 3 Лицо со шрамом 152193663 2 Язык нежности 379356259 1 Танец-вспышка 214647978 0 Поменяться местами 208835088 0 Военные игры 183801310 0
1984 Индиана Джонс и Храм судьбы 736167068 3 Звездный путь 3: В поисках Спока 169001011 3 Охотники за привидениями 644506994 0 Гремлины 338313655 0 Роман с камнем 257624645 0 Парень-каратист 200702383 0 Полицейская академия 179449555 0 Свободные 176878238 0 Терминатор 173200352 0 Полицейский из Беверли-Хиллз 699156656 0
1985 Рокки 4 640009015 3 Рэмбо: Первая кровь 2 639852920 3 Жемчужина Нила 206126916 3 Цветы лиловые полей 311976548 1 Из Африки 273703306 1 Кокон 181716954 0 Назад в будущее 811763793 0 Свидетель 146345895 0 Балбесы 130760018 0 Шпионы как мы 127989527 0
1986 Чужие 273915918 3 Парень-каратист 2 240567316 3 Звездный путь 4: Дорога домой 229300445 3 Американская история 176692784 0 Крокодил Данди 685945327 0 Взвод 289528880 0 Орлы юриспруденции 194686825 0 Снова в школу 190729220 0 Лучший стрелок 745775956 0 Золотой ребенок 166819488 0
1987 Полицейский из Беверли-Хиллз 2 605929372 3 Неприкасаемые 154066317 2 Трое мужчин и младенец 338917539 2 Роковое влечение 646694299 1 Доброе утро, Вьетнам 250323187 0 Смертельное оружие 242818396 0 Секрет моего успеха 224213695 0 Хищник 198435806 0 Во власти Луны 162893866 0 Грязные танцы 432187633 0
1988 Крокодил Данди 2 464836047 3 Рэмбо 3 366690285 3 Поездка в Америку 560179463 1 Коктейль 332719275 1 Кто подставил кролика Роджера 639819678 0 Крепкий орешек 269095172 0 Рыбка по имени Ванда 367811801 0 Близнецы 420231912 0 Человек дождя 688361343 0 Большой 294237421 0
1989 Индиана Джонс и последний крестовый поход 877217841 3 Назад в будущее 2 614107503 3 Охотники за привидениями 2 398480265 3 Смертельное оружие 2 421529874 3 Бэтмен 760995509 1 Русалочка 390985436 1 Рожденный четвертого июля 390985436 1 Уж кто бы говорил 549449654 0 Общество мертвых поэтов 436341214 0 Дорогая, я уменьшил детей 412039718 0
1990 Назад в будущее 3 430368546 3 Крепкий орешек 2 421592066 3 Танцующий с волками 746607572 1 Черепашки-ниндзя 355460010 1 Презумпция невиновности 389493610 1 Вспомнить всё 459887718 1 Детсадовский полицейский 355445530 0 Красотка 815595031 0 Привидение 890036554 0 Один дома 838965028 0
1991 Терминатор 2: Судный день 878535253 3 Мыс страха 308073427 2 Красавица и чудовище 718195277 1 Робин Гуд: Принц воров 659934704 1 Капитан Крюк 508444650 1 Молчание ягнят 460935538 1 Джон Ф. Кеннеди: Выстрелы в Далласе 347135291 1 Семейка Аддамс 323639099 1 Горячие головы 306052517 0 Городские пижоны 302567106 0
1992 Один дома 2: Затерянный в Нью-Йорке 588746356 3 Смертельное оружие 3 527639704 3 Бэтмен возвращается 437603984 3 Несколько хороших парней 398913891 1 Аладдин 826642359 1 Дракула 354014814 1 Мир Уэйна 300279609 1 Телохранитель 673950980 0 Основной инстинкт 578800647 0 Сестричка, действуй 379832446 0
1993 Парк Юрского периода 1542064492 1 Список Шиндлера 510812571 1 Миссис Даутфайр 701500436 1 Беглец 586512458 1 Непристойное предложение 423916353 1 Фирма 429694903 1 Дело о пеликанах 310476209 1 Неспящие в Сиэтле 362201815 1 Скалолаз 405450335 0 Филадельфия 328618719 0
1994 Правдивая ложь 587267737 2 Форрест Гамп 1049949363 1 Маска 544954280 1 Флинтстоуны 529528372 1 Интервью с вампиром 346680142 1 Прямая и явная угроза 334625961 1 Король Лев 1474954854 0 Скорость 543194624 0 Четыре свадьбы и одни похороны 380836289 0 Тупой и еще тупее 383276829 0
1995 Крепкий орешек 3: Возмездие 545430873 3 Золотой глаз 526832387 3 Бэтмен навсегда 508161979 3 Покахонтас 522580457 1 Каспер 434771572 1 Аполлон 13 536409278 1 Джуманджи 396823845 1 Семь 494240907 0 Водный мир 398969512 0 История игрушек 546557691 0
1996 Чокнутый профессор 399983087 2 Миссия: невыполнима 666482412 1 Горбун из Нотр Дама 474994722 1 101 далматинец 468206369 1 Выкуп 451859314 1 День независимости 1192775131 0 Смерч 721928425 0 Скала 489191426 0 Джерри Магуайер 399386784 0 Стиратель 353751520 0
1997 Парк Юрского периода 2: Затерянный мир 884653768 3 Завтра не умрет никогда 485256345 3 Люди в черном 842828470 1 Титаник 3125082391 0 Мужской стриптиз 368593157 0 Самолет президента 450673664 0 Пятый элемент 377405857 0 Свадьба лучшего друга 427982705 0 Лучше не бывает 449274555 0 Лжец, лжец 432876179 0
1998 Годзилла 534410154 2 Доктор Дулиттл 415183813 2 Мулан 429091558 1 Смертельное оружие 4 402476890 1 Армагеддон 780730801 0 Спасти рядового Райана 679395681 0 Столкновение с бездной 492745176 0 Приключения Флика 512391976 0 Все без ума от Мэри 521537357 0 Влюбленный Шекспир 407938089 0
1999 Звездные войны: Эпизод 1 – Скрытая угроза 1415965823 3 История игрушек 2 669320947 3 И целого мира мало 499328712 3 Остин Пауэрс: Шпион, который меня соблазнил 429097318 3 Мумия 573921973 2 Тарзан 618504710 1 Шестое чувство 928472682 0 Матрица 639653988 0 Ноттинг Хилл 502167755 0 Красота по-американски 491689309 0
2000 Миссия: невыполнима 2 726050407 3 Знакомство с родителями 439490579 2 Гринч – похититель Рождества 459038065 1 Идеальный шторм 437195517 1 Люди Икс 394012570 1 Гладиатор 608661767 0 Динозавр 471149923 0 Изгой 571410748 0 Чего хотят женщины 497568570 0 Что скрывает ложь 387589066 0
2001 Парк Юрского периода 3 479415051 3 Ганнибал 457199948 3 Мумия возвращается 562925720 3 Одиннадцать друзей Оушена 585932295 2 Гарри Поттер и философский камень 1267181982 1 Властелин колец: Братство кольца 1132989421 1 Шрек 629731983 1 Планета обезьян 470875262 1 Корпорация монстров 731661132 0 Перл Харбор 583987228 0
2002 Гарри Поттер и Тайная комната 1125093931 3 Властелин колец: Две крепости 1185647872 3 Звездные войны: Эпизод 2 – Атака клонов 831229859 3 Умри, но не сейчас 552923028 3 Люди в черном 2 565528067 3 Человек-паук 1051786945 1 Особое мнение 458717345 1 Знаки 522557333 0 Ледниковый период 490571792 0 Моя большая греческая свадьба 471992376 0
2003 Властелин колец: Возвращение Короля 1398888676 3 Матрица: Перезагрузка 927660576 3 Пираты Карибского моря: Проклятие Черной жемчужины 817830018 3 Матрица: Революция 534179122 3 Терминатор 3: Восстание машин 541713890 3 Люди Икс 2 509447016 3 Плохие парни 2 341674445 3 Последний самурай 570948726 1 В поисках Немо 1152179076 0 Брюс Всемогущий 605716043 0
2004 Гарри Поттер и узник Азкабана 971960029 3 Шрек 2 1123212102 3 Человек-паук 2 956194936 3 Знакомство с Факерами 630170312 3 Двенадцать друзей Оушена 442548021 3 Троя 606840019 1 Страсти Христовы 746517292 1 Суперсемейка 770352032 0 Послезавтра 662181561 0 Подводная братва 448075523 0
2005 Гарри Поттер и Кубок огня 1058355072 3 Звездные войны: Эпизод 3 – Месть Ситхов 1002997173 3 Кинг Конг 649610481 2 Бэтмен: Начало 441578034 2 Чарли и шоколадная фабрика 560463140 1 Хроники Нарнии: Лев, колдунья и волшебный шкаф 87911547 1 Война миров 698259723 1 Мадагаскар 649610481 0 Мистер и миссис Смит 564284873 0 Правила съема: Метод Хитча 434358495 0
2006 Пираты Карибского моря: Сундук мертвеца 1215444886 3 Возвращение Супермена 445832558 3 Ледниковый период 2: Глобальное потепление 747142500 3 Казино Рояль 677432535 3 Люди Икс: Последняя битва 523551849 3 Миссия: невыполнима 3 453549013 3 Код Да Винчи 864393430 1 Ночь в музее 654908158 1 Делай ноги 438136746 0 Тачки 526659028 0
2007 Пираты Карибского моря: На краю Света 1069396671 3 Гарри Поттер и Орден Феникса 1043273381 3 Человек-паук 3: Враг в отражении 988867504 3 Шрэк Третий 886843563 3 Сокровище нации: Книга Тайн 507674706 3 Трансформеры 787777855 1 Симпсоны в кино 585046424 1 Я – легенда 649737401 1 300 спартанцев 506235680 1 Рататуй 692332327 0
2008 Темный рыцарь 1074877535 3 Индиана Джонс и Королевство хрустального черепа 841700555 3 Хроники Нарнии: Принц Каспиан 449042157 3 Мадагаскар 2 646173368 3 Квант милосердия 627117077 3 Железный человек 622410255 1 Мамма MIA! 652530551 1 ВАЛЛ·И 557757013 0 Хэнкок 668093818 0 Кунг-фу Панда 675966679 0
2009 Ледниковый период 3: Эра динозавров 948752437 3 Гарри Поттер и Принц-полукровка 999825641 3 Трансформеры: Месть падших 894838033 3 Сумерки. Сага. Новолуние 759520199 3 Ангелы и Демоны 519945973 1 Шерлок Холмс 560710686 1 Аватар 2977034434 0 Вверх 782535785 0 2012 843815018 0 Мальчишник в Вегасе 500207785 0
2010 Железный человек 2 653159939 3 Гарри Поттер и Дары Смерти: Часть I 1008297470 3 История игрушек: Большой побег 1116320040 3 Шрэк навсегда 790230910 3 Сумерки. Сага. Затмение 733415914 3 Алиса в стране чудес 1075505665 1 Рапунцель: Запутанная история 620258032 1 Как приручить дракона 519622696 1 Начало 866807581 0 Гадкий я 570269684 0
2011 Гарри Поттер и Дары Смерти: Часть II 1368341443 3 Пираты Карибского моря: На странных берегах 1064749238 3 Трансформеры 3: Тёмная сторона Луны 1146221935 3 Кунг-фу Панда 2 679006126 3 Миссия невыполнима: Протокол Фантом 708607647 3 Сумерки. Сага. Рассвет: Часть 1 726415293 3 Форсаж 5 638660428 3 Мальчишник 2: Из Вегаса в Бангкок 598499591 3 Тачки 2 571049443 3 Смурфики 575025329 1
2012 Мстители 1512157910 3 007: Координаты «Скайфолл» 1108561013 3 Ледниковый период 4 877244782 3 Темный рыцарь: Возрождение легенды 1084439099 3 Сумерки. Сага. Рассвет: Часть 2 829685377 3 Мадагаскар 3 745110251 3 Люди в черном 3 624026776 3 Новый Человек-Паук 752215857 2 Хоббит: Нежданное путешествие 1017003568 1 Голодные игры 691247768 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment