2c:null 2d:["$","title",null,{"children":"Test visualizations | Tasos Meletlidis | Observable"}] 32:T1977,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", "sans-serif") .attr("font-family", "Roboto") .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", "#aeccb7") d3.select(this).attr("fill-opacity", 0.7) }) .on("mouseout", function(d) { // d3.select(this).attr("fill", d => color == null ? fill : color(group(d.data, 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) // .attr("fill", "#f8fafa") .text(d => d); } return Object.assign(svg.node(), {scales: {color}}); }33:T13f1,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"}]); // use the following for gradient colors // const arcs = pie([{name: "", value: 0, color: "#ba3a0b"}, {name: "", value: 1, 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})`); // setting up gradient alternative const gradient = svg.append("svg:defs") .append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "50%") .attr("x2", "100%") .attr("y2", "50%") gradient.append("svg:stop") .attr("offset", "0") .attr("stop-color", colors.color1) .attr("stop-opacity", 1); gradient.append("svg:stop") .attr("offset", "0.25") .attr("stop-color", colors.color1light) .attr("stop-opacity", 1); gradient.append("svg:stop") .attr("offset", "0.5") .attr("stop-color", colors.color2) .attr("stop-opacity", 1); gradient.append("svg:stop") .attr("offset", "0.75") .attr("stop-color", colors.color3light) .attr("stop-opacity", 1); gradient.append("svg:stop") .attr("offset", "1") .attr("stop-color", colors.color3) .attr("stop-opacity", 1); // 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) // needle specs // const rect = g // .append("rect") // .attr("x", -2.5) // .attr("y", 0) // .attr("width", 5) // .attr("height", 275) // .attr("fill", colors.color4) // .attr("stroke", colors.color4) // //.attr("stroke-width", "4px") // .attr("transform", "rotate(180)") // .transition() // .duration(750) // .attr("transform", `rotate(${angle+180})`) // 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.append("tspan") // .attr("x", 0) // .attr("y", "-0.7em") // .attr("font-size", "18px") // .style("font-weight", "bold") // .text(d => d.data.name); 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) // .text(d => { // if(d.data.name != ''){ // return d.data.value.toLocaleString(); // } // }); // 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") return svg.node(); }34:T6a2,StepChartSentiment = Plot.plot({ style: "overflow: visible; background: transparent", height: 440, width: 1150, x: { label: "Paragraph No", }, y: { label: type_button_fraction, domain: [0, 1] }, marks: [ Plot.text(data_legend, { x: "x", y: "y", text: "title", fontSize: "12px", fontWeight: "600", textAnchor: "start", }), // bg area between 0 and 0.5 Plot.area(data_fraction_github, { x1: "par", y1: 0, x2: "par", y2: 0.5, fill: "#e2e9e9", fillOpacity: 0.5 }), // bg area between 0.5 and 0.8 Plot.area(data_fraction_github, { x1: "par", y1: 0.5, x2: "par", y2: 0.8, fill: "#f7eab7", fillOpacity: 0.5 }), // bg area between 0.8 and 1.0 Plot.area(data_fraction_github, { x1: "par", y1: 0.8, x2: "par", y2: 1.0, fill: "#d35f3c", fillOpacity: 0.5 }), // Plot.dot(data_fraction_github, { // x: "par", // y: "weight", // strokeWidth: 3, // title: "text", // }), Plot.line(data_fraction_github, { x: "par", y: "weight", strokeWidth: 2, stroke: "#114b5f", curve: "step", // fill: "weight", // title: "text", // dy: -17.5, // inset: 1 }), // Plot.text(data_linechart_new, Plot.selectLast({ // x: "par", // y: "weight", // z: "speech", // text: "speech", // textAnchor: "start", // dx: 2 // })) ], // color: { // type: "ordinal", // domain: Object.keys(lineColorScale), // range: ["#114b5f"], // legend: true, // } })35:T4b4,Plot.plot({ style: "overflow: visible;", height: 450, padding: 0, // grid: true, width: 1000, y: { grid: true, label: "↑ Sentiment", domain: [-1,1] }, x: { grid: true, label: "Speech completion (%)", }, marks: [ // Display a horizontal line at y = 0 Plot.ruleY([0]), // Create a dot mark // Plot.dot(data_linechart_new, { // x: "par", // y: "weight", // }), // Create a line mark // Plot.line(data_linechart_new, { // x: "par", // y: "weight", // stroke: "speech", // curve: "linear" // }), // Create an area chart - does not work with text below Plot.areaY(data_linechart_new, { x: "par", y: "weight", order: "value", fill: "speech", fillOpacity: 0.4, curve: "natural" }) // Plot.text(data_linechart_new, Plot.selectLast({ // x: "par", // y: "weight", // z: "speech", // text: "speech", // textAnchor: "start", // dx: 2 // })) ], color: { // type: "ordinal", // domain: Object.keys(lineColorScale), // range: Object.values(lineColorScale), legend: true, } })36:T1497,RadialDendro = function(data){ // Parameters // set the data to read // const data = data_radial // let data; // const data = ner_tree // 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]; } const width = 800 const radius = width/2 const tree = d3.cluster().size([2*Math.PI, radius - 100]) // setting up colors to use etc. const colorsPalette =["#338c83", "#ba3a0b", "#0e3354", "#725e7f", "#114b5f","#cc9ea6", "#75b9be", "#f0a202", "#eadb88", "#0b0632", "#768948", "#8eb7a3", "#cee1d1", "#af9543", "#b75f0e", "#af370b", "#842909", "#0b0664", "#338ce7", "#ba3a6f", "#0e33b8", "#725ee3", "#cc9eff", "#f0a266", "#7689ac", "#af95a7", "#b75f72", "#cee16d", "#af376f", "#84296d"] // const colorsPalette =["#768948", "#eadb88", "#f0a202", "#75b9be", "#338c83", "#114b5f", "#725e7f", "#ba3a0b", "#ba3a0b"] 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") // .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) : color(d.data.group)) // //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)) // .on("click", function(d) { // d3.select(this) // .each(function(node) { // node.children.forEach(function(child) { // d3.select(child.linkNode).style("visibility", function() { // return d3.select(child.linkNode).style("visibility") === "hidden" ? "visible" : "hidden"; // }); // }); // }); // }); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", 600) .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") .text(d => `${d.data.name} - ${d.data.value}`) .clone(true).lower() .attr("stroke", "white"); return svg.attr("viewBox", autoBox).node(); }37:T1146,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/tree function Tree(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 tree = d3.tree, // layout algorithm (typically d3.tree or d3.cluster) sort, // how to sort nodes prior to layout (e.g., (a, b) => d3.descending(a.height, b.height)) label, // given a node d, returns the display name title, // given a node d, returns its hover text link, // given a node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) width = 640, // outer width, in pixels height, // outer height, in pixels r = 3, // radius of nodes padding = 1, // horizontal padding for first and last column fill = "#999", // fill for nodes fillOpacity, // fill opacity for nodes stroke = "#555", // stroke for links strokeWidth = 1.5, // stroke width for links strokeOpacity = 0.4, // stroke opacity for links strokeLinejoin, // stroke line join for links strokeLinecap, // stroke line cap for links halo = "#fff", // color of label halo haloWidth = 3, // padding around the labels curve = d3.curveBumpX, // curve for the link } = {}) { // 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); // Sort the nodes. if (sort != null) root.sort(sort); // Compute labels and titles. const descendants = root.descendants(); const L = label == null ? null : descendants.map(d => label(d.data, d)); // Compute the layout. const dx = 10 *2; const dy = width / (root.height + padding); tree().nodeSize([dx, dy])(root); // Center the tree. let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); // Compute the default height. if (height === undefined) height = x1 - x0 + dx * 2; // Use the required curve if (typeof curve !== "function") throw new Error(`Unsupported curve`); const svg = d3.create("svg") .attr("viewBox", [-dy * padding / 2, x0 - dx, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); svg.append("g") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.link(curve) .x(d => d.y) .y(d => d.x)); const node = svg.append("g") .selectAll("a") .data(root.descendants()) .join("a") .attr("xlink:href", link == null ? null : d => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.y},${d.x})`); node.append("circle") // .attr("fill", d => d.children ? stroke : fill) .attr("fill", d => d.data.color) .attr("r", d => Math.log(d.data.value)*2); if (title != null) node.append("title") .text(d => title(d.data, d)); if (L) node.append("text") .attr("dy", "0.32em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .attr("paint-order", "stroke") .attr("stroke", halo) .attr("stroke-width", haloWidth) .text((d, i) => L[i]); return svg.node(); } // import {Tree} from "@d3/tree" // import {Tree} from "@d3/radial-tree"38:[] 30:{"id":"15388bbd13452bd3","slug":null,"title":"Test visualizations","thumbnail":"60c41a81eb2e0070413b60f2e1a44b01962ec9305066b338961a80a764dd0809","access_level":"public","create_time":"$D2023-04-25T17:58:58.884Z","update_time":"$D2023-04-25T17:58:58.884Z","view_time":null,"first_public_time":"$D2023-04-25T17:58:58.884Z","has_unpublished_edits":null,"fork":{"id":"0befdb6d2bb81696","slug":"pre-elections-test-visualizations","title":"Test visualizations","owner":{"id":"54a924218005a3d6","login":"pavlos","name":"Pavlos Sermpezis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"97988ae008beb73a","login":"tasos","name":"Tasos Meletlidis","avatar_url":"https://avatars-next.observableusercontent.com/e9e855b811060704ed627945ee4e88c1af5e53bcb0e3aed1e4aadf85c5163d7d","tier":"starter_2024"},"version":3952,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1bf3fad958cce1c3","login":"tasos","name":"Tasos Meletlidis","avatar_url":"https://avatars-next.observableusercontent.com/e9e855b811060704ed627945ee4e88c1af5e53bcb0e3aed1e4aadf85c5163d7d","tier":null}],"members":[{"type":"individual","id":"1bf3fad958cce1c3","login":"tasos","name":"Tasos Meletlidis","avatar_url":"https://avatars-next.observableusercontent.com/e9e855b811060704ed627945ee4e88c1af5e53bcb0e3aed1e4aadf85c5163d7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Test visualizations","cells":[{"id":0,"value":"# Test visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"### Treemaps [topic]\nDropdown selection (speech selection) \nChart \nLegend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2360,"value":"viewof pol_button_treemap = {\n const select = politicalLeaderButton();\n select.style.width = \"40%\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2363,"value":"// viewof speech_button_treemap = speechButton(pol_button_treemap)\nviewof speech_button_treemap = {\n const select = Inputs.select(new Map(speechButton(pol_button_treemap)), {value: speechButton(pol_button_treemap)[0], label: \"\"});\n select.style.width = \"40%\";\n select.style.paddingTop = \"10px\";\n select.style.paddingBottom = \"20px\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// chart = Treemap(dataTreemapNew.filter(e => e.loc == speechSelection).map(e => e.data)[0], { \nchart = Treemap(data_github, { \n path: d => d.subtopic,\n value: d => d?.freq,\n group: d => d.topic,\n label: (d) => `${d[\"subtopic\"]}\\n${Math.round(d[\"freq\"]*100)}%`,\n title: (d, n) => `${d[\"topic\"]}\\n${d[\"subtopic\"]}\\n${Math.round(d[\"freq\"]*100)}%`,\n tile: d3.treemapBinary,\n sort: d => d?.topic,\n width: 1280,\n height: 650,\n round: true,\n fillOpacity: 1.0,\n colors: colors_new,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"key = Swatches(chart.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3552,"value":"#### Variation of treemap with only the topics (i.e., no subtopics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3550,"value":"chart_treemap_only_topics = Treemap(data_github_treemap_only_topics, { \n path: d => d.topic,\n value: d => d?.freq,\n group: d => d.topic,\n label: (d) => `${d[\"topic\"]}\\n${Math.round(d[\"freq\"]*100)}%`,\n title: (d, n) => `${d[\"topic\"]}\\n${Math.round(d[\"freq\"]*100)}%`,\n tile: d3.treemapBinary,\n sort: d => d?.topic,\n width: 1280,\n height: 650,\n round: true,\n fillOpacity: 1.0,\n colors: colors_new,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3618,"value":"key_only_topics = Swatches(chart_treemap_only_topics.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3555,"value":"data_github_treemap_only_topics = fetch(gh_path+pol_button_treemap+\"/\"+speech_button_treemap+\"/analysis/visuals/only_topic_treemap.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"data_github = fetch(gh_path+pol_button_treemap+\"/\"+speech_button_treemap+\"/analysis/visuals/topic_treemap.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"colors = [\"#75b9be\", \"#f0a202\", \"#725e7f\", \"#114b5f\", \"#338c83\", \"#ba3a0b\", \"#768948\", \"#cc9ea6\", \"#eadb88\" ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3622,"value":"colors_new = [\n\"#338c83\",\n\"#ba3a0b\",\n\"#0e3354\",\n\"#725e7f\",\n\"#114b5f\",\n\"#cc9ea6\",\n\"#75b9be\",\n\"#f0a202\",\n\"#eadb88\",\n\"#0b0632\",\n\"#768948\",\n\"#8eb7a3\",\n\"#cee1d1\",\n\"#af9543\",\n\"#b75f0e\",\n\"#af370b\",\n\"#842909\",\n\"#0b0664\",\n\"#338ce7\",\n\"#ba3a6f\",\n\"#0e33b8\",\n\"#725ee3\",\n\"#cc9eff\",\n\"#f0a266\",\n\"#7689ac\",\n\"#af95a7\",\n\"#b75f72\",\n\"#cee16d\",\n\"#af376f\",\n\"#84296d\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"import {Swatches} from \"@d3/color-legend\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"### Speedometer [sentiment]\nDropdown selection (speech selection) \nChart \nLegend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2389,"value":"viewof pol_button_speedometer = {\n const select = politicalLeaderButton();\n select.style.width = \"75%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"// viewof speech_button_speedometer = speechButton(pol_button_speedometer)\nviewof speech_button_speedometer = {\n const select = Inputs.select(new Map(speechButton(pol_button_speedometer)), {value: speechButton(pol_button_speedometer)[0], label: \"\"});\n select.style.width = \"75%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2856,"value":"// speedchart to use for all political leaders and speeches\nSpeedChart = createSpeedChart(pol_button_speedometer,speech_button_speedometer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"legendSentiment = html`\n

\n \n

NegativeNeutralPositive

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2926,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### Stacked bar [sentiment]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"Plot.plot({\n y: {\n grid: true,\n percent: true,\n },\n facet: {\n data: data_stacked,\n y: \"topic\",\n label: null\n },\n marks: [\n Plot.barX(data_stacked, Plot.groupZ({x: \"proportion-facet\"}, {fill: \"sentiment\"})),\n Plot.ruleX([0, 1])\n ],\n color: {legend: true}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data_stacked = [{\"topic\":\"topic A\", \"sentiment\":\"positive\"},\n {\"topic\":\"topic A\", \"sentiment\":\"neutral\"},\n {\"topic\":\"topic A\", \"sentiment\":\"neutral\"},\n {\"topic\":\"topic A\", \"sentiment\":\"negative\"},\n {\"topic\":\"topic A\", \"sentiment\":\"negative\"},\n {\"topic\":\"topic A\", \"sentiment\":\"negative\"},\n {\"topic\":\"topic B\", \"sentiment\":\"neutral\"},\n {\"topic\":\"topic B\", \"sentiment\":\"neutral\"},\n {\"topic\":\"topic B\", \"sentiment\":\"negative\"}\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Fraction bar chart [toxicity/polarization]\nDropdown selection (political leader selection) \nDropdown selection (speech selection) \nDropdown selection (polarization/toxicity selection) \nChart \nLegend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3215,"value":"### Step chart [toxicity/polarization]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2718,"value":"viewof pol_button_fraction = {\n const select = politicalLeaderButton();\n select.style.width = \"40%\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2721,"value":"// viewof speech_button_fraction = speechButton(pol_button_fraction)\nviewof speech_button_fraction = {\n const select = Inputs.select(new Map(speechButton(pol_button_fraction)), {value: speechButton(pol_button_fraction)[0], label: \"\"});\n select.style.width = \"40%\";\n select.style.paddingTop = \"10px\";\n select.style.paddingBottom = \"10px\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2660,"value":"viewof type_button_fraction = {\n const select = visualizationsButton();\n select.style.width = \"40%\";\n select.style.paddingBottom = \"20px\";\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3165,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2776,"value":"fractionSwatches = swatches({ color: colorScale })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2663,"value":"data_fraction_github = fetch(gh_path+pol_button_fraction+\"/\"+speech_button_fraction+\"/analysis/visuals/\"+list_of_visualizations[type_button_fraction]+\".json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3795,"value":"data_legend = [\n {title: \"No/Low\", x: 2, y: 0.25},\n {title: \"Moderate\", x: 2, y: 0.65},\n {title: \"High/Severe\", x:2, y: 0.9}\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2772,"value":"colorScale = d3.scaleOrdinal(\n // [...new Set(data_fraction_formatted.map((d) => d.bin))],\n [...new Set([\"No/Low \"+ type_button_fraction, \"Moderate \"+ type_button_fraction, \"High/Severe \"+ type_button_fraction])],\n [\"#e2e9e9\", \"#f7eab7\", \"#d35f3c\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"fractionChart = Plot.plot({\n height: 415,\n padding: 0,\n // grid: true,\n width: 1150,\n x: {\n // grid: true,\n label: \"Paragraph No\",\n // domain: [0, data_fraction.length + 1], \n // ticks: [],\n },\n y: {\n // grid: true,\n label: type_button_fraction,\n range: [400, 0],\n // cellBand: 0\n // domain: [0, 1] \n },\n marks: [\n // Plot.cell(data_fraction_formatted, {\n Plot.cell(data_fraction_formatted, {\n x: \"par\",\n y: \"bin\",\n fill: \"weight\",\n title: \"text\",\n // r: 20,\n dy: -17.5,\n // symbol: \"square\",\n // clip: true,\n // cellWidth: 10,\n // cellHeight: 10,\n // cellSpacing: 0,\n inset: -0.3\n // inset: 1\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2725,"value":"data_fraction_formatted = {\n let values = []\n const bin = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]\n const colors = [\"#e2e9e9\", \"#e2e9e9\", \"#e2e9e9\", \"#e2e9e9\", \"#f7eab7\", \"#f7eab7\", \"#f7eab7\", \"#f7eab7\", \"#d35f3c\", \"#d35f3c\", \"#d35f3c\"]\n for(let i=0; ibin[j]) {\n values.push({\"par\": d[\"par\"], \"weight\": colors[j], \"bin\":bin[j], \n \"text\": d[\"text\"]\n })\n } else {\n values.push({\"par\": d[\"par\"], \"weight\": \"none\", \"bin\":bin[j], \n \"text\": d[\"text\"]\n })\n } \n }\n }\n return values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2778,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"### Linechart [sentiment]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2950,"value":"viewof pol1_button_line = politicalLeaderButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2954,"value":"// viewof speech1_button_line = speechButton(pol1_button_line)\nviewof speech1_button_line = Inputs.select(new Map(speechButton(pol1_button_line)), {value: speechButton(pol1_button_line)[0], label: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2952,"value":"viewof pol2_button_line = politicalLeaderButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2956,"value":"// viewof speech2_button_line = speechButton(pol2_button_line)\nviewof speech2_button_line = Inputs.select(new Map(speechButton(pol2_button_line)), {value: speechButton(pol2_button_line)[0], label: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3007,"value":"async function fetchDataLineChart(){\n let data1_line_github = await fetch(gh_path+pol1_button_line+\"/\"+speech1_button_line+\"/analysis/visuals/sentiment_sequence.json\").then((response) => response.json());\n for (let i=0; i response.json());\n for (let i=0; i !list_of_types.includes(e[\"name\"]))\n for (let i=0; i e[\"value\"] > min_count)\n }\n return temp_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2819,"value":"ner_git_data = fetch(gh_path+pol_button_radial+\"/\"+speech_button_radial+\"/analysis/visuals/ner-limited_tree.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"viewof nodesHidden = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"### \"ΘΑ\"-meter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"### Word count","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"### Wordcloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2331,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2333,"value":"### Helper functions and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3319,"value":"gh_path = \"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"function politicalLeaderButton(){\n let list_of_leaders = Object.keys(gh_list_of_speeches)\n return Inputs.select(list_of_leaders, {value:list_of_leaders[0], label: \"\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"// function speechButton(leader){\n// let list_of_speeches = Object.values(gh_list_of_speeches[leader])\n// return Inputs.select(list_of_speeches, {value: list_of_speeches[0], label: \"\"})\n// }\nfunction speechButton(leader){\n let list_of_speeches = Object.values(gh_list_of_speeches[leader])\n return list_of_speeches\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2335,"value":"gh_list_of_speeches = fetch(\"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/list_of_speeches_new.json\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2679,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2656,"value":"function visualizationsButton(){\n return Inputs.select(Object.keys(list_of_visualizations), {value: Object.keys(list_of_visualizations), label:\"\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3947,"value":"### Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3949,"value":"\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3547,"value":"### testing stuff for creating button on fraction charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3268,"value":"buttonGroup = html`\n

\n \n buttonGroup = 'option1'}>\n Option 1\n \n \n buttonGroup = 'option2'}>\n Option 2\n \n \n buttonGroup = 'option3'}>\n Option 3\n \n

\n`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3282,"value":"function buttonGroup(options, {value: initialValue}) {\n const group = html``;\n let value = initialValue;\n function update() {\n for (const button of group.children) {\n button.style.background = button.value === value ? \"#ddd\" : null;\n }\n }\n function input(event) {\n value = event.target.value;\n update();\n group.dispatchEvent(new CustomEvent(\"input\"));\n }\n for (const option of options) {\n const button = html``;\n button.value = option.value;\n button.onclick = input;\n group.appendChild(button);\n }\n update();\n return Object.defineProperty(group, \"value\", {\n get() {\n return value;\n },\n set(newValue) {\n value = newValue;\n update();\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3284,"value":"options = [\n {label: \"Option 1\", value: \"option1\"},\n {label: \"Option 2\", value: \"option2\"},\n {label: \"Option 3\", value: \"option3\"}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3287,"value":"group = buttonGroup(options, {value: \"option1\"});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3289,"value":"group.addEventListener(\"input\", () => {\n console.log(`Selected value: ${group.value}`);\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3291,"value":"group.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 31:"$30:body"