32:T1060,{ 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("%b %Y"); const data = selection; const [startDate, endDate] = d3.extent(data, d => d.date); const xScale = d3.scaleTime() // extend the domain with 1 day at each side .domain([d3.timeDay.offset(startDate, - 40), d3.timeDay.offset(endDate, 10)]) .range([padding.left, width - padding.right]); const yScale = d3.scaleLinear() .domain([-1, 1]) // start the domain at 0 instead of min .range([height - padding.bottom, padding.top]); const xAxis = d3.axisBottom() .scale(xScale) .ticks(18) .tickFormat(formatTime); // use our custom format const yAxis = d3.axisLeft() .scale(yScale) .ticks(10); graph.selectAll("horizontal_line") .data(data) .enter() .append("line") .attr("x1", xScale(d3.timeDay.offset(startDate, - 40))) .attr("y1", yScale(0)+ .5) .attr("x2", xScale(d3.timeDay.offset(endDate, 10))) .attr("y2", yScale(0) + .5) .attr("stroke", "#000") .attr("stroke-width", .2); graph.selectAll("vertical_line") .data(data) .enter() .append("line") .attr("x1", d => xScale(d.date)) .attr("y1", (height - padding.bottom)/2 + 10) .attr("x2", d => xScale(d.date)) .attr("y2", d => yScale(d.polarity)) .attr("stroke", "#d6d6d6") .attr("stroke-width", 1); 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.date)) .attr("cy", d => yScale(d.polarity)) .attr("r", 2.5) .attr("fill", d => {if (d.polarity < 0) {return "#c42f56"} else {return '#2959a5'} }) .style("opacity", .5) .attr("stroke", d => {if (d.polarity < 0) {return "#a52749"} else {return '#265299'}}) .on("mouseover", d => { var circle_title = d.title; var circle_artist = d.artist.split(' ').map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(' '); var circle_polarity = d.polarity; tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "4px solid" + "#fff") tooltip.append("div") .text(d => "Title: " + circle_title) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Artist: " + circle_artist) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); tooltip.append("div") .text(d => "Polarity: " + truncate(circle_polarity)) .style("font-family", "sans-serif") .style("font-size", "11px") .style("color", "#000"); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-20) + "px").style("left", (d3.event.pageX+18) + "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("Polarity") .style("text-anchor", "end") .attr("dx", -padding.top) .attr("dy", "1em") .attr("transform", "rotate(-90)") .attr("fill", "black"); return graph.node(); }33: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; }34:[] 30:{"title":"Search Sentiment Analysis of Billboard Top 100 Songs 2000-2018","cells":[{"id":0,"value":"md`# Search Sentiment Analysis of Billboard Top 100 Songs 2000-2018\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"html`\n\n \n \n \n \n \n \n

${viewof sf}

${viewof genreSelector}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"selection = filters(timeData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"filters = xs => {\n // const yearsFilter = R.filter(R.partial(isInYears, [years]))\n // const monthsFilter = R.filter(R.partial(isInMonths, [months]))\n // const daysFilter = R.filter(R.partial(isInDays, [days]))\n // return R.compose(match, daysFilter, monthsFilter, yearsFilter)(xs)\n // const genreFilter = R.filter(R.partial(isGenre, [genres]))\n return R.compose(match, isGenre)(xs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"viewof sf = text({submit: \"Go\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"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":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"match = xs => {\n const innerMatch = d => {\n if (sf.trim() == '') { return true }\n const n = d.lyrics\n // return search.wholeWords ? search.regexw.test(n) : search.regex.test(n)\n return search.regex.test(n) || search.regex1.test(n) || search.regex2.test(n)\n }\n return R.filter(innerMatch, xs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"isGenre = xs => {\n const genreMatch = d => {\n if (genres.includes(genreArray.indexOf(d.genre).toString())) { console.log(\"hi\"); return true }\n if (genres.includes(genreArray.indexOf(\"all\").toString())) { console.log(\"hey\"); return true }\n console.log(\"nope\"); \n return false\n }\n return R.filter(genreMatch, xs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"genres = genreSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"viewof genreSelector = select2({\n title: \"Genres\",\n options: [\n { value: 0, label: \"rap\" },\n { value: 1, label: \"pop\" },\n { value: 2, label: \"r&b\" },\n { value: 3, label: \"rock\" },\n { value: 4, label: \"country\" },\n { value: 5, label: \"edm\" },\n { value: 6, label: \"all\" }\n ],\n value: [0, 1, 2, 3, 4, 5, 6],\n multiple: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"genreArray = [\"rap\", \"pop\", \"r&b\", \"rock\", \"country\", \"edm\", \"all\" ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"truncate = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"timeData = d3.csv(\"https://gist.githubusercontent.com/jessieliu1/64cdcca135b398511977ae3583c8f35b/raw/ee606aafe6cd6fd3f788948fa2a797075138df43/other_lyrics.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n\tpolarity: parseFloat(d.polarity),\n lyrics: d.lyrics,\n genre: d.genre\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"timeDataCops = d3.csv(\"https://gist.githubusercontent.com/jessieliu1/76d0b11951e684f94ae426b2109b0590/raw/2735050f03da0f47a883d845b20dd528aecd373f/lyrics_cops.csv\", d => { \n return { // convert from string to float\n title: d.title,\n artist: d.artist,\n\tdate: d3.timeParse(\"%m/%d/%y\")(d.date), // convert from string to date\n\tpolarity: parseFloat(d.polarity)\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"R = require(\"//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"import {checkbox, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"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":256,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"d3format = require(\"d3-format\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`### references:\nhttps://beta.observablehq.com/@jhenligne/hackage-a-timeline\nhttps://beta.observablehq.com/@jashkenas/inputs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}