-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdialogue-position-graph.html
141 lines (124 loc) · 5.12 KB
/
dialogue-position-graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
<link rel="stylesheet" href="web.css">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="chart" style="width:420px;height:420px;">
<!-- This is where we will put our chart. -->
</div>
<style>
</style>
<script>
// 1. Data - plotting a couple of points along the y=x line
d3.csv("data_cleaned_merged/line_percents_by_character.csv").then((allData) => {
data_know_gender = allData.filter(d => {
if ((d.Gender === 'm' || d.Gender === 'f') && parseInt(d.Position_in_Credits) <= 10){
return d}
})
data = []
count = []
for(let i =1; i<=10;i++){
let temp_count = {male_count:0, female_count:0, male_sum:0, female_sum:0}
let temp = {position:i, male_lines_avg:0, female_lines_avg:0}
data.push(temp)
count.push(temp_count)
}
data_know_gender.forEach(function(d, index) {
if(d.Gender === 'm'){
count[parseInt(d.Position_in_Credits)-1].male_count++
count[parseInt(d.Position_in_Credits)-1].male_sum += parseFloat(d.Character_Line_Percent)
}
if(d.Gender === 'f'){
count[parseInt(d.Position_in_Credits)-1].female_count++
count[parseInt(d.Position_in_Credits)-1].female_sum += parseFloat(d.Character_Line_Percent)
}
})
for(let i = 0; i < 10; i++){
data[i].male_lines_avg = (count[i].male_sum/count[i].male_count)*100
data[i].female_lines_avg = (count[i].female_sum/count[i].female_count)*100
}
//data=[{position: 1,male_lines: 50,female_lines:80}, {position: 2, male_lines: 20,female_lines:70}]
// 2. Setting up variables that describe our chart's space.
const height = 400;
const width = 500;;
const margin = ({top: 10, right: 10, bottom: 20, left: 30});
var color = d3.scaleOrdinal()
.domain(['m','f'])
.range(['#f5d6b0','#619ba5'])
// 3. Create a SVG we will use to make our chart.
// See https://developer.mozilla.org/en-US/docs/Web/SVG for more on SVGs.
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// 4. Setting up scales.
const xScale = d3.scaleBand()
.domain([1,2,3,4,5,6,7,8,9,10])
.range([margin.left, width - margin.right])
.padding([0.2])
// .nice();
var xSubgroup = d3.scaleBand()
.domain(['m', 'f'])
.range([0, xScale.bandwidth()])
.padding([0.05])
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top])
.nice();
svg.append('g')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")")
//6. Drawing our x-axis
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(xScale).tickSize(0))
// //7. Drawing our y-axis
svg.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(yScale).tickFormat(d => d + "%"))
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
svg.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + xScale(d.position) + ",0)"; })
.selectAll("rect")
.data(function(d) {
a = [{key: 'm', value: d.male_lines_avg}, {key:'f', value:d.female_lines_avg}]
//console.log(a)
return a})
.enter().append("rect")
.attr("x", function(d) { return xSubgroup(d.key); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xSubgroup.bandwidth())
.attr("height", function(d) { return height - margin.bottom- yScale(d.value); })
.attr("fill", function(d) { return color(d.key); })
.on("mouseover", function(event, d){
tooltip.transition()
.duration(200)
.style("opacity", .9)
tooltip.html(function(){
if(d.key === 'm'){
return "Male lines: " + parseInt(d.value) +"%"
}else{
return "Female lines: " + parseInt(d.value)+"%"
}
})
.style("left", (event.pageX) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function(event, d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
})
document.getElementById("chart").appendChild(svg.node());
});
</script>
</body>
<!-- This adapted from Arvind's observable from lecture. https://observablehq.com/d/4c93c3a516d35624 -->
<!-- Great D3 intro resource: https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3 -->
</html>