{"id":716,"date":"2024-12-29T21:26:20","date_gmt":"2024-12-30T02:26:20","guid":{"rendered":"https:\/\/cbgames.ca\/?page_id=716"},"modified":"2024-12-29T23:10:00","modified_gmt":"2024-12-30T04:10:00","slug":"test","status":"publish","type":"page","link":"https:\/\/cbgames.ca\/index.php\/test\/","title":{"rendered":"Test"},"content":{"rendered":"<div class=\"gb-container gb-container-e9864034\">\n<style>\r\nbody {\r\n  background-color: #E6E6E6;\r\n}\r\n\r\nsvg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n\r\n\r\n.node {\r\n  pointer-events: all;\r\n  cursor: pointer;\r\n  z-index: 1000;\r\n}\r\n\r\n\r\n.node text {\r\n  font: 8px sans-serif;\r\n}\r\n<\/style>\r\n<div id=\"my-container\" style=\"width:100%;height:100%\"><\/div>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/5.7.0\/d3.min.js\"><\/script>\r\n<script>\r\nconst data = {\r\n \"name\": \"flare\",\r\n \"children\": [\r\n  {\r\n   \"name\": \"animate\",\r\n   \"children\": [\r\n    {\"name\": \"Easing\", \"size\": 17010},\r\n    {\"name\": \"FunctionSequence\", \"size\": 5842},\r\n    {\r\n     \"name\": \"interpolate\",\r\n     \"children\": [\r\n      {\"name\": \"ArrayInterpolator\", \"size\": 1983},\r\n      {\"name\": \"ColorInterpolator\", \"size\": 2047},\r\n      {\"name\": \"DateInterpolator\", \"size\": 1375},\r\n      {\"name\": \"Interpolator\", \"size\": 8746},\r\n      {\"name\": \"MatrixInterpolator\", \"size\": 2202},\r\n      {\"name\": \"NumberInterpolator\", \"size\": 1382},\r\n      {\"name\": \"ObjectInterpolator\", \"size\": 1629},\r\n      {\"name\": \"PointInterpolator\", \"size\": 1675},\r\n      {\"name\": \"RectangleInterpolator\", \"size\": 2042}\r\n     ]\r\n    },\r\n    {\"name\": \"ISchedulable\", \"size\": 1041},\r\n    {\"name\": \"Parallel\", \"size\": 5176},\r\n    {\"name\": \"Pause\", \"size\": 449},\r\n    {\"name\": \"Scheduler\", \"size\": 5593},\r\n    {\"name\": \"Sequence\", \"size\": 5534},\r\n    {\"name\": \"Transition\", \"size\": 9201},\r\n    {\"name\": \"Transitioner\", \"size\": 19975},\r\n    {\"name\": \"TransitionEvent\", \"size\": 1116},\r\n    {\"name\": \"Tween\", \"size\": 6006}\r\n   ]\r\n  },\r\n  {\r\n   \"name\": \"physics\",\r\n   \"children\": [\r\n    {\"name\": \"DragForce\", \"size\": 1082},\r\n    {\"name\": \"GravityForce\", \"size\": 1336},\r\n    {\"name\": \"IForce\", \"size\": 319},\r\n    {\"name\": \"NBodyForce\", \"size\": 10498},\r\n    {\"name\": \"Particle\", \"size\": 2822},\r\n    {\"name\": \"Simulation\", \"size\": 9983},\r\n    {\"name\": \"Spring\", \"size\": 2213},\r\n    {\"name\": \"SpringForce\", \"size\": 1681}\r\n   ]\r\n  },\r\n  {\r\n   \"name\": \"query\",\r\n   \"children\": [\r\n    {\"name\": \"AggregateExpression\", \"size\": 1616},\r\n    {\"name\": \"And\", \"size\": 1027},\r\n    {\"name\": \"Arithmetic\", \"size\": 3891},\r\n    {\"name\": \"Average\", \"size\": 891},\r\n    {\"name\": \"BinaryExpression\", \"size\": 2893},\r\n    {\"name\": \"Comparison\", \"size\": 5103},\r\n    {\"name\": \"CompositeExpression\", \"size\": 3677},\r\n    {\"name\": \"Count\", \"size\": 781},\r\n    {\"name\": \"DateUtil\", \"size\": 4141},\r\n    {\"name\": \"Distinct\", \"size\": 933},\r\n    {\"name\": \"Expression\", \"size\": 5130},\r\n    {\"name\": \"ExpressionIterator\", \"size\": 3617},\r\n    {\r\n     \"name\": \"methods\",\r\n     \"children\": [\r\n      {\"name\": \"add\", \"size\": 593},\r\n      {\"name\": \"and\", \"size\": 330},\r\n      {\"name\": \"average\", \"size\": 287},\r\n      {\"name\": \"count\", \"size\": 277},\r\n      {\"name\": \"distinct\", \"size\": 292},\r\n      {\"name\": \"div\", \"size\": 595},\r\n      {\"name\": \"eq\", \"size\": 594},\r\n      {\"name\": \"fn\", \"size\": 460},\r\n      {\"name\": \"gt\", \"size\": 603},\r\n      {\"name\": \"gte\", \"size\": 625},\r\n      {\"name\": \"iff\", \"size\": 748},\r\n      {\"name\": \"isa\", \"size\": 461},\r\n      {\"name\": \"lt\", \"size\": 597},\r\n      {\"name\": \"lte\", \"size\": 619},\r\n      {\"name\": \"max\", \"size\": 283},\r\n      {\"name\": \"min\", \"size\": 283},\r\n      {\"name\": \"mod\", \"size\": 591},\r\n      {\"name\": \"mul\", \"size\": 603},\r\n      {\"name\": \"neq\", \"size\": 599},\r\n      {\"name\": \"not\", \"size\": 386},\r\n      {\"name\": \"or\", \"size\": 323},\r\n      {\"name\": \"orderby\", \"size\": 307},\r\n      {\"name\": \"range\", \"size\": 772},\r\n      {\"name\": \"select\", \"size\": 296},\r\n      {\"name\": \"stddev\", \"size\": 363},\r\n      {\"name\": \"sub\", \"size\": 600},\r\n      {\"name\": \"sum\", \"size\": 280},\r\n      {\"name\": \"update\", \"size\": 307},\r\n      {\"name\": \"variance\", \"size\": 335},\r\n      {\"name\": \"where\", \"size\": 299},\r\n      {\"name\": \"xor\", \"size\": 354},\r\n      {\"name\": \"_\", \"size\": 264}\r\n     ]\r\n    },\r\n    {\"name\": \"Minimum\", \"size\": 843},\r\n    {\"name\": \"Not\", \"size\": 1554},\r\n    {\"name\": \"Or\", \"size\": 970},\r\n    {\"name\": \"Query\", \"size\": 13896},\r\n    {\"name\": \"Range\", \"size\": 1594},\r\n    {\"name\": \"StringUtil\", \"size\": 4130},\r\n    {\"name\": \"Sum\", \"size\": 791},\r\n    {\"name\": \"Variable\", \"size\": 1124},\r\n    {\"name\": \"Variance\", \"size\": 1876},\r\n    {\"name\": \"Xor\", \"size\": 1101}\r\n   ]\r\n  },\r\n  {\r\n   \"name\": \"scale\",\r\n   \"children\": [\r\n    {\"name\": \"IScaleMap\", \"size\": 2105},\r\n    {\"name\": \"LinearScale\", \"size\": 1316},\r\n    {\"name\": \"LogScale\", \"size\": 3151},\r\n    {\"name\": \"OrdinalScale\", \"size\": 3770},\r\n    {\"name\": \"QuantileScale\", \"size\": 2435},\r\n    {\"name\": \"QuantitativeScale\", \"size\": 4839},\r\n    {\"name\": \"RootScale\", \"size\": 1756},\r\n    {\"name\": \"Scale\", \"size\": 4268},\r\n    {\"name\": \"ScaleType\", \"size\": 1821},\r\n    {\"name\": \"TimeScale\", \"size\": 5833}\r\n   ]\r\n  },\r\n  {\r\n   \"name\": \"vis\",\r\n   \"children\": [\r\n    {\r\n     \"name\": \"axis\",\r\n     \"children\": [\r\n      {\"name\": \"Axes\", \"size\": 1302},\r\n      {\"name\": \"Axis\", \"size\": 24593},\r\n      {\"name\": \"AxisGridLine\", \"size\": 652},\r\n      {\"name\": \"AxisLabel\", \"size\": 636},\r\n      {\"name\": \"CartesianAxes\", \"size\": 6703}\r\n     ]\r\n    },\r\n    {\r\n     \"name\": \"controls\",\r\n     \"children\": [\r\n      {\"name\": \"AnchorControl\", \"size\": 2138},\r\n      {\"name\": \"ClickControl\", \"size\": 3824},\r\n      {\"name\": \"Control\", \"size\": 1353},\r\n      {\"name\": \"ControlList\", \"size\": 4665},\r\n      {\"name\": \"DragControl\", \"size\": 2649},\r\n      {\"name\": \"ExpandControl\", \"size\": 2832},\r\n      {\"name\": \"HoverControl\", \"size\": 4896},\r\n      {\"name\": \"IControl\", \"size\": 763},\r\n      {\"name\": \"PanZoomControl\", \"size\": 5222},\r\n      {\"name\": \"SelectionControl\", \"size\": 7862},\r\n      {\"name\": \"TooltipControl\", \"size\": 8435}\r\n     ]\r\n    },\r\n    {\r\n     \"name\": \"data\",\r\n     \"children\": [\r\n      {\"name\": \"Data\", \"size\": 20544},\r\n      {\"name\": \"DataList\", \"size\": 19788},\r\n      {\"name\": \"DataSprite\", \"size\": 10349},\r\n      {\"name\": \"EdgeSprite\", \"size\": 3301},\r\n      {\"name\": \"NodeSprite\", \"size\": 19382},\r\n      {\r\n       \"name\": \"render\",\r\n       \"children\": [\r\n        {\"name\": \"ArrowType\", \"size\": 698},\r\n        {\"name\": \"EdgeRenderer\", \"size\": 5569},\r\n        {\"name\": \"IRenderer\", \"size\": 353},\r\n        {\"name\": \"ShapeRenderer\", \"size\": 2247}\r\n       ]\r\n      },\r\n      {\"name\": \"ScaleBinding\", \"size\": 11275},\r\n      {\"name\": \"Tree\", \"size\": 7147},\r\n      {\"name\": \"TreeBuilder\", \"size\": 9930}\r\n     ]\r\n    },\r\n    {\r\n     \"name\": \"events\",\r\n     \"children\": [\r\n      {\"name\": \"DataEvent\", \"size\": 2313},\r\n      {\"name\": \"SelectionEvent\", \"size\": 1880},\r\n      {\"name\": \"TooltipEvent\", \"size\": 1701},\r\n      {\"name\": \"VisualizationEvent\", \"size\": 1117}\r\n     ]\r\n    },\r\n    {\r\n     \"name\": \"legend\",\r\n     \"children\": [\r\n      {\"name\": \"Legend\", \"size\": 20859},\r\n      {\"name\": \"LegendItem\", \"size\": 4614},\r\n      {\"name\": \"LegendRange\", \"size\": 10530}\r\n     ]\r\n    },\r\n    {\r\n     \"name\": \"operator\",\r\n     \"children\": [\r\n      {\r\n       \"name\": \"distortion\",\r\n       \"children\": [\r\n        {\"name\": \"BifocalDistortion\", \"size\": 4461},\r\n        {\"name\": \"Distortion\", \"size\": 6314},\r\n        {\"name\": \"FisheyeDistortion\", \"size\": 3444}\r\n       ]\r\n      },\r\n      {\r\n       \"name\": \"encoder\",\r\n       \"children\": [\r\n        {\"name\": \"ColorEncoder\", \"size\": 3179},\r\n        {\"name\": \"Encoder\", \"size\": 4060},\r\n        {\"name\": \"PropertyEncoder\", \"size\": 4138},\r\n        {\"name\": \"ShapeEncoder\", \"size\": 1690},\r\n        {\"name\": \"SizeEncoder\", \"size\": 1830}\r\n       ]\r\n      },\r\n      {\r\n       \"name\": \"filter\",\r\n       \"children\": [\r\n        {\"name\": \"FisheyeTreeFilter\", \"size\": 5219},\r\n        {\"name\": \"GraphDistanceFilter\", \"size\": 3165},\r\n        {\"name\": \"VisibilityFilter\", \"size\": 3509}\r\n       ]\r\n      },\r\n      {\"name\": \"IOperator\", \"size\": 1286},\r\n      {\r\n       \"name\": \"label\",\r\n       \"children\": [\r\n        {\"name\": \"Labeler\", \"size\": 9956},\r\n        {\"name\": \"RadialLabeler\", \"size\": 3899},\r\n        {\"name\": \"StackedAreaLabeler\", \"size\": 3202}\r\n       ]\r\n      },\r\n      {\r\n       \"name\": \"layout\",\r\n       \"children\": [\r\n        {\"name\": \"AxisLayout\", \"size\": 6725},\r\n        {\"name\": \"BundledEdgeRouter\", \"size\": 3727},\r\n        {\"name\": \"CircleLayout\", \"size\": 9317},\r\n        {\"name\": \"CirclePackingLayout\", \"size\": 12003},\r\n        {\"name\": \"DendrogramLayout\", \"size\": 4853},\r\n        {\"name\": \"ForceDirectedLayout\", \"size\": 8411},\r\n        {\"name\": \"IcicleTreeLayout\", \"size\": 4864},\r\n        {\"name\": \"IndentedTreeLayout\", \"size\": 3174},\r\n        {\"name\": \"Layout\", \"size\": 7881},\r\n        {\"name\": \"NodeLinkTreeLayout\", \"size\": 12870},\r\n        {\"name\": \"PieLayout\", \"size\": 2728},\r\n        {\"name\": \"RadialTreeLayout\", \"size\": 12348},\r\n        {\"name\": \"RandomLayout\", \"size\": 870},\r\n        {\"name\": \"StackedAreaLayout\", \"size\": 9121},\r\n        {\"name\": \"TreeMapLayout\", \"size\": 9191}\r\n       ]\r\n      },\r\n      {\"name\": \"Operator\", \"size\": 2490},\r\n      {\"name\": \"OperatorList\", \"size\": 5248},\r\n      {\"name\": \"OperatorSequence\", \"size\": 4190},\r\n      {\"name\": \"OperatorSwitch\", \"size\": 2581},\r\n      {\"name\": \"SortOperator\", \"size\": 2023}\r\n     ]\r\n    },\r\n    {\"name\": \"Visualization\", \"size\": 16540}\r\n   ]\r\n  }\r\n ]\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst width = 1000,\r\n    height = 1000;\r\n\r\ni = 0;\r\n\r\nconst root = d3.hierarchy(data);\r\nconst transform = d3.zoomIdentity;\r\nlet node, link;\r\n\r\nconst svg = d3.select('#my-container').append('svg')\r\n  .call(d3.zoom().scaleExtent([1\/2, 8]).on('zoom', zoomed))\r\n  .append('g')\r\n  .attr('transform', 'translate(40,0)');\r\n\r\n\r\n\r\nconst simulation = d3.forceSimulation()\r\n  .force('link', d3.forceLink().id(function(d) { return d.id; }))\r\n  .force('charge', d3.forceManyBody().strength(-15).distanceMax(300))\r\n  .force('center', d3.forceCenter( width\/2, height\/4 ))\r\n  .on('tick', ticked)\r\n\r\n\r\nfunction update() {\r\n  const nodes = flatten(root)\r\n  const links = root.links()\r\n  \r\n  link = svg\r\n    .selectAll('.link')\r\n    .data(links, function(d){ return d.target.id })\r\n  \r\n  link.exit().remove()\r\n  \r\n  const linkEnter = link\r\n    .enter()\r\n    .append('line')\r\n    .attr('class', 'link')\r\n    .style('stroke', '#000' )\r\n    .style('opacity', '0.2')\r\n    .style('stroke-width', 2)\r\n  \r\n  link = linkEnter.merge(link)\r\n  \r\n  node = svg\r\n    .selectAll('.node')\r\n    .data(nodes, function(d){ return d.id })\r\n\r\n  node.exit().remove()\r\n  \r\n  const nodeEnter = node\r\n    .enter()\r\n    .append('g')\r\n    .attr('class', 'node')\r\n    .attr('stroke', '#666')\r\n    .attr('stroke-width', 2)\r\n    .style('fill', color)\r\n    .style('opacity', 1)\r\n    .on('click', clicked)\r\n    .call(d3.drag()\r\n      .on('start', dragstarted)\r\n      .on('drag', dragged)\r\n      .on('end', dragended))\r\n  \r\n  nodeEnter.append('circle')\r\n    .attr(\"r\", function(d) { return Math.sqrt(d.data.size) \/ 10 || 4.5; })\r\n    .style('text-anchor', function(d){ return d.children ? 'end' : 'start'; })\r\n    .text(function(d){ return d.data.name })\r\n\r\n    node = nodeEnter.merge(node)\r\n    simulation.nodes(nodes)\r\n    simulation.force('link').links(links)\r\n}\r\n\r\nfunction sizeContain(num) {\r\n num = num > 1000 ? num\/1000 : num\/100\r\n if (num < 4) num = 4\r\n return num\r\n}\r\n\r\nfunction color(d) {\r\n  return d._children ? \"#51A1DC\" \/\/ collapsed package\r\n      : d.children ? \"#51A1DC\" \/\/ expanded package\r\n      : \"#F94B4C\"; \/\/ leaf node\r\n}\r\n\r\nfunction radius(d) {\r\n  return d._children ? 8\r\n    : d.children ? 8\r\n    : 4\r\n}\r\n\r\nfunction ticked() {\r\n  link\r\n    .attr('x1', function(d){ return d.source.x; })\r\n    .attr('y1', function(d){ return d.source.y; })\r\n    .attr('x2', function(d){ return d.target.x; })\r\n    .attr('y2', function(d){ return d.target.y; })\r\n  \r\n  node\r\n    .attr('transform', function(d){ return `translate(${d.x}, ${d.y})`})\r\n}\r\n\r\nfunction clicked(d) {\r\n  if (!d3.event.defaultPrevented) {\r\n    if (d.children) {\r\n      d._children = d.children;\r\n      d.children = null;\r\n    } else {\r\n      d.children = d._children;\r\n      d._children = null;\r\n    }\r\n    update()\r\n  }\r\n}\r\n\r\n\r\nfunction dragstarted(d) {\r\n  if (!d3.event.active) simulation.alphaTarget(0.3).restart()\r\n  d.fx = d.x\r\n  d.fy = d.y\r\n}\r\n\r\nfunction dragged(d) {\r\n  d.fx = d3.event.x\r\n  d.fy = d3.event.y\r\n}\r\n\r\nfunction dragended(d) {\r\n  if (!d3.event.active) simulation.alphaTarget(0)\r\n  d.fx = null\r\n  d.fy = null\r\n}\r\n\r\nfunction flatten(root) {\r\n  const nodes = []\r\n  function recurse(node) {\r\n    if (node.children) node.children.forEach(recurse)\r\n    if (!node.id) node.id = ++i;\r\n    else ++i;\r\n    nodes.push(node)\r\n  }\r\n  recurse(root)\r\n  return nodes\r\n}\r\n\r\nfunction zoomed() {\r\n  svg.attr('transform', d3.event.transform)\r\n}\r\n\r\nupdate() \r\n<\/script>\n\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-716","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/pages\/716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/comments?post=716"}],"version-history":[{"count":12,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/pages\/716\/revisions"}],"predecessor-version":[{"id":731,"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/pages\/716\/revisions\/731"}],"wp:attachment":[{"href":"https:\/\/cbgames.ca\/index.php\/wp-json\/wp\/v2\/media?parent=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}