Skip to content

Instantly share code, notes, and snippets.

@deepaksinghvi
Last active October 13, 2016 04:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deepaksinghvi/428d977e8879d6906b5baf6b3e2a5e00 to your computer and use it in GitHub Desktop.
Save deepaksinghvi/428d977e8879d6906b5baf6b3e2a5e00 to your computer and use it in GitHub Desktop.
NSE Combined Report For Security Traded Notebook for import
{
"paragraphs": [
{
"text": "%angular\n<!DOCTYPE html>\n<meta charset=\"utf-8\">\n<style>\npath {\n stroke: #fff;\n}\n</style>\n<body>\n\n<script src=\"https://d3js.org/d3.v3.min.js\"></script>\n<script>\n\nvar width = 660,\n height = 450,\n radius = (Math.min(width, height) / 2) - 10;\n\nvar formatNumber = d3.format(\",d\");\nvar fieldNames;\nvar x = d3.scale.linear()\n .range([0, 2 * Math.PI]);\n\nvar y = d3.scale.sqrt()\n .range([0, radius]);\n\nvar color = d3.scale.category20c();\n// Total size of all segments; we set this later, after loading the data.\nvar totalSize = 0; \n\n// Breadcrumb dimensions: width, height, spacing, width of tip/tail.\nvar b = {\n w: 125, h: 30, s: 3, t: 10\n};\n\nvar partition = d3.layout.partition()\n .value(function(d) { return d.size; });\n\nvar arc = d3.svg.arc()\n .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })\n .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })\n .innerRadius(function(d) { return Math.max(0, y(d.y)); })\n .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });\n\nvar svg = d3.select(\"body\").append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + width / 2 + \",\" + (height / 2) + \")\");\n\nd3.text(\"http://localhost:8080/test/copy.csv\", function(text) {\n var csv = d3.csv.parseRows(text);\n var json = buildHierarchy(csv);\n visualization(json);\n});\n\nfunction visualization (jsondata) {\n initializeBreadcrumbTrail();\n\n var path = svg.selectAll(\"path\")\n .data(partition.nodes(jsondata))\n .enter().append(\"path\")\n .attr(\"d\", arc)\n .style(\"fill\", function(d) { return color((d.children ? d : d.parent).name); })\n .on(\"click\", click)\n .on(\"mouseover\", mouseover)\n .append(\"title\")\n .text(function(d) { \n return fieldNames[d.depth-1] + \"-->\"+d.name + \"\\n\" + formatNumber(d.value); });\n\n totalSize = path.node().__data__.value;\n//});\n}\n\n\nfunction initializeBreadcrumbTrail() {\n // Add the svg area.\n var trail = d3.select(\"body\").append(\"svg:svg\")\n .attr(\"width\", width)\n .attr(\"height\", 50)\n .attr(\"id\", \"trail\");\n // Add the label at the end, for the value.\n trail.append(\"svg:text\")\n .attr(\"id\", \"endlabel\")\n .style(\"fill\", \"#000\");\n}\n\n// Generate a string that describes the points of a breadcrumb polygon.\nfunction breadcrumbPoints(d, i) {\n var points = [];\n points.push(\"0,0\");\n points.push(b.w + \",0\");\n points.push(b.w + b.t + \",\" + (b.h / 2));\n points.push(b.w + \",\" + b.h);\n points.push(\"0,\" + b.h);\n if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.\n points.push(b.t + \",\" + (b.h / 2));\n }\n return points.join(\" \");\n}\n\n// Update the breadcrumb trail to show the current sequence and percentage.\nfunction updateBreadcrumbs(nodeArray, value) {\n\n // Data join; key function combines name and depth (= position in sequence).\n var g = d3.select(\"#trail\")\n .selectAll(\"g\")\n .data(nodeArray, function(d) { return d.name + d.depth; });\n\n // Add breadcrumb and label for entering nodes.\n var entering = g.enter().append(\"svg:g\");\n\n entering.append(\"svg:polygon\")\n .attr(\"points\", breadcrumbPoints)\n .style(\"fill\", function(d) { \n return color(d.depth%20); \n });\n\n entering.append(\"svg:text\")\n .attr(\"x\", (b.w + b.t) / 2)\n .attr(\"y\", b.h / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .text(function(d) { \n return d.name; \n });\n\n // Set position for entering and updating nodes.\n g.attr(\"transform\", function(d, i) {\n return \"translate(\" + i * (b.w + b.s) + \", 0)\";\n });\n\n // Remove exiting nodes.\n g.exit().remove();\n\n // Now move and update the value at the end.\n d3.select(\"#trail\").select(\"#endlabel\")\n .attr(\"x\", (nodeArray.length + 0.5) * (b.w + b.s))\n .attr(\"y\", b.h / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .text(value);\n\n // Make the breadcrumb trail visible, if it's hidden.\n d3.select(\"#trail\")\n .style(\"visibility\", \"\");\n\n}\n\nfunction mouseover(d) {\n var sequenceArray = getAncestors(d);\n updateBreadcrumbs(sequenceArray, \" \"+d.value);\n}\n\n// Restore everything to full opacity when moving off the visualization.\nfunction mouseleave(d) {\n\n // Hide the breadcrumb trail\n d3.select(\"#trail\")\n .style(\"visibility\", \"hidden\");\n\n\n // Transition each segment to full opacity and then reactivate it.\n d3.selectAll(\"path\")\n .transition()\n .duration(500)\n .style(\"opacity\", 1)\n .each(\"end\", function() {\n d3.select(this).on(\"mouseover\", mouseover);\n });\n\n d3.select(\"#explanation\")\n .style(\"visibility\", \"hidden\");\n}\n\n\nfunction getAncestors(node) {\n var path = [];\n var current = node;\n while (current.parent) {\n path.unshift(current);\n current = current.parent;\n }\n return path;\n}\n\nfunction click(d) {\n svg.transition()\n .duration(750)\n .tween(\"scale\", function() {\n var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),\n yd = d3.interpolate(y.domain(), [d.y, 1]),\n yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);\n return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };\n })\n .selectAll(\"path\")\n .attrTween(\"d\", function(d) { return function() { return arc(d); }; });\n}\n\nd3.select(self.frameElement).style(\"height\", height + \"px\");\n\nfunction buildHierarchy(csv) {\n\n var root = {\"name\": \"root\", \"children\": []};\n \n fieldNames = csv[0];\n \n for (var i = 1; i < csv.length; i++) {\n var sequence=\"\";\n\n for( var j = 0; j<csv[i].length-1; j++){\n if(j!=0){\n sequence = sequence + \"-\"\n }\n sequence = sequence + csv[i][j]\n }\n \n var size = +csv[i][csv[i].length-1];\n if (isNaN(size)) { // e.g. if this is a header row\n continue;\n }\n var parts = sequence.split(\"-\");\n var currentNode = root;\n for (var j = 0; j < parts.length; j++) {\n var children = currentNode[\"children\"];\n var nodeName = parts[j];\n var childNode;\n if (j + 1 < parts.length) {\n // Not yet at the end of the sequence; move down the tree.\n var foundChild = false;\n for (var k = 0; k < children.length; k++) {\n if (children[k][\"name\"] == nodeName) {\n childNode = children[k];\n foundChild = true;\n break;\n }\n }\n // If we don't already have a child node for this branch, create it.\n if (!foundChild) {\n childNode = {\"name\": nodeName, \"children\": []};\n children.push(childNode);\n }\n currentNode = childNode;\n } else {\n // Reached the end of the sequence; create a leaf node.\n childNode = {\"name\": nodeName, \"size\": size};\n children.push(childNode);\n }\n }\n }\n console.log(root);\n return root;\n};\n\nfunction getRandomColor() {\n var letters = '0123456789ABCDEF';\n var color = '#';\n for (var i = 0; i < 6; i++ ) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}\n</script>\n</body>",
"dateUpdated": "2016-10-12T17:07:15+0530",
"config": {
"colWidth": 12,
"graph": {
"mode": "table",
"height": 300,
"optionOpen": false,
"keys": [],
"values": [],
"groups": [],
"scatter": {}
},
"enabled": true,
"editorMode": "ace/mode/scala"
},
"settings": {
"params": {},
"forms": {}
},
"jobName": "paragraph_1476271216947_-1621441158",
"id": "20161012-165016_1072634094",
"result": {
"code": "SUCCESS",
"type": "ANGULAR",
"msg": "<!DOCTYPE html>\n<meta charset=\"utf-8\">\n<style>\npath {\n stroke: #fff;\n}\n</style>\n<body>\n\n<script src=\"https://d3js.org/d3.v3.min.js\"></script>\n<script>\n\nvar width = 660,\n height = 450,\n radius = (Math.min(width, height) / 2) - 10;\n\nvar formatNumber = d3.format(\",d\");\nvar fieldNames;\nvar x = d3.scale.linear()\n .range([0, 2 * Math.PI]);\n\nvar y = d3.scale.sqrt()\n .range([0, radius]);\n\nvar color = d3.scale.category20c();\n// Total size of all segments; we set this later, after loading the data.\nvar totalSize = 0; \n\n// Breadcrumb dimensions: width, height, spacing, width of tip/tail.\nvar b = {\n w: 125, h: 30, s: 3, t: 10\n};\n\nvar partition = d3.layout.partition()\n .value(function(d) { return d.size; });\n\nvar arc = d3.svg.arc()\n .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })\n .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })\n .innerRadius(function(d) { return Math.max(0, y(d.y)); })\n .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });\n\nvar svg = d3.select(\"body\").append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + width / 2 + \",\" + (height / 2) + \")\");\n\nd3.text(\"http://localhost:8080/test/copy.csv\", function(text) {\n var csv = d3.csv.parseRows(text);\n var json = buildHierarchy(csv);\n visualization(json);\n});\n\nfunction visualization (jsondata) {\n initializeBreadcrumbTrail();\n\n var path = svg.selectAll(\"path\")\n .data(partition.nodes(jsondata))\n .enter().append(\"path\")\n .attr(\"d\", arc)\n .style(\"fill\", function(d) { return color((d.children ? d : d.parent).name); })\n .on(\"click\", click)\n .on(\"mouseover\", mouseover)\n .append(\"title\")\n .text(function(d) { \n return fieldNames[d.depth-1] + \"-->\"+d.name + \"\\n\" + formatNumber(d.value); });\n\n totalSize = path.node().__data__.value;\n//});\n}\n\n\nfunction initializeBreadcrumbTrail() {\n // Add the svg area.\n var trail = d3.select(\"body\").append(\"svg:svg\")\n .attr(\"width\", width)\n .attr(\"height\", 50)\n .attr(\"id\", \"trail\");\n // Add the label at the end, for the value.\n trail.append(\"svg:text\")\n .attr(\"id\", \"endlabel\")\n .style(\"fill\", \"#000\");\n}\n\n// Generate a string that describes the points of a breadcrumb polygon.\nfunction breadcrumbPoints(d, i) {\n var points = [];\n points.push(\"0,0\");\n points.push(b.w + \",0\");\n points.push(b.w + b.t + \",\" + (b.h / 2));\n points.push(b.w + \",\" + b.h);\n points.push(\"0,\" + b.h);\n if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.\n points.push(b.t + \",\" + (b.h / 2));\n }\n return points.join(\" \");\n}\n\n// Update the breadcrumb trail to show the current sequence and percentage.\nfunction updateBreadcrumbs(nodeArray, value) {\n\n // Data join; key function combines name and depth (= position in sequence).\n var g = d3.select(\"#trail\")\n .selectAll(\"g\")\n .data(nodeArray, function(d) { return d.name + d.depth; });\n\n // Add breadcrumb and label for entering nodes.\n var entering = g.enter().append(\"svg:g\");\n\n entering.append(\"svg:polygon\")\n .attr(\"points\", breadcrumbPoints)\n .style(\"fill\", function(d) { \n return color(d.depth%20); \n });\n\n entering.append(\"svg:text\")\n .attr(\"x\", (b.w + b.t) / 2)\n .attr(\"y\", b.h / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .text(function(d) { \n return d.name; \n });\n\n // Set position for entering and updating nodes.\n g.attr(\"transform\", function(d, i) {\n return \"translate(\" + i * (b.w + b.s) + \", 0)\";\n });\n\n // Remove exiting nodes.\n g.exit().remove();\n\n // Now move and update the value at the end.\n d3.select(\"#trail\").select(\"#endlabel\")\n .attr(\"x\", (nodeArray.length + 0.5) * (b.w + b.s))\n .attr(\"y\", b.h / 2)\n .attr(\"dy\", \"0.35em\")\n .attr(\"text-anchor\", \"middle\")\n .text(value);\n\n // Make the breadcrumb trail visible, if it's hidden.\n d3.select(\"#trail\")\n .style(\"visibility\", \"\");\n\n}\n\nfunction mouseover(d) {\n var sequenceArray = getAncestors(d);\n updateBreadcrumbs(sequenceArray, \" \"+d.value);\n}\n\n// Restore everything to full opacity when moving off the visualization.\nfunction mouseleave(d) {\n\n // Hide the breadcrumb trail\n d3.select(\"#trail\")\n .style(\"visibility\", \"hidden\");\n\n\n // Transition each segment to full opacity and then reactivate it.\n d3.selectAll(\"path\")\n .transition()\n .duration(500)\n .style(\"opacity\", 1)\n .each(\"end\", function() {\n d3.select(this).on(\"mouseover\", mouseover);\n });\n\n d3.select(\"#explanation\")\n .style(\"visibility\", \"hidden\");\n}\n\n\nfunction getAncestors(node) {\n var path = [];\n var current = node;\n while (current.parent) {\n path.unshift(current);\n current = current.parent;\n }\n return path;\n}\n\nfunction click(d) {\n svg.transition()\n .duration(750)\n .tween(\"scale\", function() {\n var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),\n yd = d3.interpolate(y.domain(), [d.y, 1]),\n yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);\n return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };\n })\n .selectAll(\"path\")\n .attrTween(\"d\", function(d) { return function() { return arc(d); }; });\n}\n\nd3.select(self.frameElement).style(\"height\", height + \"px\");\n\nfunction buildHierarchy(csv) {\n\n var root = {\"name\": \"root\", \"children\": []};\n \n fieldNames = csv[0];\n \n for (var i = 1; i < csv.length; i++) {\n var sequence=\"\";\n\n for( var j = 0; j<csv[i].length-1; j++){\n if(j!=0){\n sequence = sequence + \"-\"\n }\n sequence = sequence + csv[i][j]\n }\n \n var size = +csv[i][csv[i].length-1];\n if (isNaN(size)) { // e.g. if this is a header row\n continue;\n }\n var parts = sequence.split(\"-\");\n var currentNode = root;\n for (var j = 0; j < parts.length; j++) {\n var children = currentNode[\"children\"];\n var nodeName = parts[j];\n var childNode;\n if (j + 1 < parts.length) {\n // Not yet at the end of the sequence; move down the tree.\n var foundChild = false;\n for (var k = 0; k < children.length; k++) {\n if (children[k][\"name\"] == nodeName) {\n childNode = children[k];\n foundChild = true;\n break;\n }\n }\n // If we don't already have a child node for this branch, create it.\n if (!foundChild) {\n childNode = {\"name\": nodeName, \"children\": []};\n children.push(childNode);\n }\n currentNode = childNode;\n } else {\n // Reached the end of the sequence; create a leaf node.\n childNode = {\"name\": nodeName, \"size\": size};\n children.push(childNode);\n }\n }\n }\n console.log(root);\n return root;\n};\n\nfunction getRandomColor() {\n var letters = '0123456789ABCDEF';\n var color = '#';\n for (var i = 0; i < 6; i++ ) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}\n</script>\n</body>"
},
"dateCreated": "2016-10-12T16:50:16+0530",
"dateStarted": "2016-10-12T17:07:15+0530",
"dateFinished": "2016-10-12T17:07:15+0530",
"status": "FINISHED",
"progressUpdateIntervalMs": 500,
"$$hashKey": "object:1226"
},
{
"text": "\nI tried to create d3 based Sunburst for preparing a report in Apache Zeppelin.\n\nIt is easy and quick.\n\nApache Zeppelin display system adds additional div(s) and which creates some \nblank area on the screen. \n\nYou can experience this as there is a blank area between\nsunburst and breadcrumbs in the bottom.",
"dateUpdated": "2016-10-12T18:56:18+0530",
"config": {
"colWidth": 12,
"graph": {
"mode": "table",
"height": 300,
"optionOpen": false,
"keys": [],
"values": [],
"groups": [],
"scatter": {}
},
"enabled": true,
"editorMode": "ace/mode/scala"
},
"settings": {
"params": {},
"forms": {}
},
"jobName": "paragraph_1476271228617_1933299902",
"id": "20161012-165028_2093882543",
"result": {
"code": "ERROR",
"type": "TEXT",
"msg": ""
},
"dateCreated": "2016-10-12T16:50:28+0530",
"dateStarted": "2016-10-12T17:06:13+0530",
"dateFinished": "2016-10-12T17:06:29+0530",
"status": "ERROR",
"progressUpdateIntervalMs": 500,
"$$hashKey": "object:1227"
}
],
"name": "NSE Combined Report For Security Traded",
"id": "2BYYHT6JB",
"angularObjects": {
"2BYVCYEFE:shared_process": [],
"2BW1BECMD:shared_process": [],
"2BZ8CHD3H:shared_process": [],
"2BW2XVQVA:shared_process": [],
"2BWR6QQKQ:shared_process": [],
"2BVSYJTSR:shared_process": [],
"2BWRGBXY2:shared_process": [],
"2BXZ3W2H3:shared_process": [],
"2BXCKYB71:shared_process": [],
"2BZCDC2Q6:shared_process": [],
"2BZ61ZG8V:shared_process": [],
"2BYNA2WZT:shared_process": [],
"2BXHQ2AKQ:shared_process": [],
"2BX9M74WV:shared_process": [],
"2BWE56M1P:shared_process": [],
"2BVH4C76C:shared_process": [],
"2BWHF67VC:shared_process": [],
"2BWCXPB48:shared_process": []
},
"config": {
"looknfeel": "default"
},
"info": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment