2f: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(); }30:[] 2d:{"title":"Speedometers visualizations","cells":[{"id":0,"value":"# Speedometers visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"### Speedometer [sentiment]\nDropdown selection (speech selection) \nChart \nLegend","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"viewof speech_button_speedometer_mitsotakis = {\n const select = Inputs.select(new Map(speechButton(\"Mitsotakis\")), {value: speechButton(\"Mitsotakis\")[0], label: \"\"});\n select.style.width = \"75%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"speedChart_mitsotakis = createSpeedChart(\"Mitsotakis\",speech_button_speedometer_mitsotakis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"legendSentiment = html`\n

\n \n

NegativeNeutralPositive

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof speech_button_speedometer_velopoulos = {\n const select = Inputs.select(new Map(speechButton(\"Velopoulos\")), {value: speechButton(\"Velopoulos\")[0], label: \"\"});\n select.style.width = \"70%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"speedChart_velopoulos = createSpeedChart(\"Velopoulos\",speech_button_speedometer_velopoulos)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof speech_button_speedometer_koutsoumpas = {\n const select = Inputs.select(new Map(speechButton(\"Koutsoumpas\")), {value: speechButton(\"Koutsoumpas\")[0], label: \"\"});\n select.style.width = \"70%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"speedChart_koutsoumpas = createSpeedChart(\"Koutsoumpas\",speech_button_speedometer_koutsoumpas)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof speech_button_speedometer_androulakis = {\n const select = Inputs.select(new Map(speechButton(\"Androulakis\")), {value: speechButton(\"Androulakis\")[0], label: \"\"});\n select.style.width = \"70%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"speedChart_androulakis = createSpeedChart(\"Androulakis\",speech_button_speedometer_androulakis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof speech_button_speedometer_tsipras = {\n const select = Inputs.select(new Map(speechButton(\"Tsipras\")), {value: speechButton(\"Tsipras\")[0], label: \"\"});\n select.style.width = \"70%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"speedChart_tsipras = createSpeedChart(\"Tsipras\",speech_button_speedometer_tsipras)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof speech_button_speedometer_varoufakis = {\n const select = Inputs.select(new Map(speechButton(\"Varoufakis\")), {value: speechButton(\"Varoufakis\")[0], label: \"\"});\n select.style.width = \"70%\";\n select.style.marginLeft = \"auto\";\n select.style.marginRight = \"auto\";\n return select;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"speedChart_varoufakis = createSpeedChart(\"Varoufakis\",speech_button_speedometer_varoufakis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"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":33,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"function speechButton(leader){\n let list_of_speeches = Object.values(gh_list_of_speeches[leader])\n return list_of_speeches\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"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"},{"id":99,"value":"gh_path = \"https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}