Last active
December 21, 2015 07:59
-
-
Save naxxateux/6275125 to your computer and use it in GitHub Desktop.
Movie scenarios over the years (static 2)
This file contains 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"> | |
<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> |
This file contains 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
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