2017 in Film

I wanted to visualize the relationship between a film's budget, its metacritic score and its gross intake (domestic, foreign and video sales combined). The data was compiled using Python's BeautifulSoup to scrap The Numbers and Metacritic. This visualizes a sample of major releases in the United States in 2017. Budget data is hard to come by, especially for movies with losses.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2017 in Film</title>
		<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
	</head>

body {
			background: #F9F9F9;
			font-family: 'Abhaya Libre', serif !important;
		}

text {
			font-family: 'Abhaya Libre', serif !important;
		}

#graph {
			display: flex;
			align-items: center ;
			justify-content: center;
			margin-left: -10em;
		}

.tooltip {
			outline: solid 1px rgba(55, 25, 55, 0.5);
		}

.tooltip-cont {
			padding: 1em 1em;
		}

.reset-button {
			display : inline;
			padding: 1em 1em;
			outline: solid 1px rgba(55, 25, 55, 0.1);
		}

.reset-button.can {
			outline: solid 1px rgba(55, 25, 55, 0.7);
		}

.reset-button.cant:hover {
			cursor: not-allowed;
		}

.reset-button.can:hover {
			cursor: pointer;
			transition: 0.3s;
			background-color: #3366cc;
			color: white;
		}

</style>
	<body>
		<div class='cont'>
			<div id='graph'>
			</div>
			<div id='about'>

</div>
		</div>

/**************************************************************/
//Helpers
/**************************************************************/
function getColor(score) {

if (score >= 61)
		return ('#66cc33')
	if (score <= 39)
		return ('#ff0000')
	return ('#ffcc33')
}

/**************************************************************/
//Setup
/**************************************************************/
var displaced = []

var width = 900,
height = 600,
margin = {
	left : 80,
	right: 50,
	top : 80,
	bottom : 80
},
horizontalMargins = margin.left + margin.right,
verticalMargins = margin.top + margin.bottom,
plotAreaHeight = height - verticalMargins,
plotAreaWidth = width - horizontalMargins,

svg = d3.select('#graph')
	.append('svg')
	.attr('width', width)
	.attr('height', height),

g = svg.append('g')
	.attr('class', 'transformGroup')
 	.attr('transform', 'translate (' + margin.left + ',' + margin.top + ')')

var tooltip = d3.select('#graph').append('div')
	.attr('class', 'tooltip')
	.style('opacity', 0)
	.style('display', 'inline')

var reset = d3.select('#graph').append('p')
	.attr('class', 'reset-button cant')
	.style('opacity', 0.4)
	.html('reset')
	.on('click', resetCircles)

/**************************************************************/
//Format
/**************************************************************/
var dbFloat = d3.format('.2f')
var comma = d3.format(',')
/**************************************************************/
//Scale
/**************************************************************/

var xScale = d3.scaleLinear()
	.domain([0, 100])
	.range([0, plotAreaWidth])

yScale = d3.scalePow().exponent(0.4)
	.domain(d3.extent(movies, movie => movie.roi))
	.range([plotAreaHeight, 0])

var rScale = d3.scalePow().exponent(0.4)
	.domain(d3.extent(movies, movie => movie.prod_bud))
	.range([1, 8])

/**************************************************************/
//Axes
/**************************************************************/
var xAxisG = g.append('g').classed('x-axis', true)
	.attr('id', 'xAxis')
	.attr('transform', 'translate(8,' + (plotAreaHeight - 72 ) + ')')

g.append('text')
	.attr('transform', 'translate(8,' + (plotAreaHeight - 72 ) + ')')
	.attr('dy', -10)
	.attr('class', 'axis-label')
	.text('Metacritic score')

g.append('text')
	.attr('transform', `translate(${plotAreaWidth / 2}, 72)`)
	.attr('dy', 0)
	.attr('font-size', '2em')
	.attr('text-anchor', 'middle')
	.text('2017 in Film')
	.attr('opacity', 0.8)

g.append('text')
	.attr('transform', `translate(${plotAreaWidth / 2}, 72)`)
	.attr('dy', 20)
	.attr('font-size', '0.8em')
	.attr('text-anchor', 'middle')
	.text('(Hover over and Drag circles for more details)')
	.attr('opacity', 0.5)

g.append('text')
	.attr('transform', `translate(-40, ${plotAreaHeight / 2}) rotate(-90)`)
	.attr('class', 'axis-label')
	.attr('text-anchor', 'middle')
	.text('Return on Investment')

var yAxisG = g.append('g').classed('y-axis', true)
	.attr('id', 'yAxis')

var xTicks = Math.round(plotAreaWidth / 50)
var yTicks = Math.round(plotAreaHeight / 25)

var y_ticks = yScale.ticks()
y_ticks.push(-1)

var xAxis = d3.axisBottom(xScale)
	.ticks(xTicks)
	.tickSizeOuter(0)

var yAxis = d3.axisLeft(yScale)
	.ticks(yTicks)
	.tickSizeOuter(0)
	.tickValues(y_ticks)

xAxisG.call(xAxis)
yAxisG.call(yAxis)

/**************************************************************/
//Plotting
/**************************************************************/
var legend_sizes = [3, 8]
var legend_labels = ['smaller gross', 'larger gross']

var legend = g.append('g')
	.attr('class', 'legend')
	.attr('transform', 'translate (' + 16 + ',0)')
	.selectAll('legend-circles')
		.data(legend_sizes)
		.enter()
		.append('g')

legend.append('circle')
			.attr('cx', dp => 50 / 2)
			.attr('cy', (dp, i) => i * 40 + 30)
			.attr('r', (dp, i) => legend_sizes[i])
			.attr('fill', 'none')
			.attr('stroke', 'black')
			.attr('stroke-width', '0.2')

legend.append('text')
	.text( (dp, i) => legend_labels[i])
	.attr('font-size', '0.6em')
	.attr('text-anchor', 'middle')
	.attr('opacity', 0.5)
	.attr('x', dp => 50 / 2)
	.attr('y', (dp, i) => i * 40)
	.attr('dy', (dp, i) => i === 0 ? 20 : 15)
	// .attr('dy', -10)

var circles = g.append('g')
	.attr('class', 'circles')
	.attr('transform', 'translate (' + 8 + ',0)')
	.selectAll('circs')
		.data(movies)
		.enter()
		.append('circle')
			.attr('r', movie => Math.abs(Math.tan(yScale(movie.ms))))
			.attr('cx', movie => Math.abs(Math.sin(yScale(movie.ms)) * xScale(movie.ms)))
			.attr('cy', movie => Math.abs(Math.cos(xScale(movie.gross))))
			.attr('fill', movie => getColor(movie.ms))
			.attr('fill-opacity', '0.6')
			.attr('stroke', 'black')
			.attr('stroke-width', '0.2')
			.on('mouseover', mouseOverDot)
			.on('mouseout', mouseNotOnDot)
			.call(d3.drag()
				.on('start', dragstarted)
				.on('drag', dragged)
				.on('end', dragended))
			.transition()
				.duration(movie => xScale(movie.ms) * 4)
				.attr('r', movie => rScale(movie.gross))
				.attr('cx', movie => xScale(movie.ms))
				.attr('cy', movie => yScale(movie.roi))

/**************************************************************/
//Interaction
/**************************************************************/
function showReset() {
	// d3.select('#reset-button')
	reset
		.transition()
		.duration(800)
		.style('opacity', 1.0)
		.attr('class', 'reset-button can')
}

function resetCircles() {
	
	displaced.forEach(circle => {
		d3.select(circle)
			.transition()
				.duration(600)
				.attr('cx', movie => xScale(movie.ms))
				.attr('cy', movie => yScale(movie.roi))
				
	})

reset
		.transition()
		.duration(400)
		.style('opacity', 0.4)
		.attr('class', 'reset-button cant')

displaced = []

}

function dragstarted(d) {
	displaced.push(this)
	showReset()
	d3.select(this).raise().classed('active', true);
}

function dragged(d) {
  d3.select(this).attr('cx', d3.event.x).attr('cy', d3.event.y);
}

function dragended(d) {
  d3.select(this).classed('active', false);
}

function mouseOverDot(movie) {
	tooltip.style('opacity', 1.0)
	tooltip.style('background-color', 'rgba(255, 255, 255, 0.85)')
	tooltip.html(`<div class='tooltip-cont'>
					<strong>${movie['name']}</strong>
					<br/>Budget : $${(comma)(dbFloat(movie['prod_bud']))}
					<br/>Gross : $${(comma)(dbFloat(movie.gross))}
					<br/>Metacritic score : ${movie.ms}
				 </div>`
				)
	.style('position', 'absolute')
	.style('left', (d3.event.pageX + 15) + 'px')
	.style('top', (d3.event.pageY - 20) + 'px')
}

function mouseNotOnDot() {
	tooltip.style('opacity', 0);
	tooltip.html('')
}

</script>

</body>
</html>