30:[{"id":"61f6252341892fcffe9d5ee227219fd9f1333b3d8ef4f8edf07261124eda4a54f8c35efe71299cfd28c93de74ce2e3c99db85b74b228014e43ac660ab5d4264a","href":"https://static.observableusercontent.com/files/61f6252341892fcffe9d5ee227219fd9f1333b3d8ef4f8edf07261124eda4a54f8c35efe71299cfd28c93de74ce2e3c99db85b74b228014e43ac660ab5d4264a","name":"groups.json","type":"application/json","lastModified":1618803134008.374,"size":15156},{"id":"b2b1935b284633a7d3a4d8ed3eaba20aca14b5dfb263f91ea6646f25c1aa5fc12300fe5a61c046b47577cba6ecb784f212b414f782171e98311c313ae77ab40d","href":"https://static.observableusercontent.com/files/b2b1935b284633a7d3a4d8ed3eaba20aca14b5dfb263f91ea6646f25c1aa5fc12300fe5a61c046b47577cba6ecb784f212b414f782171e98311c313ae77ab40d","name":"likes.json","type":"application/json","lastModified":1618976469941.211,"size":344059},{"id":"65260e3ed9fa35c20a4750c19138f876707d640ffa9d67653937ce0f2f89d173c82845400473c100be07fdf5bda8c9ab5fb056ff73e78f816aab795cafc010d0","href":"https://static.observableusercontent.com/files/65260e3ed9fa35c20a4750c19138f876707d640ffa9d67653937ce0f2f89d173c82845400473c100be07fdf5bda8c9ab5fb056ff73e78f816aab795cafc010d0","name":"comments.json","type":"application/json","lastModified":1620102717018.089,"size":1091282},{"id":"826d25db8d75ae0bc3a203e8900be8db8688bdb932e8262e6bbd76bb3bdea74cf737e2f217279f6a8b1510ce61ecec972b47e212267d8081503126cc570bd520","href":"https://static.observableusercontent.com/files/826d25db8d75ae0bc3a203e8900be8db8688bdb932e8262e6bbd76bb3bdea74cf737e2f217279f6a8b1510ce61ecec972b47e212267d8081503126cc570bd520","name":"posts_and_comments.json","type":"application/json","lastModified":1620875231985.91,"size":2558832}] 2e:{"title":"Cobra Kai","cells":[{"id":0,"value":"md`# Cobra Kai`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Group Interactions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"groups = FileAttachment(\"groups.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"group_data = groups.group_interactions[0].entries","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"parseInt(group_data[0].data.value.split(\" \")[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"group_counts = {\n let group_counts = { children: [] };\n var i;\n for (i = 0; i < group_data.length; i++) {\n group_counts.children.push({\n name: group_data[i].data.name,\n value: parseInt(group_data[i].data.value.split(\" \")[0])\n });\n }\n yield group_counts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"color = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"treemap = data =>\n d3\n .treemap()\n .tile(d3.treemapSquarify)\n .size([width, height])\n .padding(1)\n .round(true)(\n d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"// https://observablehq.com/@d3/treemap\ntreemapvis = {\n const root = treemap(group_counts);\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"font\", \"10px sans-serif\");\n\n const leaf = svg\n .selectAll(\"g\")\n .data(root.leaves())\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x0},${d.y0})`);\n\n leaf\n .append(\"rect\")\n .attr(\"fill\", d => {\n while (d.depth > 1) d = d.parent;\n return color(d.data.name);\n })\n .attr(\"width\", d => d.x1 - d.x0)\n .attr(\"height\", d => d.y1 - d.y0);\n\n leaf\n .append(\"text\")\n .selectAll(\"tspan\")\n .data(d => d.data.name.split(/(?=[A-Z][a-z])|\\s+/g).concat(format(d.value)))\n .join(\"tspan\")\n .attr(\"x\", 3)\n .attr(\n \"y\",\n (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`\n )\n .text(d => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"likes = FileAttachment(\"likes.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"media_likes = likes.media_likes","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":" likes_last_year = {\n let likes_last_year = [];\n let currDate = new Date();\n const oneyear = 31556952000;\n for (let i = 0; i < media_likes.length; i++) {\n let data = media_likes[i];\n let date = new Date(data[0]);\n if (currDate - date < oneyear) {\n likes_last_year.push(data[1]);\n }\n }\n yield likes_last_year;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"top_ten_likes = {\n let top_ten_likes = {};\n for (let i = 0; i < likes_last_year.length; i++) {\n if (!top_ten_likes[likes_last_year[i]]) {\n // if no key for that number yet\n top_ten_likes[likes_last_year[i]] = 0; // then make one\n }\n ++top_ten_likes[likes_last_year[i]];\n }\n\n yield top_ten_likes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"sorted_top_ten = {\n let count = 0;\n let sorted_top_ten = [];\n let sorted_top_ten_list = [];\n for (var likes in top_ten_likes) {\n sorted_top_ten.push([likes, top_ten_likes[likes]]);\n }\n\n sorted_top_ten.sort(function(a, b) {\n return b[1] - a[1];\n });\n\n for (var i = 0; i < sorted_top_ten.length; i++) {\n // sorted_top_ten_list.push(sorted_top_ten[i]);\n let newObj = {};\n newObj.name = sorted_top_ten[i][0];\n newObj.value = sorted_top_ten[i][1];\n sorted_top_ten_list.push(newObj);\n count++;\n if (count == 10) {\n break;\n }\n }\n yield sorted_top_ten_list;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"// chart = {\n// const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 800, 800]);\n\n// svg\n// .append(\"g\")\n// .attr(\"fill\", \"steelblue\")\n// .selectAll(\"rect\")\n// .data(sorted_top_ten)\n// .join(\"rect\")\n// .attr(\"x\", (d, i) => x(i))\n// .attr(\"y\", d => y(d.value))\n// .attr(\"height\", d => y(0) - y(d.value))\n// .attr(\"width\", x.bandwidth());\n\n// svg\n// .append(\"g\")\n// .call(xAxis)\n// .selectAll(\"text\")\n// .style(\"text-anchor\", \"end\")\n// .attr(\"transform\", function(d) {\n// return \"rotate(-30)\";\n// });\n\n// svg.append(\"g\").call(yAxis);\n\n// return svg.node();\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"// x = d3\n// .scaleBand()\n// .domain(d3.range(sorted_top_ten.length))\n// .range([margin.left, width - margin.right])\n// .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"// xAxis = g =>\n// g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n// d3\n// .axisBottom(x)\n// .tickFormat(i => sorted_top_ten[i].name)\n// .tickSizeOuter(0)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"// y = d3\n// .scaleLinear()\n// .domain([0, d3.max(sorted_top_ten, d => d.value)])\n// .nice()\n// .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"// yAxis = g =>\n// g\n// .attr(\"transform\", `translate(${margin.left},0)`)\n// .call(d3.axisLeft(y).ticks(null, sorted_top_ten.format))\n// .call(g => g.select(\".domain\").remove())\n// .call(g =>\n// g\n// .append(\"text\")\n// .attr(\"x\", -margin.left)\n// .attr(\"y\", 10)\n// .attr(\"fill\", \"currentColor\")\n// .attr(\"text-anchor\", \"start\")\n// .text(sorted_top_ten.y)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`## TimeChart for Comments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"comments = FileAttachment(\"comments.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"comments.comments.forEach(\n obj => (obj.timestamp = new Date(obj.timestamp * 1000))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"comments_last_year = {\n let comments_last_year = [];\n let currDate = new Date();\n const oneyear = 31556952000;\n for (let i = 0; i < comments.comments.length; i++) {\n let data = comments.comments[i];\n let date = data.timestamp;\n if (currDate - date < oneyear) {\n comments_last_year.push(data);\n }\n }\n yield comments_last_year;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"comments_last_year.forEach(\n obj =>\n (obj.timestamp = new Date(\n obj.timestamp.getFullYear(),\n obj.timestamp.getMonth(),\n obj.timestamp.getDate()\n ))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"comment_map = d3.rollup(\n comments_last_year,\n v => d3.count(v, d => d.timestamp),\n d => d.timestamp\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"testDate = new Date(\"2021-04-25T00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"comment_map.get(testDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"comment_data = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"comment_map.forEach((value, key) => {\n comment_data.push({ key, value });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"import { TimeChart, TimeAxis } from \"@observablehq/timechart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"import { disposal } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"interval = d3.utcMinute.every(200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"stop = new Date(\"2021-04-25T00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"start = new Date(\"2020-05-04T00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"TimeAxis({ interval, start, stop })","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"TimeChart(comment_data, {\n interval,\n start,\n stop,\n title: \"Sign-ups\",\n max: 150,\n bands: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`## Bar Chart - Facebook Reactions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"reactions_data = FileAttachment(\"posts_and_comments.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"reactions = reactions_data.reactions","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"reactions_data.reactions.forEach(\n obj => (obj.timestamp = new Date(obj.timestamp * 1000))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"reactions_data.reactions[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"reactions_last_year = {\n let reactions_last_year = [];\n let currDate = new Date();\n const oneyear = 31556952000;\n for (let i = 0; i < reactions_data.reactions.length; i++) {\n let data = reactions_data.reactions[i];\n let date = data.timestamp;\n if (currDate - date < oneyear) {\n reactions_last_year.push(data);\n }\n }\n yield reactions_last_year;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"reaction_count = {\n let reaction_count = new Map();\n for (let i = 0; i < reactions_last_year.length; i++) {\n let reaction_type = reactions_last_year[i].data[0].reaction.reaction;\n if (reaction_count.has(reaction_type)) {\n reaction_count.set(reaction_type, reaction_count.get(reaction_type) + 1);\n } else {\n reaction_count.set(reaction_type, 1);\n }\n }\n\n // let reaction_count_sorted = new Map(\n // [...reaction_count.entries()].sort((a, b) => b[1] - a[1])\n // );\n let reaction_count_array = [];\n\n reaction_count.forEach((value, key) => {\n let newObj = {};\n newObj.name = key;\n newObj.value = value;\n reaction_count_array.push(newObj);\n });\n\n yield reaction_count_array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"x = d3\n .scaleBand()\n .domain(d3.range(reaction_count.length))\n .range([margin.left, width - margin.right])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .tickFormat(i => reaction_count[i].name)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(reaction_count, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, sorted_top_ten.format))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(reaction_count.y)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 800, 800]);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(reaction_count)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => y(d.value))\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"width\", x.bandwidth());\n\n svg\n .append(\"g\")\n .call(xAxis)\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .attr(\"transform\", function(d) {\n return \"rotate(-30)\";\n });\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"margin = ({ top: 30, right: 0, bottom: 30, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}