2f:T18ad,Treemap = function Treemap(data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? d => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? d => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children value, // given a node d, returns a quantitative value (for area encoding; null for count) sort = (a, b) => d3.descending(a.value, b.value), // how to sort nodes prior to layout label, // given a leaf node d, returns the name to display on the rectangle group, // given a leaf node d, returns a categorical value (for color encoding) title, // given a leaf node d, returns its hover text link, // given a leaf node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) tile = d3.treemapBinary, // treemap strategy width = 640, // outer width, in pixels height = 400, // outer height, in pixels margin = 0, // shorthand for margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels padding = 1, // shorthand for inner and outer padding paddingInner = padding, // to separate a node from its adjacent siblings paddingOuter = padding, // shorthand for top, right, bottom, and left padding paddingTop = paddingOuter, // to separate a node’s top edge from its children paddingRight = paddingOuter, // to separate a node’s right edge from its children paddingBottom = paddingOuter, // to separate a node’s bottom edge from its children paddingLeft = paddingOuter, // to separate a node’s left edge from its children round = true, // whether to round to exact pixels colors = d3.schemeTableau10, // array of colors zDomain, // array of values for the color scale fill = "#ccc", // fill for node rects (if no group color encoding) fillOpacity = group == null ? null : 0.6, // fill opacity for node rects stroke, // stroke for node rects strokeWidth, // stroke width for node rects strokeOpacity, // stroke opacity for node rects strokeLinejoin, // stroke line join for node rects } = {}) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Compute the values of internal nodes by aggregating from the leaves. value == null ? root.count() : root.sum(d => Math.max(0, value(d))); // Prior to sorting, if a group channel is specified, construct an ordinal color scale. const leaves = root.leaves(); const G = group == null ? null : leaves.map(d => group(d.data, d)); if (zDomain === undefined) zDomain = G; zDomain = new d3.InternSet(zDomain); const color = group == null ? null : d3.scaleOrdinal(zDomain, colors); // Compute labels and titles. const L = label == null ? null : leaves.map(d => label(d.data, d)); const T = title === undefined ? L : title == null ? null : leaves.map(d => title(d.data, d)); // Sort the leaves (typically by descending value for a pleasing layout). if (sort != null) root.sort(sort); // Compute the treemap layout. d3.treemap() .tile(tile) .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .paddingInner(paddingInner) .paddingTop(paddingTop) .paddingRight(paddingRight) .paddingBottom(paddingBottom) .paddingLeft(paddingLeft) .round(round) (root); const svg = d3.create("svg") .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "Roboto, sans-serif") .attr("font-size", 16) .attr("font-weight", 800) .attr("fill", "#f8fafa"); const node = svg.selectAll("a") .data(leaves) .join("a") .attr("xlink:href", link == null ? null : (d, i) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.x0},${d.y0})`); node.append("rect") .attr("fill", color ? (d, i) => color(G[i]) : fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linejoin", strokeLinejoin) // mouseover & mouseout events on leaf hover .on("mouseover", function(d) { d3.select(this).attr("fill-opacity", 0.7) }) .on("mouseout", function(d) { d3.select(this).attr("fill-opacity", 1) d3.select(".leaf-text").style("fill", "#f8fafa") }) // transition effect .transition() .duration(500) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); if (T) { node.append("title").text((d, i) => T[i]) } if (L) { // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; node.append("clipPath") .attr("id", (d, i) => `${uid}-clip-${i}`) .append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("text") .attr("clip-path", (d, i) => `url(${new URL(`#${uid}-clip-${i}`, location)})`) .selectAll("tspan") .data((d, i) => `${L[i]}`.split(/\n/g)) .join("tspan") .attr("x", 3) .attr("y", (d, i, D) => `${(i === D.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, D) => i === D.length - 1 ? 0.7 : null) .text(d => d); } return Object.assign(svg.node(), {scales: {color}}); }30:Td04,function Speedometer(data,config){ const width = "700" const height = Math.min(width, 400) const radius = Math.min(width, 400) / 2; const arc = d3.arc().innerRadius(radius * 0.47).outerRadius(radius - 1); const arc2 = d3.arc().innerRadius(radius).outerRadius(radius+radius/4 - 1); let pie = d3.pie() .startAngle(-110 * (Math.PI/180)) .endAngle(110 * (Math.PI/180)) .sort(null) .value(d => d.value) // set angle based on data values const angle = ((220*data.value)/config.total) // use the following for discrete colors const arcs = pie([{name: "neg", value: 1/3, color: "#ba3a0b"}, {name: "neu", value: 1/3, color: "#b9c0c0"}, {name: "pos", value: 1/3, color: "#768948"}]); const colors = {"color1": "#702307", "color1light": "#ba3a0b", "color2": "#f0a202", "color3light": "#aeab66", "color3": "#768948", "color4": "#2b2f2f", "color5": "#111313"} const arcsnew = pie([{name: "", value: 0, color: ""}, {name: "", value: 1, color: ""}]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("text-anchor", "middle") .style("font", "12px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width / 2},${height / 1.5})`); // create the main arc with colors g.selectAll(".arc") .data(arcs) .join("path") .attr("class", "arc") .attr('fill', (d) => { if(d.data.name != ''){ return d.data.color; }else{ return 'url(#gradient)'; } }) .attr("d", arc) // create a secondary arc with gray color on top of the main g.selectAll(".arc2") .data(arcsnew) .join("path") .attr("class", "arc2") .attr('fill', "#e2e9e9") .attr("d", arc2) // Create the polygon that represents the needle const needle = g .append("polygon") .attr("points", "0,-10 18,0 0,240 -18,0") .attr("fill", colors.color4) .attr("stroke", colors.color4) .attr("transform", "rotate(180)"); // Rotate the needle to the desired angle needle .transition() .duration(750) .attr("transform", `rotate(${angle + 180})`); // create the circle in the middle of the needle const circle = g .append("circle") .attr("cx", 0) .attr("cy", 0) //.attr("dy", 15) .attr("r", 20) .attr("fill", colors.color5) const text = g.selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("dy", "0.35em"); text.filter(d => (d.endAngle - d.startAngle)).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("font-size", "24px") .attr("fill-opacity", 0.7); // set text to show on the bottom of the chart let textToShow = ""; if (data.value > 0.33){ // textToShow = `Positive ${data.value}` textToShow = `Positive` } else if (data.value>=-0.33 & data.value <= 0.33){ // textToShow = `Neutral ${data.value}` textToShow = `Neutral` } else { // textToShow = `Negative ${data.value}` textToShow = `Negative` } const p = g .append("text") // .text(`${Math.round((data.value/data.total)*100)}%`) .text(`${textToShow}`) .attr("x", 0) .attr("y", 80) .attr("font-size", "24px") .attr("font-family", "Roboto, sans-serif") return svg.node(); }31:Td1b,function SpeedometerGr(data,config){ const width = "700" const height = Math.min(width, 400) const radius = Math.min(width, 400) / 2; const arc = d3.arc().innerRadius(radius * 0.47).outerRadius(radius - 1); const arc2 = d3.arc().innerRadius(radius).outerRadius(radius+radius/4 - 1); let pie = d3.pie() .startAngle(-110 * (Math.PI/180)) .endAngle(110 * (Math.PI/180)) .sort(null) .value(d => d.value) // set angle based on data values const angle = ((220*data.value)/config.total) // use the following for discrete colors const arcs = pie([{name: "neg", value: 1/3, color: "#ba3a0b"}, {name: "neu", value: 1/3, color: "#b9c0c0"}, {name: "pos", value: 1/3, color: "#768948"}]); const colors = {"color1": "#702307", "color1light": "#ba3a0b", "color2": "#f0a202", "color3light": "#aeab66", "color3": "#768948", "color4": "#2b2f2f", "color5": "#111313"} const arcsnew = pie([{name: "", value: 0, color: ""}, {name: "", value: 1, color: ""}]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("text-anchor", "middle") .style("font", "12px sans-serif"); const g = svg.append("g") .attr("transform", `translate(${width / 2},${height / 1.5})`); // create the main arc with colors g.selectAll(".arc") .data(arcs) .join("path") .attr("class", "arc") .attr('fill', (d) => { if(d.data.name != ''){ return d.data.color; }else{ return 'url(#gradient)'; } }) .attr("d", arc) // create a secondary arc with gray color on top of the main g.selectAll(".arc2") .data(arcsnew) .join("path") .attr("class", "arc2") .attr('fill', "#e2e9e9") .attr("d", arc2) // Create the polygon that represents the needle const needle = g .append("polygon") .attr("points", "0,-10 18,0 0,240 -18,0") .attr("fill", colors.color4) .attr("stroke", colors.color4) .attr("transform", "rotate(180)"); // Rotate the needle to the desired angle needle .transition() .duration(750) .attr("transform", `rotate(${angle + 180})`); // create the circle in the middle of the needle const circle = g .append("circle") .attr("cx", 0) .attr("cy", 0) //.attr("dy", 15) .attr("r", 20) .attr("fill", colors.color5) const text = g.selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("dy", "0.35em"); text.filter(d => (d.endAngle - d.startAngle)).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("font-size", "24px") .attr("fill-opacity", 0.7); // set text to show on the bottom of the chart let textToShow = ""; if (data.value > 0.33){ // textToShow = `Positive ${data.value}` textToShow = `Θετικό` } else if (data.value>=-0.33 & data.value <= 0.33){ // textToShow = `Neutral ${data.value}` textToShow = `Ουδέτερο` } else { // textToShow = `Negative ${data.value}` textToShow = `Αρνητικό` } const p = g .append("text") // .text(`${Math.round((data.value/data.total)*100)}%`) .text(`${textToShow}`) .attr("x", 0) .attr("y", 80) .attr("font-size", "24px") .attr("font-family", "Roboto, sans-serif") return svg.node(); }32:T12e0,RadialDendro = function(data){ // set the container of the chart and chart details function autoBox() { document.body.appendChild(this); const {x, y, width, height} = this.getBBox(); document.body.removeChild(this); return [x, y, width, height]; } // change next 2 parameters to change the density and size of the final plot const width = 1080 const radius = width/2.5 const tree = d3.cluster().size([2*Math.PI, radius - 100]) // setting up colors to use etc. const colorsPalette =["#164457", "#6D1A0D", "#DB8E01", "#725E7F", "#CC9EA6", "#338C83", "#768948", "#206F82", "#BB2418", "#D7AD41", "#B7ADBE", "#CC9EA6", "#97C5C0", "#B9C3A2", "#8FAECB", "#F87E63", "#EDD798", "#E5CED2", "#DCEDEF", "#DCE1D1"] const colorsToUse = colorsPalette.slice(0,data.children.length) const color = d3.scaleOrdinal() .domain(data.children.map(d => d.name)) // .range(d3.schemeCategory10) .range(colorsToUse) // Set the color of each node by recursively inheriting. function setColor(d) { var name = d.data.name; d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null; if (d.children) d.children.forEach(setColor); } // reformating data to calculate each topic circle radius in relation to the frequence of each topic in the text //get the min and max values of the topic word weightings. These values are obtained during the process of topic modeling. So, it is also possible to get the values from python and change the domain parts of CirSize and CircleAlpha manually. function getMinMaxvalues() { let mappedData = data.children.map(d => d.children) var allthedata = [] for (let i = 0; i < mappedData.length; i++) { let j = i * 2; allthedata[j] = d3.min(mappedData[i].map(v => v.value)); allthedata[j+1] = d3.max(mappedData[i].map(v => v.value)); } return allthedata; } //define circle sizes by using getMinMaxvalues(). It is also possible to use the values obtained from python. In this case, it is not needed to define getMinMaxvalues(). const CirSize = d3.scaleSqrt().domain([d3.min(getMinMaxvalues()),d3.max(getMinMaxvalues())]).range([1,8]) //define circle opacities by using getMinMaxvalues() const CircleAlpha = d3.scaleLinear().domain([d3.min(getMinMaxvalues()),d3.max(getMinMaxvalues())]).range([0.3,1]) // the main radial dendogram component const root = tree(d3.hierarchy(data) //Sorting of words. Uncomment the adopted one. //the following line is for sorting the topic words by alphabetical order. //.sort((a, b) => a.data.name.toLowerCase().localeCompare (b.data.name.toLowerCase())) //the following line is for sorting the topic words by their weightings. .sort((a, b) => d3.descending(a.data.value, b.data.value)) ); setColor(root); const svg = d3.create("svg"); svg.append("g") .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .each(function(d) { d.target.linkNode = this; }) .attr("stroke", d => d.target.color); svg.append("g") .selectAll("circle") .data(root.descendants()) .join("circle") // uncomment next 2 lines to create a transition on circles entering // .transition() // .duration(1500) .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `) .attr("fill", d => d.children ? color(d.data.name) : "#484e4e") // //uncomment the following line to show circles with different opacities .attr("fill-opacity", d => d.children ? 1 : CircleAlpha(d.data.value)) .attr("r", d => d.children ? 4 : CirSize(d.data.value)); svg.append("g") .attr("font-family", "Roboto, sans-serif") .attr("font-size", 12) .attr("font-weight", 400) .attr("fill", "#484e4e") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") // exclude the dash if no name is defined - used only for the first title which we want to exclude .text(d => d.children ? `${d.data.name}` : `${d.data.name} (${d.data.value})`) .clone(true).lower() .attr("stroke", "white"); return svg.attr("viewBox", autoBox).node(); }33:[] 2d:{"title":"Helper functions and data","cells":[{"id":0,"value":"# Helper functions and data","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"### Setup speeches titles to use","pinned":false,"hidden":false,"mode":"md"},{"id":670,"value":"import {speeches_names} from \"@imedd-elections2023/speeches-list-and-info\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Treemap","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"### Speedometer","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"async function createSpeedChart(pol,speech) {\n const response = await fetch(gh_path+pol+\"/\"+speech+\"/analysis/visuals/sentiment.json\");\n const config_speedometer = ({\"total\": 2, \"average\": 0, \"minimum\": -1, \"maximum\": 1});\n const data_sentiment_speeches = Object({\"loc\":speech, \n \"value\": Math.round((await response.json())*100)/100});\n \n return Speedometer(data_sentiment_speeches,config_speedometer)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"async function createSpeedChartGr(pol,speech) {\n const response = await fetch(gh_path+pol+\"/\"+speech+\"/analysis/visuals/sentiment.json\");\n const config_speedometer = ({\"total\": 2, \"average\": 0, \"minimum\": -1, \"maximum\": 1});\n const data_sentiment_speeches = Object({\"loc\":speech, \n \"value\": Math.round((await response.json())*100)/100});\n \n return SpeedometerGr(data_sentiment_speeches,config_speedometer)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"### Radial Dendrogram","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"### Functions, buttons, data","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"gh_path = \"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"gh_list_of_speeches = fetch(\"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/list_of_speeches_new.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"gh_list_of_speeches_pub = {\n let list_of_ready_speeches = (await fetch(\"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/ready_to_viz_speeches.json\").then((response) => response.json()))\n let pub_speeches = {}\n for (const key of Object.keys(gh_list_of_speeches)) {\n const value = gh_list_of_speeches[key]\n pub_speeches[key] = value.filter(e => list_of_ready_speeches.includes(e[1]))\n }\n return pub_speeches\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function politicalLeaderButton(data){\n let list_of_leaders = Object.keys(data)\n return Inputs.select(list_of_leaders, {value:list_of_leaders[0], label: \"\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"index_pol_leaders_eng = Object({\n \"Kyriakos Mitsotakis\": \"Mitsotakis\",\n \"Alexis Tsipras\": \"Tsipras\",\n \"Nikos Androulakis\": \"Androulakis\",\n \"Dimitris Koutsoumpas\": \"Koutsoumpas\",\n \"Kyriakos Velopoulos\": \"Velopoulos\",\n \"Giannis Varoufakis\": \"Varoufakis\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"index_pol_leaders_gr = Object({\n \"Κυριάκος Μητσοτάκης\": \"Mitsotakis\",\n \"Αλέξης Τσίπρας\": \"Tsipras\",\n \"Νίκος Ανδρουλάκης\": \"Androulakis\",\n \"Δημήτρης Κουτσούμπας\": \"Koutsoumpas\",\n \"Κυριάκος Βελόπουλος\": \"Velopoulos\",\n \"Γιάννης Βαρουφάκης\": \"Varoufakis\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"function speechButton(data, leader){\n let list_of_speeches = Object.values(data[leader])\n return list_of_speeches\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"list_of_visualizations = Object({\n // \"Polarization\": \"polarization_sequence\",\n \"Polarization\": \"polarization-definition_sequence\",\n // \"Toxicity\": \"toxicity_sequence\",\n // \"Toxicity Def\": \"toxicity-definition_sequence\",\n // \"Populism\": \"populism_sequence\",\n \"Populism\": \"populism-definition_sequence\",\n // \"Hate Speech\": \"hate speech_sequence\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"list_of_visualizations_gr = Object({\n \"Πόλωση\": \"polarization-definition_sequence\",\n \"Λαϊκισμός\": \"populism-definition_sequence\",\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"function visualizationsButton(data){\n return Inputs.select(Object.keys(data), {value: Object.keys(data), label:\"\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"list_treemap_views = Object({\n 'Agenda': \"only_topic_treemap_political_agenda\",\n 'Criticism': \"only_topic_treemap_criticism\",\n 'All Data': \"only_topic_treemap\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"list_treemap_views_gr = Object({\n 'Ατζέντα': \"only_topic_el_treemap_political_agenda\",\n 'Κριτική': \"only_topic_el_treemap_criticism\",\n 'Όλα τα δεδομένα': \"only_topic_el_treemap\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"function index_of_speeches_creation(){\n const index_speeches = {};\n for (let i=0; i response.json()); \n data_github_tha_meter[politician].push(data_fetched_pol_leader.freq);\n }\n }\n return data_github_tha_meter;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"data_tha_meter_all = thaMeterPolLeaders()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}