Skip to content

Commit

Permalink
fixed misc data issues, rating sliders, coloring
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgoodall
jgoodall committed Feb 6, 2012
1 parent 985d1cc commit 124f0fe
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 46 deletions.
Binary file modified data/Most Profitable Hollywood Stories.numbers
View file
Binary file not shown.
18 changes: 9 additions & 9 deletions data/csvs/moviedata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
"Genre": "Action",
"exclude": "",
"Lead Studio": "Disney",
"Film": "Pirates of the Caribbean:\\nOn Stranger Tides"
"Film": "Pirates of the Caribbean: On Stranger Tides"
},
{
"Opening Weekend per Cinema": "17512",
Expand Down Expand Up @@ -3424,11 +3424,11 @@
"Story": "Monster Force",
"Opening Weekend Theaters": "3216",
"Domestic Gross": "84.75",
"Critic Rating": "",
"Critic Rating": "59",
"Oscar": "",
"Opening Weekend Revenue": "40.67",
"Budget": "3",
"Audience Rating": "",
"Audience Rating": "51",
"Profitability": "59.1700",
"Foreign Gross": "92.75",
"Worldwide Gross": "177.51",
Expand Down Expand Up @@ -6176,7 +6176,7 @@
},
{
"Opening Weekend per Cinema": "",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "",
"Domestic Gross": "18.73",
"Critic Rating": "78",
Expand Down Expand Up @@ -6613,16 +6613,16 @@
},
{
"Opening Weekend per Cinema": "",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "",
"Domestic Gross": "17.66",
"Critic Rating": "78",
"Oscar": "",
"Opening Weekend Revenue": "3.3",
"Budget": "10.00",
"Audience Rating": "26",
"Audience Rating": "64",
"Profitability": "1.7700",
"Foreign Gross": "N/A",
"Foreign Gross": "0.04",
"Worldwide Gross": "17.70",
"Year": "2008",
"Genre": "Drama",
Expand Down Expand Up @@ -7962,7 +7962,7 @@
},
{
"Opening Weekend per Cinema": "4795",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "2368",
"Domestic Gross": "28.69",
"Critic Rating": "14",
Expand Down Expand Up @@ -9166,7 +9166,7 @@
"Oscar": "",
"Opening Weekend Revenue": "15.6",
"Budget": "32.00",
"Audience Rating": "",
"Audience Rating": "57",
"Profitability": "2.3467",
"Foreign Gross": "35.53",
"Worldwide Gross": "75.10",
Expand Down
18 changes: 9 additions & 9 deletions web/data/moviedata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
"Genre": "Action",
"exclude": "",
"Lead Studio": "Disney",
"Film": "Pirates of the Caribbean:\\nOn Stranger Tides"
"Film": "Pirates of the Caribbean: On Stranger Tides"
},
{
"Opening Weekend per Cinema": "17512",
Expand Down Expand Up @@ -3424,11 +3424,11 @@
"Story": "Monster Force",
"Opening Weekend Theaters": "3216",
"Domestic Gross": "84.75",
"Critic Rating": "",
"Critic Rating": "59",
"Oscar": "",
"Opening Weekend Revenue": "40.67",
"Budget": "3",
"Audience Rating": "",
"Audience Rating": "51",
"Profitability": "59.1700",
"Foreign Gross": "92.75",
"Worldwide Gross": "177.51",
Expand Down Expand Up @@ -6176,7 +6176,7 @@
},
{
"Opening Weekend per Cinema": "",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "",
"Domestic Gross": "18.73",
"Critic Rating": "78",
Expand Down Expand Up @@ -6613,16 +6613,16 @@
},
{
"Opening Weekend per Cinema": "",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "",
"Domestic Gross": "17.66",
"Critic Rating": "78",
"Oscar": "",
"Opening Weekend Revenue": "3.3",
"Budget": "10.00",
"Audience Rating": "26",
"Audience Rating": "64",
"Profitability": "1.7700",
"Foreign Gross": "N/A",
"Foreign Gross": "0.04",
"Worldwide Gross": "17.70",
"Year": "2008",
"Genre": "Drama",
Expand Down Expand Up @@ -7962,7 +7962,7 @@
},
{
"Opening Weekend per Cinema": "4795",
"Story": "riddle",
"Story": "The Riddle",
"Opening Weekend Theaters": "2368",
"Domestic Gross": "28.69",
"Critic Rating": "14",
Expand Down Expand Up @@ -9166,7 +9166,7 @@
"Oscar": "",
"Opening Weekend Revenue": "15.6",
"Budget": "32.00",
"Audience Rating": "",
"Audience Rating": "57",
"Profitability": "2.3467",
"Foreign Gross": "35.53",
"Worldwide Gross": "75.10",
Expand Down
4 changes: 1 addition & 3 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,14 +166,12 @@ <h1 class="span1" id="helpIcon" rel="twipsy" title="Hover here for quick start."
<option>Story</option>
<option>Genre</option>
<option>Profitability</option>
<option>Budget</option>
<option>Worldwide Gross</option>
<option>Domestic Gross</option>
<option>Foreign Gross</option>
<option>Audience Rating</option>
<option>Critic Rating</option>
<option>Opening Weekend Revenue</option>
<option>Opening Weekend Theaters</option>
<option>Opening Weekend per Cinema</option>
<option>None</option>
</select>
</div>
Expand Down
4 changes: 2 additions & 2 deletions web/js/mylibs/colorlegend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ colorlegend = function(target, scale, type, options) {
for ( var i = 0; i < linearBoxes ; i++ ) {
colors[i] = scale( i * ((max-min)/linearBoxes) );
}
console.log( min + '/' + max );
}

// check the width and height and adjust if necessary to fit in the element
// use the range if quantile
if ( fill || w < (boxWidth+boxSpacing)*colors.length + padding[1] + padding[3] ) {
Expand Down Expand Up @@ -125,7 +125,7 @@ colorlegend = function(target, scale, type, options) {
.attr('x', function(d,i) {return i * (boxWidth+boxSpacing) + (boxWidth/2);} )
.attr('y', boxHeight+2)
.attr('dy', '.71em')
.style('font-size', '10px')
.style('font-size', '9px')
.style('fill', '#666')
.style('text-anchor', 'middle')
.style('pointer-events', 'none')
Expand Down
83 changes: 60 additions & 23 deletions web/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,28 @@ $.each(['Profitability', 'Budget', 'Worldwide Gross', 'Domestic Gross', 'Foreign

// color scales
var genreColorScale = d3.scale.category20();
var storyColorScale = d3.scale.category20b(); // TODO - change to use colors in pdf

var storyColorScale = d3.scale.ordinal().range([
'rgb(127,85,49)', 'rgb(152,202,150)', 'rgb(72,173,99)', 'rgb(152,202,150)',
'rgb(44,169,156)', 'rgb(129,30,86)', 'rgb(76,77,77)', 'rgb(217,39,49)',
'rgb(217,206,177)', 'rgb(121,184,86)', 'rgb(193,71,53)', 'rgb(144,45,43)',
'rgb(104,50,121)', 'rgb(163,208,196)', 'rgb(97,99,99)', 'rgb(209,159,140)',
'rgb(202,204,203)', 'rgb(164,88,139)', 'rgb(174,155,73)', 'rgb(718,25,64)',
'rgb(223,74,132)', 'rgb(57,74,136)', 'rgb(240,240,240)', 'rgb(163,208,196)'
]).domain([
'discovery', 'love', 'rivalry', 'quest', 'comedy', 'escape', 'metamorphosis',
'monster force', 'fish out of water', 'revenge', 'maturation', 'underdog',
'sacrifice', 'the riddle', 'wretched excess', 'temptation',
'journey and return', 'pursuit', 'transformation', 'tragedy', 'rescue',
'rags to riches', '']);
// red - gray - blue [min - avg - max]
var quantileColorScale = [
"rgb(103, 0, 31)", "rgb( 178, 24, 43)", "rgb( 214, 96, 77)", "rgb( 244, 165, 130)",
"rgb( 220, 220, 220)",
"rgb( 146, 197, 222)", "rgb( 67, 147, 195)", "rgb( 33, 102, 172)", "rgb( 5, 48, 97)"
'rgb(103, 0, 31)', 'rgb( 178, 24, 43)', 'rgb( 214, 96, 77)', 'rgb( 244, 165, 130)',
'rgb( 220, 220, 220)',
'rgb( 146, 197, 222)', 'rgb( 67, 147, 195)', 'rgb( 33, 102, 172)', 'rgb( 5, 48, 97)'
];

// must set domain of numeric scale: domain([minVal, mean, maxVal])
// must set domain of numeric scale: domain([minVal, maxVal])
var numericColorScale = d3.scale.quantile().range(quantileColorScale);
// default to story for color
var colorField = 'Story';
Expand Down Expand Up @@ -120,7 +133,15 @@ var locate = function(d, axis) {
// return the color based on the current scale
// d = the data item to colorize
var colorize = function(d) {
return colorField !== 'None' ? colorScale(d[colorField]) : null;
if ( colorField === 'None' ) {
return null;
}
else if ( colorField === 'Story' || colorField === 'Genre' ) {
return colorScale(d[colorField].toLowerCase());
}
else {
return colorScale(+d[colorField]);
}
};

// load the data asynchronously
Expand All @@ -132,8 +153,8 @@ d3.json('data/moviedata.json', function(json) {
setupSliders('#wgross-slider', '#wgross-slider-text', intFormat, 'Worldwide Gross', {prepend:'$', append:' M'});
setupSliders('#dgross-slider', '#dgross-slider-text', intFormat, 'Domestic Gross', {prepend:'$', append:' M'});
setupSliders('#fgross-slider', '#fgross-slider-text', intFormat, 'Foreign Gross', {prepend:'$', append:' M'});
setupSliders('#arating-slider', '#arating-slider-text', intFormat, 'Audience Rating', {min: 0, max: 100});
setupSliders('#crating-slider', '#crating-slider-text', intFormat, 'Critic Rating', {min: 0, max: 100});
setupSliders('#arating-slider', '#arating-slider-text', intFormat, 'Audience Rating', {min:0, max:100, append:'%'});
setupSliders('#crating-slider', '#crating-slider-text', intFormat, 'Critic Rating', {min:0, max:100, append:'%'});

// set controls to be defaults
$('#xaxis').val(xField);
Expand All @@ -153,9 +174,7 @@ d3.json('data/moviedata.json', function(json) {
range('y', h - axisPadding, 0);

// set up color legend
var uniqVals = d3.keys( d3.nest().key( function(d) {return (d[colorField]).toLowerCase();} ).sortKeys().map(data)); // case sensitive!
colorScale.domain( uniqVals );
colorlegend("#colorpanel", colorScale, "ordinal", {fill: true});
colorlegend('#colorpanel', colorScale, 'ordinal', {fill: true});

axisType('x', 'linear');
xScale = d3.scale.linear()
Expand Down Expand Up @@ -278,9 +297,24 @@ function mouseout(d, i) {
// prepend, append : add text to prepend or append to label values
var setupSliders = function(sliderElement, labelElement, labelFormatter, dataField, opts) {

var minVal = opts && opts.min ? opts.min : d3.round( d3.min(data, function(d) { return $.isNumeric(d[dataField]) ? +d[dataField] : 0; }) );
var maxVal = opts && opts.max ? opts.max : d3.round( d3.max(data, function(d) { return $.isNumeric(d[dataField]) ? +d[dataField] : 0; }) );

var minVal, maxVal;
if ( opts && typeof opts.min !== 'undefined' ) {
minVal = opts.min;
}
else {
minVal = d3.round( d3.min(data, function(d) {
return $.isNumeric(d[dataField]) ? +d[dataField] : 0;
}) );
}
if ( opts && typeof opts.max !== 'undefined' ) {
maxVal = opts.max;
}
else{
maxVal = d3.round( d3.max(data, function(d) {
return $.isNumeric(d[dataField]) ? +d[dataField] : 0;
}) );
}

// init the sliders
var sliderOpts = {
range: true,
Expand All @@ -293,7 +327,7 @@ var setupSliders = function(sliderElement, labelElement, labelFormatter, dataFie
$(sliderElement).on('slide', function( event, ui ) {
$( labelElement ).val(
(opts && opts.prepend ? opts.prepend : '') + labelFormatter(ui.values[0]) + (opts && opts.append ? opts.append : '') +
" - " +
' - ' +
(opts && opts.prepend ? opts.prepend : '') + labelFormatter(ui.values[1]) + (opts && opts.append ? opts.append : '')
);
filter({field: dataField, min: ui.values[0], max: ui.values[1]});
Expand All @@ -305,7 +339,7 @@ var setupSliders = function(sliderElement, labelElement, labelFormatter, dataFie
// set up the text values for the min and max
$( labelElement ).val(
(opts && opts.prepend ? opts.prepend : '') + labelFormatter(minVal) + (opts && opts.append ? opts.append : '') +
" - " +
' - ' +
(opts && opts.prepend ? opts.prepend : '') + labelFormatter(maxVal) + (opts && opts.append ? opts.append : '')
);

Expand Down Expand Up @@ -340,6 +374,8 @@ var filter = function(spec) {
|| (d[ allFilters[2].field ] < allFilters[2].min || d[ allFilters[2].field ] > allFilters[2].max)
|| (d[ allFilters[3].field ] < allFilters[3].min || d[ allFilters[3].field ] > allFilters[3].max)
|| (d[ allFilters[4].field ] < allFilters[4].min || d[ allFilters[4].field ] > allFilters[4].max)
|| (d[ allFilters[5].field ] < allFilters[5].min || d[ allFilters[5].field ] > allFilters[5].max)
|| (d[ allFilters[6].field ] < allFilters[6].min || d[ allFilters[6].field ] > allFilters[6].max)
) {
d.display = false;
return this;
Expand All @@ -358,6 +394,8 @@ var filter = function(spec) {
&& (d[ allFilters[2].field ] >= allFilters[2].min && d[ allFilters[2].field ] <= allFilters[2].max)
&& (d[ allFilters[3].field ] >= allFilters[3].min && d[ allFilters[3].field ] <= allFilters[3].max)
&& (d[ allFilters[4].field ] >= allFilters[4].min && d[ allFilters[4].field ] <= allFilters[4].max)
&& (d[ allFilters[5].field ] >= allFilters[5].min && d[ allFilters[5].field ] <= allFilters[5].max)
&& (d[ allFilters[6].field ] >= allFilters[6].min && d[ allFilters[6].field ] <= allFilters[6].max)
) {
d.display = true;
return this;
Expand Down Expand Up @@ -533,12 +571,10 @@ $( function() {
$('#color').change(function() {
colorField = $('#color').val();
var scaleType;
colorScale = null;

if ( colorField === 'Story' ) {
var uniqVals = d3.keys( d3.nest().key( function(d) {
return (d[colorField]).toLowerCase();
} ).sortKeys().map(data));
colorScale = storyColorScale.domain( uniqVals );
colorScale = storyColorScale;;
scaleType = 'ordinal';
}
else if ( colorField === 'Genre' ) {
Expand All @@ -550,9 +586,10 @@ $( function() {
}
else {
colorScale = numericColorScale.domain([
d3.min(data, function(d) {return d[colorField];}),
d3.sum(data, function(d) {return d[colorField];}) / data.length,
d3.max(data, function(d) {return d[colorField];})]);
d3.min(data, function(d) {return +d[colorField];}),
d3.sum(data, function(d) {return +d[colorField];}) / data.length,
d3.max(data, function(d) {return +d[colorField];})
]);
scaleType = 'quantile';
}

Expand Down

0 comments on commit 124f0fe

Please sign in to comment.