{ // Determine which dataset to used based on radio button and filter appropriately let data = null; if (weightedOrNotPlay === "Regular") { data = results.filter(d => d["Play"] === playSelect); } else if (weightedOrNotPlay === "Weighted") { data = weighted_results.filter(d => d["Play"] === playSelect); } else { data = self_results.filter(d => d["Play"] === playSelect); } // Find play colors and create the appropriate character to color dictionary let chars = find_char_list_for_play(playSelect), play_scenes = find_scenes_for_play(playSelect), charToColor = create_char_dict(chars), colors = ["#c8eae4", "#6cc6b7"]; let width = 1000, height = 125*chars.length+30, margin = { top: 5, left: 60, bottom: 20, right: 60 }; // Create base graphical object const svg = d3.create('svg').attr('width', width).attr('height',height); let char_svgs = new Array(chars.length); let charlines = new Array(chars.length); for (let i = 0; i < chars.length; i++) { // Create char graphical object char_svgs[i] = svg.append('svg').attr('width', width).attr('height', 125).attr('y', 125*i); // Set graph size, margins, axes, and scaling functions let xScale = d3.scalePoint() .domain(play_scenes) .range([margin.left, width - margin.right]) .padding(0.5), yScale = d3.scaleLinear() .domain([0, 10]) .range([125 - margin.bottom, margin.top]), radScale = d3.scaleSqrt() .domain([0, 15]) .range([3, 13]), line = d3.line() .x(d => xScale(d["Scene"])) .y(d => yScale(d["Percentage"])), area = d3.area() .curve(d3.curveLinear) .x(d => xScale(d["Scene"])) .y0(yScale(0)) .y1(d => yScale(d["Percentage"])) // Graph axes char_svgs[i].append('g') .attr('transform', `translate(0, ${125 - margin.bottom})`) .call(d3.axisBottom(xScale).tickSizeOuter(0)) .selectAll("text") .style('fill', '#808080'); char_svgs[i].append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(yScale).ticks(5)) .selectAll("text") .style('fill', '#808080'); char_svgs[i].append("text") .style("font", "24px times") .style('font-weight', 'bold') // .style('fill', "#cccccc") .style('fill', '#a6a6a6') .text(chars[i]) .attr('x', 70) .attr('y', 25) // Create line and dot object charlines[i] = char_svgs[i].append("g") .attr("class", "char-lines"); // Create lines for each female character in the play let data_sets = [data.filter(d => d["Speaker"] === chars[i]), get_totals_for_char(playSelect, chars[i], weightedOrNotPlay)]; charlines[i].append("path") .datum(data_sets[0]) //.attr("id", j < 1 ? "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") : "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + "_total") .attr("id", "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "")) .attr("class", "char_path tog") .attr("fill", "none") //.attr("stroke", j < 1 ? colors[i%2] : "#cccccc") .attr("stroke", colors[i%2]) .attr("stroke-width", 3) .attr("d", line) .style("mix-blend-mode", "multiply") // Create a dot for each scene for each character in the play // charlines[i].selectAll(j < 1 ? ".dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") : ".dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "")) charlines[i].selectAll(".dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "")) .data(data_sets[0]) .join("circle") // .attr("class", j < 1 ? "dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog" : "dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog") .attr("class", "dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog") // .attr("fill", j < 1 ? colors[i%2]: "#cccccc") .attr("fill", colors[i%2]) // .attr("r", d => d.Speaker === "Total" ? radScale(0.25) : radScale(find_radius(weightedOrNotPlay, d))) .attr("r", d => radScale(find_radius(weightedOrNotPlay, d))) .attr("cx", d => xScale(d.Scene)) .attr("cy", d => yScale(d.Percentage)) .on('mouseover', function(event, d) { // Determine view-specific information let to_measure, h; if (weightedOrNotPlay == "Weighted" && d.Speaker !== "Total") { // If the view is weighted, calculate information strings and figure out which to use to determine the text box width let char_str = d.NumCharacters + " characters"; let speaker_str = d.Speaker + " – " + d.Scene; if (char_str.length > speaker_str.length) { to_measure = char_str; } else { to_measure = speaker_str; } // Set text box height for weighted view h = 75; // Add the weighted view specific information to text box d3.select('#num-char-text-sp-' + String(i)).text(char_str); d3.select('#num-char-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#num-char-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)+45); } else { // Determine height and string to use to calculate text box width for unweighted views to_measure = d.Speaker + " – " + d.Scene; h = 55; } // Create the text box with the appropriate x and y values and information d3.select('#speaker-text-sp-' + String(i)).text(d.Speaker + " – " + d.Scene); d3.select('#percent-text-sp-' + String(i)).text(d.Percentage.toFixed(2) + "%"); d3.select('#speaker-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#speaker-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)); d3.select('#percent-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#percent-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)+25); d3.select('#background-box-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure))).attr("y", calculateY(d3.pointer(event)[1], 125) - 20).attr("width", findWidthSp(to_measure)).attr("height", h).attr('fill', '#f7f5f5').attr('stroke', 'black'); }) .on('mouseout', function(event, d) { // Return all objects to their normal colors and erase text box d3.select('#background-box-sp-' + String(i)).attr('fill', '#00ff0000').attr('stroke', '#00ff0000'); d3.select('#speaker-text-sp-' + String(i)).text(""); d3.select('#percent-text-sp-' + String(i)).text(""); d3.select('#num-char-text-sp-' + String(i)).text(""); }) charlines[i].append("path") .datum(data.filter(d => d["Speaker"] === chars[i])) .attr("fill", colors[i%2]) .attr("class", "comp_area_char tog") .attr("d", area) charlines[i].append("path") .datum(data_sets[1]) //.attr("id", j < 1 ? "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") : "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + "_total") .attr("id", "path_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + "_total") .attr("class", "char_path tog") .attr("fill", "none") //.attr("stroke", j < 1 ? colors[i%2] : "#cccccc") .attr("stroke", "#cccccc") .attr("stroke-width", 3) .attr("d", line) .style("mix-blend-mode", "multiply") // Create a dot for each scene for each character in the play // charlines[i].selectAll(j < 1 ? ".dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") : ".dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "")) charlines[i].selectAll(".dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "")) .data(data_sets[1]) .join("circle") // .attr("class", j < 1 ? "dot_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog" : "dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog") .attr("class", "dot_Total_" + chars[i].replaceAll(" ", "_").replaceAll("'", "") + " dot_Chars tog") // .attr("fill", j < 1 ? colors[i%2]: "#cccccc") .attr("fill", "#cccccc") // .attr("r", d => d.Speaker === "Total" ? radScale(0.25) : radScale(find_radius(weightedOrNotPlay, d))) .attr("r", radScale(0.25)) .attr("cx", d => xScale(d.Scene)) .attr("cy", d => yScale(d.Percentage)) .on('mouseover', function(event, d) { // Determine view-specific information let to_measure, h; if (weightedOrNotPlay == "Weighted" && d.Speaker !== "Total") { // If the view is weighted, calculate information strings and figure out which to use to determine the text box width let char_str = d.NumCharacters + " characters"; let speaker_str = d.Speaker + " – " + d.Scene; if (char_str.length > speaker_str.length) { to_measure = char_str; } else { to_measure = speaker_str; } // Set text box height for weighted view h = 75; // Add the weighted view specific information to text box d3.select('#num-char-text-sp-' + String(i)).text(char_str); d3.select('#num-char-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#num-char-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)+45); } else { // Determine height and string to use to calculate text box width for unweighted views to_measure = d.Speaker + " – " + d.Scene; h = 55; } // Create the text box with the appropriate x and y values and information d3.select('#speaker-text-sp-' + String(i)).text(d.Speaker + " – " + d.Scene); d3.select('#percent-text-sp-' + String(i)).text(d.Percentage.toFixed(2) + "%"); d3.select('#speaker-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#speaker-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)); d3.select('#percent-text-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure)) + 10); d3.select('#percent-text-sp-' + String(i)).attr("y", calculateY(d3.pointer(event)[1], 125)+25); d3.select('#background-box-sp-' + String(i)).attr("x", calculateX(d3.pointer(event)[0], width-margin.right, findWidthSp(to_measure))).attr("y", calculateY(d3.pointer(event)[1], 125) - 20).attr("width", findWidthSp(to_measure)).attr("height", h).attr('fill', '#f7f5f5').attr('stroke', 'black'); }) .on('mouseout', function(event, d) { // Return all objects to their normal colors and erase text box d3.select('#background-box-sp-' + String(i)).attr('fill', '#00ff0000').attr('stroke', '#00ff0000'); d3.select('#speaker-text-sp-' + String(i)).text(""); d3.select('#percent-text-sp-' + String(i)).text(""); d3.select('#num-char-text-sp-' + String(i)).text(""); }) // Create the hover box objects var hoverInfoSp = char_svgs[i].append("g") .attr("class", "hover-info-" + String(i)) .attr('pointer-events', 'none') .style('font', '16px times') .style('font-weight', 'bold') .attr('x', 80) .attr('y', 100); hoverInfoSp.append('rect') .attr("id", "background-box-sp-" + String(i)) .attr("stroke-width", 1.5) .attr("rx", 15); hoverInfoSp.append('text') .attr("id", "speaker-text-sp-" + String(i)) .attr('x', 80) .attr('y', 100); hoverInfoSp.append('text') .attr("id", "percent-text-sp-" + String(i)) .attr('x', 80) .attr('y', 130); hoverInfoSp.append('text') .attr("id", "num-char-text-sp-" + String(i)) .attr('x', 80) .attr('y', 130); } // Create the appropriate y-axis label depending on the view if (weightedOrNotPlay === "Regular" || weightedOrNotPlay === "Spoken to Audience") { svg.append('text') .attr('class', 'axis-label-sp') .style("font", "16px times") .style('font-weight', 'bold') .text("Percentage of Total Words") .attr('transform', 'rotate(-90)') .attr('x', -height/2-50) .attr('y', 20); } else { svg.append('text') .attr('class', 'axis-label-sp') .style("font", "16px times") .style('font-weight', 'bold') .text("Percentage of Total Impact") .attr('transform', 'rotate(-90)') .attr('x', -height/2-50) .attr('y', 20); } // Create the x-axis label svg.append('text') .attr('class', 'axis-label-sp') .style("font", "16px times") .style('font-weight', 'bold') .text("Scene") .attr('x', (width - margin.left - margin.right)/2) .attr('y', height - 8); return svg.node() }