31:Tc96,function sctg(){ var top_config = {}; var bottom_config = {}; var layout_config = {}; var time_config = {}; function setScaleDomain(scale, key_fn, data){ const domain = d3.extent(data.map(key_fn)); return scale.domain(domain); }; var compute = function(data, config){ /** * config should have following structure: * {top: {}, bottom: {}} * both top and bottom values should have following structure: * { y_fn: d => d.attr, size_fn: d => d.attr, color_fn: d => d.attr, y_scale: scale, size_scale: scale, color_scale: scale, } */ //debugger; var time_scale = setScaleDomain(time_config.scale, time_config.key_fn, data); var bottom_y_scale = setScaleDomain(config.bottom.y_scale, config.bottom.y_fn, data); var bottom_size_scale = setScaleDomain(config.bottom.size_scale, config.bottom.size_fn, data); var bottom_nodes = data.map(function(d, i){ const layout = { x: time_config.scale(time_config.key_fn(d)), y: bottom_y_scale(config.bottom.y_fn(d)), size: bottom_size_scale(config.bottom.size_fn(d)), }; d.idx = i; d.layout = layout; return d; }); var top_layout_wrapped_reduce_fn = function(items){ var reduced_values = top_config.reduce_fn(items); reduced_values.items = items.map(item => { return {x: item.layout.x, y: item.layout.y, idx: item.idx}; }); return reduced_values; }; var top_nodes = d3.nest() .key(top_config.key_fn) .rollup(top_layout_wrapped_reduce_fn) .entries(bottom_nodes); var top_y_scale = setScaleDomain(config.top.y_scale, config.top.y_fn, top_nodes.map(d => d.value)); var top_size_scale = setScaleDomain(config.top.size_scale, config.top.size_fn, top_nodes.map(d => d.value)); top_nodes = top_nodes.map(d => { const value = d.value; const layout = { x: time_config.scale(value.time_first_occurence), y: top_y_scale(config.top.y_fn(value)), size: top_size_scale(config.top.size_fn(value)), }; value.layout = layout; return {key: d.key, value: value}; }); var edges = top_nodes.flatMap( d => d.value.items.map(item => { return { source: {x: item.x, y: item.y}, target: {x: d.value.layout.x, y: d.value.layout.y}, }; }) ); return { bottom_nodes: bottom_nodes, top_nodes: top_nodes, edges: edges, scales: { time_scale: time_scale, bottom_y_scale: bottom_y_scale, top_y_scale: top_y_scale } }; }; compute.topNodeKey = function(key_fn){ top_config.key_fn = key_fn; return this; }; compute.timeKey = function(key_fn){ time_config.key_fn = key_fn; return this; }; compute.timeScale = function(scale){ time_config.scale = scale; return this; }; compute.plotOffset = function(offset){ layout_config.plot_offset = offset; return this; }; compute.topReduce = function(reduce_fn){ top_config.reduce_fn = reduce_fn; return this; }; return compute; };32:Tcde,chart = { const width = 1000; const height = 800; const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", [-50, -height+250, width, height]); const logDiv = d3.select(document.createElement("div")); var getTopTooltipContent = function(d) { return ` User: ${d.key}
Count: ${d.value.count}
Total Retweets: ${d.value.total_rt}
First Occurence: ${d.value.time_first_occurence}
` } var getBottomTooltipContent = function(d) { return ` User: ${d.screenName}
Retweets: ${d.retweetCount}
Favorites: ${d.favoriteCount}
Created at: ${d.created}
` } const topTooltip = d3_tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(getTopTooltipContent); const bottomTooltip = d3_tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(getBottomTooltipContent); svg.call(topTooltip); svg.call(bottomTooltip); const top_nodes = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(sctg_layout_values.top_nodes) .join("circle") .attr("r", d => d.value.layout.size) .attr("cx", d => d.value.layout.x) .attr("cy", d => d.value.layout.y) .attr("fill", "black") .on("mouseover", topTooltip.show) .on("mouseleave", topTooltip.hide) .on("click", d => logDiv.html(getTopTooltipContent(d))); const bottom_nodes = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(sctg_layout_values.bottom_nodes) .join("circle") .attr("r", d => d.layout.size) .attr("cx", d => d.layout.x) .attr("cy", d => d.layout.y) .attr("fill", "red") .on("mouseover", bottomTooltip.show) .on("mouseleave", bottomTooltip.hide) .on("click", d => logDiv.html(getBottomTooltipContent(d))); const edges = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(sctg_layout_values.edges) .join("line") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .attr("stroke-width", 0.1); svg.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(sctg_layout_values.scales.bottom_y_scale)); svg.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(sctg_layout_values.scales.top_y_scale)); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + (sctg_layout_values.scales.top_y_scale(1)+10) + ")") .call(d3.axisBottom(sctg_layout_values.scales.time_scale)); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + (sctg_layout_values.scales.bottom_y_scale(0)+10) + ")") .call(d3.axisBottom(sctg_layout_values.scales.time_scale)); var parent = document.createElement("div"); parent.appendChild(svg.node()); parent.appendChild(logDiv.node()); return parent; }33:[] 2f:{"title":"Social Communication Temporal Graphs","cells":[{"id":0,"value":"md`# Social Communication Temporal Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3_array = require(\"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"d3_tip = require(\"d3-tip\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = {\n const URL=\"https://gist.githubusercontent.com/napsternxg/4b69a9cb345ad9df2ad874a773c09ba1/raw/152f927df27b13ec2b0e13a4f6cf4f9f1389321a/demonetization-tweets.csv\"\n const data = d3.csv(URL)\n debugger\n return data \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"strictIsoParse = d3.utcParse(\"%Y-%m-%d %H:%M:%S\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"strictIsoParse(\"2016-11-23 18:40:30\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"parsed_data = {\n const parsed_data = data.map(function(d){\n return {\n id: d[\"id\"], \n screenName: d[\"screenName\"],\n retweetCount: +d[\"retweetCount\"],\n favoriteCount: +d[\"favoriteCount\"],\n created: strictIsoParse(d[\"created\"])\n }\n });\n return parsed_data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"function reduce_fn(d) {\n return {\n count: d.length,\n time_first_occurence: d3.min(d, v => v.created),\n total_rt: d3.sum(d, v => v.retweetCount) \n }; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"network_data = {\n const network_data = d3_array.rollup(parsed_data, reduce_fn, d => d.screenName)\n return network_data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"d3.extent(Array.from(network_data.values()).map(d => d.total_rt))","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"d3.extent(parsed_data.map(d => +d.retweetCount))","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"time_scale = d3.scaleTime().range([0, 900])","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"sctg_layout = sctg()\n .topNodeKey(d => d.screenName)\n.timeKey(d => d.created)\n.timeScale(time_scale)\n.topReduce(reduce_fn)\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"config = {\n const top_config = {\n y_fn: d => d.count,\n size_fn: d => d.total_rt,\n color_fn: d => \"black\",\n y_scale: d3.scaleLinear().range([0, -500]),\n size_scale: d3.scaleLinear().range([1, 10]),\n };\n const bottom_config = {\n y_fn: d => d.retweetCount,\n size_fn: d => d.favoriteCount,\n color_fn: d => \"black\",\n y_scale: d3.scaleLinear().range([200, 50]),\n size_scale: d3.scaleLinear().range([2, 10]),\n };\n return {\n top: top_config,\n bottom: bottom_config\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"sctg_layout_values = sctg_layout(parsed_data, config);","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}