This donut chart shows the number of movies by country from TMDB 5000 Movie Dataset. Preprocessed using python. Also added mouseover tooltip to show the number count.
Forked from Curran's Donut Chart.
license: mit |
This donut chart shows the number of movies by country from TMDB 5000 Movie Dataset. Preprocessed using python. Also added mouseover tooltip to show the number count.
Forked from Curran's Donut Chart.
[ | |
{ | |
"count": 126, | |
"country": "Canada" | |
}, | |
{ | |
"count": 4, | |
"country": "Argentina" | |
}, | |
{ | |
"count": 23, | |
"country": "Italy" | |
}, | |
{ | |
"count": 3, | |
"country": "Czech Republic" | |
}, | |
{ | |
"count": 3807, | |
"country": "USA" | |
}, | |
{ | |
"count": 1, | |
"country": "Afghanistan" | |
}, | |
{ | |
"count": 1, | |
"country": "Panama" | |
}, | |
{ | |
"count": 1, | |
"country": "Kyrgyzstan" | |
}, | |
{ | |
"count": 1, | |
"country": "Cambodia" | |
}, | |
{ | |
"count": 154, | |
"country": "France" | |
}, | |
{ | |
"count": 1, | |
"country": "Bahamas" | |
}, | |
{ | |
"count": 3, | |
"country": "West Germany" | |
}, | |
{ | |
"count": 1, | |
"country": "Georgia" | |
}, | |
{ | |
"count": 1, | |
"country": "Aruba" | |
}, | |
{ | |
"count": 1, | |
"country": "Peru" | |
}, | |
{ | |
"count": 1, | |
"country": "Nigeria" | |
}, | |
{ | |
"count": 8, | |
"country": "Norway" | |
}, | |
{ | |
"count": 5, | |
"country": "Thailand" | |
}, | |
{ | |
"count": 1, | |
"country": "Kenya" | |
}, | |
{ | |
"count": 1, | |
"country": "Slovakia" | |
}, | |
{ | |
"count": 55, | |
"country": "Australia" | |
}, | |
{ | |
"count": 4, | |
"country": "Iran" | |
}, | |
{ | |
"count": 1, | |
"country": "Indonesia" | |
}, | |
{ | |
"count": 3, | |
"country": "Iceland" | |
}, | |
{ | |
"count": 1, | |
"country": "Official site" | |
}, | |
{ | |
"count": 1, | |
"country": "New Line" | |
}, | |
{ | |
"count": 1, | |
"country": "Slovenia" | |
}, | |
{ | |
"count": 30, | |
"country": "China" | |
}, | |
{ | |
"count": 1, | |
"country": "Chile" | |
}, | |
{ | |
"count": 4, | |
"country": "Belgium" | |
}, | |
{ | |
"count": 97, | |
"country": "Germany" | |
}, | |
{ | |
"count": 1, | |
"country": "Dominican Republic" | |
}, | |
{ | |
"count": 1, | |
"country": "Bulgaria" | |
}, | |
{ | |
"count": 17, | |
"country": "Hong Kong" | |
}, | |
{ | |
"count": 2, | |
"country": "Taiwan" | |
}, | |
{ | |
"count": 33, | |
"country": "Spain" | |
}, | |
{ | |
"count": 12, | |
"country": "Ireland" | |
}, | |
{ | |
"count": 5, | |
"country": "Netherlands" | |
}, | |
{ | |
"count": 1, | |
"country": "Colombia" | |
}, | |
{ | |
"count": 1, | |
"country": "Libya" | |
}, | |
{ | |
"count": 11, | |
"country": "Denmark" | |
}, | |
{ | |
"count": 5, | |
"country": "Poland" | |
}, | |
{ | |
"count": 1, | |
"country": "Finland" | |
}, | |
{ | |
"count": 4, | |
"country": "Israel" | |
}, | |
{ | |
"count": 1, | |
"country": "Cameroon" | |
}, | |
{ | |
"count": 1, | |
"country": "Turkey" | |
}, | |
{ | |
"count": 1, | |
"country": "Philippines" | |
}, | |
{ | |
"count": 6, | |
"country": "Sweden" | |
}, | |
{ | |
"count": 2, | |
"country": "Hungary" | |
}, | |
{ | |
"count": 3, | |
"country": "Switzerland" | |
}, | |
{ | |
"count": 15, | |
"country": "New Zealand" | |
}, | |
{ | |
"count": 11, | |
"country": "Russia" | |
}, | |
{ | |
"count": 8, | |
"country": "Brazil" | |
}, | |
{ | |
"count": 1, | |
"country": "Soviet Union" | |
}, | |
{ | |
"count": 1, | |
"country": "Pakistan" | |
}, | |
{ | |
"count": 4, | |
"country": "Romania" | |
}, | |
{ | |
"count": 17, | |
"country": "Mexico" | |
}, | |
{ | |
"count": 1, | |
"country": "Egypt" | |
}, | |
{ | |
"count": 1, | |
"country": "United Arab Emirates" | |
}, | |
{ | |
"count": 8, | |
"country": "South Africa" | |
}, | |
{ | |
"count": 34, | |
"country": "India" | |
}, | |
{ | |
"count": 448, | |
"country": "UK" | |
}, | |
{ | |
"count": 2, | |
"country": "Greece" | |
}, | |
{ | |
"count": 23, | |
"country": "Japan" | |
}, | |
{ | |
"count": 14, | |
"country": "South Korea" | |
} | |
] |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
<title>Pie Chart</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.domain { | |
display: none; | |
} | |
.legendCells text { | |
fill: #8E8883; | |
font-size: 25pt; | |
font-family: sans-serif; | |
} | |
.legend-label { | |
fill: #635F5D; | |
font-size: 45pt; | |
font-family: sans-serif; | |
} | |
.toolTip { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
position: absolute; | |
display: none; | |
width: auto; | |
height: auto; | |
background: none repeat scroll 0 0 rgba(192,192,192,0.95); | |
border: 0 none; | |
border-radius: 2px 2px 2px 2px; | |
box-shadow: -3px 3px 15px #888888; | |
color: black; | |
font: 12px sans-serif; | |
padding: 10px; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width="960" height="500"></svg> | |
<script> | |
const pieValue = d => d.count; | |
const colorValue = d => | |
d.count > 50 ? d.country : 'Other'; | |
const colorValue2 = d => | |
d.count < 50 ? d.country : 'Other'; | |
const colorLabel = 'Country'; | |
const margin = { left: 20, right: 400, top: 1, bottom: 1 }; | |
const svg = d3.select('svg'); | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = | |
width - margin.left - margin.right; | |
const innerHeight = | |
height - margin.top - margin.bottom; | |
const pie = d3.pie().value(pieValue); | |
const arc = d3.arc() | |
.innerRadius(innerHeight / 4) | |
.outerRadius(innerHeight / 2); | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const pieG = g.append('g') | |
.attr('transform', `translate(${innerWidth / 2},${innerHeight / 2})`); | |
const colorLegendG = g.append('g') | |
.attr('transform', `translate(${innerWidth + 50}, 130)`); | |
colorLegendG.append('text') | |
.attr('class', 'legend-label') | |
.attr('left', 43) | |
.attr('right', -40) | |
.attr('y', -20) | |
.text(colorLabel); | |
const colorScale = d3.scaleOrdinal() | |
.range(d3.schemeCategory10); | |
const colorLegend = d3.legendColor() | |
.scale(colorScale) | |
.shape('square'); | |
var div = d3.select("body") | |
.append("div") | |
.attr("class", "toolTip"); | |
d3.json('country_counts.json', data => { | |
//console.log(data) | |
colorScale.domain(data.map(colorValue)); | |
const arcs = pie(data); | |
var focus = svg.append("g") | |
.attr("class", "focus") | |
.style("display", "none"); | |
pieG.selectAll('path') | |
.data(arcs) | |
.enter() | |
.append('path') | |
.attr('d', arc) | |
.attr('fill', | |
d => colorScale(colorValue(d.data))) | |
.on("mousemove", function(d){ | |
div.style("left", d3.event.pageX-40+"px"); | |
div.style("top", d3.event.pageY-5+"px"); | |
div.style("display", "inline-block"); | |
div.html((d.data.country)+"<br>"+(d.data.count)); | |
}) | |
.on("mouseout", function(d){ | |
div.style("display", "none"); | |
}); | |
colorLegendG.call(colorLegend) | |
.selectAll('.cell text') | |
.attr('dy', '0.2em'); | |
} | |
); | |
</script> | |
</body> | |
</html> |
�PNG | |