2f:T1176,{ const width = 900; const height = 700; const padding = {top: 20, left: 40, right: 40, bottom: 50}; const graph = d3.select(DOM.svg(width, height)); const formatTime = d3.timeFormat("%d %b"); const data = selection; const [startDate, endDate] = d3.extent(data, d => d.created_at); const xScale = d3.scaleTime() // extend the domain with 1 day at each side .domain([d3.timeDay.offset(startDate,-1), d3.timeDay.offset(endDate)]) .range([padding.left, width - padding.right]); const yScale = d3.scaleLinear() .domain([-4, 6]) // start the domain at 0 instead of min .range([height - padding.bottom, padding.top]); const xAxis = d3.axisBottom() .scale(xScale) .ticks(7) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); const g = graph.append('g'); graph.selectAll("horizontal_line") .data(data) .enter() .append("line") .attr("x1", xScale(d3.timeDay.offset(startDate, - 2))) .attr("y1", yScale(0)+ 0.5) .attr("x2", xScale(d3.timeDay.offset(endDate, 2))) .attr("y2", yScale(0) + 0.5) .attr("stroke", "#000") .attr("stroke-width", 1); graph.selectAll("vertical_line") .data(data) .enter() .append("line") .attr("x1", d => xScale(d.created_at)) .attr("y1", (height - padding.bottom)/2 + 10) .attr("x2", d => xScale(d.created_at)) .attr("y2", d => yScale(d.score)) .attr("stroke", "#d6d6d6") .attr("stroke-width", 0.5); const tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "#fff") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); graph.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(d.created_at)) .attr("cy", d => yScale(d.score)) .attr("r", 3) .attr("fill", d => {if (d.score < 0) {return "#c42f56"} else if (d.score == 0) {return '#3b9e23'} else {return '#2959a5'} }) .style("opacity", 0.7) .attr("stroke", d => {if (d.score < 0) {return "#a52749"} else if (d.score == 0) {return '#3b9e23'} else {return '#265299'}}) .on("mouseover", d => { var circle_id = d.user_id; var circle_text = d.text; var circle_score = d.score; var circle_sentiment = d.sentiment; tooltip.html(''); tooltip.style("visibility", "visible") .style("border", "4px solid" + "#fff"); tooltip.append("div") .text(d => "User_id: " + circle_id) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Comment: " + circle_text) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Sentiment Score: " + circle_score) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Sentiment: " + circle_sentiment) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-0) + "px").style("left", (d3.event.pageX+0) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); }); graph.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height - padding.bottom})`) .call(xAxis) .selectAll("text") // rotate the axis labels .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); graph.append("g") .attr("class", "y axis") .attr("transform", `translate(${padding.left}, 0)`) .call(yAxis); graph.select(".y.axis") .append("text") .text("Score") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }30:T414,timeData = d3.csv("https://0f8bb2399ade330a.static.observableusercontent.com/files/be07831ee725c1c915b9a31c2f526304ab206f2a47d8f0d6d90534122fc57d369f7f5bcf649127f3ba9a90d94e1cfffe248386a17711e483544213ef87790eae?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27IP_df%25406.csv&Expires=1639440000000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=Ka-~cMi3LkNu5c1pKLIAsiOepvkbMWywFxYHbkoCnEmqbq2F6XvH-w56Rzty~ctEabuq~f97Au702Wftw6q5gMw2UAoYqp897R7aIBSfGRCcul1yGLhszPCQRGPXLsn633~FZbwcotjwM0XQwJvHIoQuhJJphSJ1HXReMKBYBcrhqE-CZzp2BWISOd3MVo20tHAGPZP00vK2OPUwg490FwrewJbHQTjrw4qLMZymPinw8TcfbWDAtqG5aDQTxwT6O8Q65XHYz1YNn8rPtXGjjkN6VuClJq50fyp4UTVnctz5V7kmtyt~5eDFSxGMWg9SgTujD4xE81oEuplfCh5-Fg__", d => { return { // convert from string to float X: d.X, created_at: d3.timeParse("%Y-%m-%d %H:%M:%S")(d.created_at), // convert from string to date score: parseFloat(d.sentiment_score), text: d.text, user_id: d.user_id, user_follower_count: d.user_follower_count, sentiment: d.sentiment, group: d.group }})31:T63e,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (format) format = d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }32:[] 2d:{"title":"Sentiment Analysis on Comments of Elon Musk's Tweets","cells":[{"id":211,"value":"md`# Sentiment Analysis on Comments of Elon Musk's Tweets\nfrom 10/28/2021-11/04/2021\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"html`\n\n \n \n \n \n \n \n

${viewof sf}

${viewof followerSelector}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"selection = filters(timeData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"filters = xs => {\n return R.compose(match,isgroup)(xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"search = {\n const sfEscaped = sf.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&').toLowerCase()\n return ({regex: new RegExp(\" \" + sfEscaped + \" \"), // looks for words\n regex1: new RegExp(\" \" + sfEscaped + \"$\"), \n regex2: new RegExp(\"^\" + sfEscaped + \" \")\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"match = xs => {\n const innerMatch = d => {\n if (sf.trim() == '') { return true }\n const n = d.text\n return search.regex.test(n) || search.regex1.test(n) || search.regex2.test(n)\n }\n return R.filter(innerMatch, xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"isgroup = xs => {\n const groupMatch = d => {\n if (follower.includes(followerArray.indexOf(d.group).toString())) { console.log(\"hi\"); return true }\n if (follower.includes(followerArray.indexOf(\"all\").toString())) { console.log(\"hey\"); return true }\n console.log(\"nope\"); \n return false\n }\n return R.filter(groupMatch, xs)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"follower = followerSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof followerSelector = select2({\n title: \"Number of follower\",\n options: [\n { value: 0, label: \"No follower\" },\n { value: 1, label: \"0-50\" },\n { value: 2, label: \"50-200\" },\n { value: 3, label: \"200-1000\" },\n { value: 4, label: \"1000-10000\" },\n { value: 5, label: \"10000+\" },\n { value: 6, label: \"all\" }\n ],\n value: [0, 1, 2, 3, 4, 5, 6],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof sf = text({submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"followerArray = [\"No follower\", \"0-50\", \"50-200\", \"200-1000\", \"1000-10000\", \"10000+\", \"all\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"truncate = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"R = require(\"//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"function select2(config = {}) {\n let {value: formValue, title, description, submit, multiple, size, options} = config;\n if (!Array.isArray(formValue)) formValue = [formValue]\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"select\", title, description, submit, \n getValue: input => {\n const selected = Array.prototype.filter.call(input.options, i => i.selected).map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"d3 = require('d3@v5.15')","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"import {checkbox, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"q = require('d3-quicktool')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}