| license: mit |
Part of the video course: D3.js in Motion.
This data was scrapped from IMDB and compiled by Kaggle.com . The data is availible at https://www.kaggle.com/deepmatrix/imdb-5000-movie-dataset/data
This dataset shows information on Movies from the United States
forked from curran's block: Pie Chart
forked from adamfknapp's block: gross by rating
| Rating | NumFilms | Gross | |
|---|---|---|---|
| G | 24 | 2226833089 | |
| PG | 246 | 19957276183 | |
| PG-13 | 700 | 45543856162 | |
| R | 757 | 26163219556 |
| <!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>Movie Gross by Rating</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| .domain { | |
| display: none; | |
| } | |
| .legendCells text { | |
| fill: #8E8883; | |
| font-size: 20pt; | |
| font-family: sans-serif; | |
| } | |
| .legend-label { | |
| fill: #635F5D; | |
| font-size: 30pt; | |
| font-family: sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const pieValue = d => d.Gross; | |
| const colorValue = d => d.Rating; | |
| const colorLabel = 'Rating'; | |
| 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(0) | |
| .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 + 60}, 150)`); | |
| colorLegendG.append('text') | |
| .attr('class', 'legend-label') | |
| .attr('x', -30) | |
| .attr('y', -40) | |
| .text(colorLabel); | |
| const colorScale = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| const colorLegend = d3.legendColor() | |
| .scale(colorScale) | |
| .shape('circle'); | |
| const row = d => { | |
| d.population = +d.population; | |
| return d; | |
| }; | |
| d3.csv('data_summary.csv', row, data => { | |
| colorScale.domain(data.map(colorValue)); | |
| const arcs = pie(data); | |
| pieG.selectAll('path').data(arcs) | |
| .enter().append('path') | |
| .attr('d', arc) | |
| .attr('fill', d => colorScale(colorValue(d.data))); | |
| colorLegendG.call(colorLegend) | |
| .selectAll('.cell text') | |
| .attr('dy', '0.1em'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |