Last active
February 23, 2021 04:45
-
-
Save gbraccialli/9f1a8be687050a4278758e7944ce0225 to your computer and use it in GitHub Desktop.
clickstream
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| svg text{ | |
| fill:grey; | |
| font-size:11px; | |
| } | |
| svg .values text{ | |
| pointer-events:none; | |
| stroke-width: 0.5px; | |
| } | |
| .groups:hover{ | |
| cursor:pointer; | |
| font-weight:bold; | |
| } | |
| </style> | |
| <title> | |
| Chord | |
| </title> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="http://vizjs.org/viz.v1.1.0.min.js"></script> | |
| <script> | |
| var data = [] | |
| var colors = {} | |
| var sortOrder =[] | |
| var data = [['B', 'C', 3], ['A', 'B', 3], ['B', 'Z', 1], ['B', 'L', 1], ['B', 'F', 1], ['A', 'C', 1], ['B', 'K', 1], ['K', 'L', 1], ['F', 'Z', 1], ['C', 'B', 3], ['B', 'A', 3], ['Z', 'B', 1], ['L', 'B', 1], ['F', 'B', 1], ['C', 'A', 1], ['K', 'B', 1], ['L', 'K', 1], ['Z', 'F', 1]] | |
| var colors = {'K': '#1f77b4', 'F': '#ff7f0e', 'B': '#2ca02c', 'L': '#d62728', 'C': '#9467bd', 'Z': '#8c564b', 'A': '#e377c2'} | |
| function sort(a,b){ return d3.ascending(sortOrder.indexOf(a),sortOrder.indexOf(b)); } | |
| var ch = viz.ch().data(data) | |
| .padding(.01) | |
| .sort(sort) | |
| .innerRadius(430) | |
| .outerRadius(450) | |
| .duration(1000) | |
| .chordOpacity(0.3) | |
| .labelPadding(.03) | |
| .fill(function(d){ return colors[d];}); | |
| var width=1200, height=1100; | |
| var svg = d3.select("body").append("svg").attr("height",height).attr("width",width); | |
| svg.append("g").attr("transform", "translate(600,550)").call(ch); | |
| // adjust height of frame in bl.ocks.org | |
| d3.select(self.frameElement).style("height", height+"px").style("width", width+"px"); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Sankey</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://cdn.rawgit.com/newrelic-forks/d3-plugins-sankey/master/sankey.js"></script> | |
| <script src="http://cdn.rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script> | |
| <script src="http://cdn.rawgit.com/q-m/d3.chart.sankey/master/d3.chart.sankey.min.js"></script> | |
| <style> | |
| body { | |
| padding: 30px; | |
| min-width: 600px; | |
| max-width: 1200px; | |
| margin: auto; | |
| } | |
| #chart { | |
| height: 700px; | |
| font: 8px sans-serif; | |
| } | |
| .node rect { | |
| fill-opacity: .9; | |
| shape-rendering: crispEdges; | |
| stroke-width: 0; | |
| } | |
| .node text { | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| //d3.json("http://cdn.rawgit.com/q-m/d3.chart.sankey/master/example/data/product.json", function(error, json) { | |
| json = {} | |
| json = {'nodes': [{'name': 'A', 'id': '1|A', 'color': '#1f77b4'}, {'name': 'B', 'id': '1|B', 'color': '#ff7f0e'}, {'name': 'K', 'id': '1|K', 'color': '#9467bd'}, {'name': 'Z', 'id': '1|Z', 'color': '#e377c2'}, {'name': 'B', 'id': '2|B', 'color': '#ff7f0e'}, {'name': 'C', 'id': '2|C', 'color': '#2ca02c'}, {'name': 'C', 'id': '3|C', 'color': '#2ca02c'}, {'name': 'F', 'id': '3|F', 'color': '#d62728'}, {'name': 'L', 'id': '3|L', 'color': '#8c564b'}, {'name': 'end', 'id': 'end|end', 'color': 'grey'}], 'links': [{'source': 1, 'value': 2, 'target': 5}, {'source': 5, 'value': 2, 'target': 9}, {'source': 0, 'value': 2, 'target': 4}, {'source': 4, 'value': 2, 'target': 9}, {'source': 2, 'value': 1, 'target': 4}, {'source': 4, 'value': 1, 'target': 8}, {'source': 8, 'value': 1, 'target': 9}, {'source': 0, 'value': 1, 'target': 4}, {'source': 4, 'value': 1, 'target': 6}, {'source': 6, 'value': 1, 'target': 9}, {'source': 3, 'value': 1, 'target': 4}, {'source': 4, 'value': 1, 'target': 7}, {'source': 7, 'value': 1, 'target': 9}]} | |
| var chart = d3.select("#chart").append("svg").chart("Sankey.Path"); | |
| chart | |
| .name(label) | |
| .colorNodes(function(name, node) { | |
| return color(node, 1) || colors.fallback; | |
| }) | |
| .colorLinks(function(link) { | |
| return color(link.source, 4) || color(link.target, 1) || colors.fallback; | |
| }) | |
| .nodeWidth(15) | |
| .nodePadding(10) | |
| .spread(true) | |
| .iterations(0) | |
| .draw(json); | |
| function label(node) { | |
| return node.name.replace(/\s*\(.*?\)$/, ''); | |
| } | |
| function color(node, depth) { | |
| if (node.color) { | |
| return node.color; | |
| } else { | |
| return 'grey'; | |
| } | |
| } | |
| //}); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment