31:Taf8,makeForceGraphPlot = (data, selection) => { const w2 = width / 2, h2 = height / 2; const ctx = DOM.context2d(width, height); const canvas = ctx.canvas; let mouseDown = false; const simulation = forceSimulation(width, height); let transform = d3.zoomIdentity; // The simulation will alter the input data objects so make // copies to protect the originals. const nodes = data.nodes.map(d => Object.assign({}, d)); const edges = data.links.map(d => Object.assign({}, d)); d3.select(canvas) .call(d3.drag() // Must set this in order to drag nodes. New in v5? .container(canvas) .subject(dragSubject) .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded)) .call(d3.zoom() .scaleExtent([1 / 10, 8]) .on('zoom', zoomed)); simulation.nodes(nodes) .on("tick",simulationUpdate); simulation.force("link") .links(edges); function zoomed() { transform = d3.event.transform; simulationUpdate(); } /** Find the node that was clicked, if any, and return it. */ function dragSubject() { const x = transform.invertX(d3.event.x), y = transform.invertY(d3.event.y); const node = findNode(nodes, x, y, selection); if (node) { node.x = transform.applyX(node.x); node.y = transform.applyY(node.y); } // else: No node selected, drag container return node; } function dragStarted() { if (!d3.event.active) { simulation.alphaTarget(0.3).restart(); } d3.event.subject.fx = transform.invertX(d3.event.x); d3.event.subject.fy = transform.invertY(d3.event.y); } function dragged() { d3.event.subject.fx = transform.invertX(d3.event.x); d3.event.subject.fy = transform.invertY(d3.event.y); } function dragEnded() { if (!d3.event.active) { simulation.alphaTarget(0); } d3.event.subject.fx = null; d3.event.subject.fy = null; } function simulationUpdate() { ctx.save(); ctx.clearRect(0, 0, width, height); ctx.translate(transform.x, transform.y); ctx.scale(transform.k, transform.k); // Draw edges edges.forEach((d) => { ctx.beginPath(); ctx.moveTo(d.source.x, d.source.y); ctx.lineTo(d.target.x, d.target.y); ctx.lineWidth = edgeWidth; ctx.strokeStyle = edgeColor; ctx.stroke(); }); // Draw the nodes nodes.forEach((d, i) => { const r = d.radius; ctx.beginPath(); // Node fill ctx.moveTo(d.x + r, d.y); ctx.arc(d.x, d.y, r, 0, 2 * Math.PI); ctx.fillStyle = nodeColor; ctx.fill(); // Node clear outline ctx.strokeStyle = '#fff' ctx.lineWidth = '1.5' ctx.stroke(); }); ctx.restore(); } return canvas; }32:T72f,makeLogLogPlot = (h) => { // Add tooltip information const fitLine = collegeData[h].fitLine.map(d => Object.assign({}, d)); fitLine.forEach((d) => {d.slope = collegeData[h].powerFit.m;}); fitLine.forEach((d) => {d.intercept = collegeData[h].powerFit.b;}); const plot = vegalite({ $schema: 'https://vega.github.io/schema/vega-lite/v3.json', title: `Hour of Day: ${h + 1}, Slope: ${slope.toExponential(2)}`, // Add space for the action button at top right of plot width: width - 100, height: height, layer: [ { data: {values: collegeData[h].powerValues}, mark: 'circle', encoding: { x: { field: 'freq', type: 'quantitative', scale: {type: 'log'}, axis: {title: 'Frequency', grid: false} }, y: { field: 'size', type: 'quantitative', scale: {type: 'log'}, axis: {title: 'Size', grid: false} }, color: {value: d3.schemeCategory10[3]}, size: {value: '150'}, tooltip: [ {field: 'freq', type: 'quantitative'}, {field: 'size', type: 'quantitative'} ] } }, { data: {values: fitLine}, mark: {type: 'line', point: true}, encoding: { x: { field: 'freq', type: 'quantitative', scale: {type: 'log'}, axis: {title: 'Frequency'} }, y: { field: 'size', type: 'quantitative', scale: {type: 'log'}, axis: {title: 'Size'} }, tooltip: [ {field: 'slope', type: 'quantitative'}, {field: 'intercept', type: 'quantitative'} ] } } ] }); return plot; }33:[] 2f:{"title":"CSCI 444 - Project 4: College Message Network","cells":[{"id":0,"value":"md`# CSCI 444 - Project 4: College Message Network\n\nFor this project I chose to use the [college social network dataset](http://snap.stanford.edu/data/CollegeMsg.html) provided by [SNAP](http://snap.stanford.edu/index.html) [1]. The data was taken from a Facebook-like social network at the University of California, Irvine. The messages were sent over a seven month period.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`## Hypothesis\n\n**When separated by hour of the day, the private messages in the college social network dataset form Scale-Free Networks.**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`## Code and Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"// Graph data structure lib\ngraphlib = require('graphlib/dist/graphlib.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"// Wrapper around Vega/Vega-Lite\nvegalite = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"baseCharge = -100","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"nodeCharge = (node) => {\n return baseCharge * Math.sqrt(node.degree);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"baseRadius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"function nodeRadius(node) {\n return baseRadius * Math.sqrt(node.degree);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"createGraph = (data) => {\n const g = new graphlib.Graph({undirected: true});\n data.nodes.forEach((n) => {\n g.setNode(n.id);\n });\n data.links.forEach((e) => {\n g.setEdge(e.source, e.target);\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"getPowerValues = (data) => {\n const degLog = data.nodes.map(n => n.degree).sort().map(d => Math.log10(d)),\n bins = d3.histogram().domain(d3.extent(degLog))(degLog),\n // logData = bins.map((d) => {return {freq: Math.log(d.length), size: d.x1}}),\n powerData = bins.map((d) => {return {freq: d.length, size: Math.pow(10, d.x1)}}),\n filterdData = [];\n // Filter out any zero/negative values so the log-log plot doesn't panic.\n // This should just be a copy except for empty bins.\n powerData.forEach((d) => {\n if (d.freq > 0 && d.size > 0) {\n filterdData.push(d);\n } else {\n console.log(`Dropping value: ${d.freq} ${d.size}`);\n }\n });\n return {\n data: filterdData,\n bins: bins\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"function linLeastSquares(powerData) {\n function mean(x) {\n let sum = 0;\n x.forEach((d) => {\n sum += d\n });\n return sum / x.length;\n }\n \n const x = powerData.map(d => d.freq),\n y = powerData.map(d => d.size),\n xbar = mean(x),\n ybar = mean(y),\n xybar = mean(x.map((xi, i) => xi * y[i])),\n x2bar = mean(x.map(xi => xi * xi)),\n sig2x = x2bar - (xbar * xbar),\n m = (xybar - (xbar * ybar)) / sig2x,\n b = ybar - (m * xbar);\n return {m: m, b: b};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"getFitLine = (values, fit) => {\n const x = values.map(d => d.freq),\n y = values.map(d => d.size),\n ymin = Math.min(...y),\n ymax = Math.max(...y),\n xmin = Math.pow(ymin / Math.pow(10, fit.b), 1 / fit.m),\n xmax = Math.pow(ymax / Math.pow(10, fit.b), 1 / fit.m);\n return [\n {\n freq: xmin,\n size: ymin\n },\n {\n freq: xmax,\n size: ymax\n }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"processData = (topData) => {\n topData.forEach((data, i) => {\n const g = createGraph(data);\n data.graph = g;\n data.nodes.forEach((n) => {\n // Add degree to each node\n const elist = g.nodeEdges(n.id);\n n.degree = elist.length;\n // Add radius to each node\n n.radius = nodeRadius(n);\n // Add charge value to each node\n n.charge = nodeCharge(n);\n });\n // Power Values\n const result = getPowerValues(data);\n data.powerValues = result.data;\n data.powerBins = result.bins;\n // Power Law fit\n const logValues = data.powerValues.map((d) => {\n return {\n freq: Math.log10(d.freq),\n size: Math.log10(d.size)\n };\n });\n const fit = linLeastSquares(logValues);\n data.powerFit = fit;\n data.fitLine = getFitLine(data.powerValues, fit);\n });\n return topData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"md`The JSON file containing the raw, hourly, network data can be found as a gist [here](https://gist.github.com/fbunt/d9abc5c54fe81d509b370685741124ae). It was generated using code that can be found in my [github repository](https://github.com/fbunt/csci-444-proj04). A link is make between two people if any messages were sent between them. Direction is not recorded, thus the networks are undirected graphs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"collegeData = {\n const rawData = await d3.json(\n 'https://gist.githubusercontent.com/fbunt'\n + '/d9abc5c54fe81d509b370685741124ae/raw'\n + '/2a28bb0ea8bb199f40cd5524dedb9ae11386b4e7'\n + '/college_data.json');\n // Convert keyed object to array\n const data = [],\n keys = Object.keys(rawData).sort();\n keys.forEach((k) => {\n data.push(rawData[k]);\n });\n return processData(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"slopes = collegeData.map(d => d.powerFit.m)","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`Controls the height of plots. Be carefull with this. Changing it will cause redraws on a lot of intensive plots.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"height","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"edgeWidth = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"nodeColor = d3.schemeCategory10[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"nodeOuterColor = '#fff'","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"edgeColor = d3.schemeCategory10[7]","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"// Used to locate a node under the cursor, if any\nfunction findNode(nodes, x, y, selection) {\n let i;\n for (i = nodes.length - 1; i >= 0; --i) {\n const node = nodes[i],\n dx = x - node.x,\n dy = y - node.y,\n distSq = (dx * dx) + (dy * dy),\n rSq = node.radius * node.radius;\n if (distSq < rSq) {\n if (selection) {\n selection.id = node.id;\n }\n return node;\n }\n };\n if (selection) {\n selection.id = null;\n }\n // No node selected\n return undefined; \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"function forceSimulation(width, height) {\n const w2 = width / 2,\n h2 = height / 2;\n const centerForce = 0.05;\n return d3.forceSimulation()\n .force('x', d3.forceX(w2).strength(centerForce))\n .force('y', d3.forceY(h2).strength(centerForce))\n .force('center', d3.forceCenter(w2, h2))\n .force('charge', d3.forceManyBody().strength(d => d.charge))\n .force('link', d3.forceLink().id(d => d.id))\n .force('collide', d3.forceCollide().radius(d => d.radius));\n // .force('radial', d3.forceRadial(150, w2, h2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"selection = ({id: null})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`## Data Exploration\n\nUse the drop down to select the time of day to view the network at. A node's radius is proportional to the square root of the node's degree. The network charts also have pan, zoom, and drag functionality.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"hour = +hourStr","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof hourStr = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"makeForceGraphPlot(collegeData[hour], selection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"slope = collegeData[hour].powerFit.m","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"logLogPlot = makeLogLogPlot(hour)","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"height2 = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`## Power Law Expontent Throughout the Day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"exponentPlot ={\n const hours = [...Array(24).keys()],\n slopeData = slopes.map((s, i) => {\n return {slope: Math.abs(s), hour: hours[i] + 1};\n });\n \n const plot = vegalite({\n $schema: 'https://vega.github.io/schema/vega-lite/v3.json',\n // Add space for the action button at top right of plot\n width: width - 100,\n height: height2,\n data: {values: slopeData},\n mark: {type: 'line', point: {size: 75, filled: true}},\n encoding: {\n x: {\n field: 'hour',\n type: 'quantitative',\n axis: {title: 'Hour of Day', grid: false},\n scale: {zero: false}\n },\n y: {\n field: 'slope',\n type: 'quantitative',\n axis: {title: 'Power Law Exponent', grid: false},\n scale: {zero: false}\n }\n }\n });\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"md`The plot above shows the power law exponent for the networks formed from messages at each hour of the day. There is a decent amount of fluctuation that occurs. This is likely due to times of day during which the frequency of messages being sent fell off. Though it is not shown well in this notebook, there is a severe drop in the number of messages being sent around 8 p.m. and during sleeping hours (2-7 a.m.). This seems to correspond to two of the drops in the exponent.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"md`------\n## Support Plots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`### Midnight`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"makeForceGraphPlot(collegeData[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"makeLogLogPlot(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"md`### 6:00 a.m.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"makeForceGraphPlot(collegeData[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"makeLogLogPlot(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"md`### Noon`","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"makeForceGraphPlot(collegeData[11])","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"makeLogLogPlot(11)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`### 6:00 p.m.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"makeForceGraphPlot(collegeData[17])","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"makeLogLogPlot(17)","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`---\n## Rebutal Plots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"md`### 8:00 p.m.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"makeForceGraphPlot(collegeData[20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"makeLogLogPlot(20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`## References\n\n1. Pietro Panzarasa, Tore Opsahl, and Kathleen M. Carley. \"Patterns and dynamics of users' behavior and interaction: Network analysis of an online community.\" Journal of the American Society for Information Science and Technology 60.5 (2009): 911-932.\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}