[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":-5,"_54":16,"_107":-5,"_108":109,"_110":111},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":64,"_85":86,"_87":88,"_89":-7,"_90":43,"_91":41,"_92":-5,"_93":94,"_95":16,"_96":97,"_98":97,"_99":-7,"_100":-7,"_61":101,"_63":101,"_102":-5,"_103":60,"_104":105},"vizContent",{"_40":64,"_65":66},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":16,"_55":-7,"_56":39,"_57":58,"_59":60,"_61":62,"_63":62},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/542d009afeb0648460c1c362fe9cb19ffb618dd7716f2109bf4ba3551fbccebc.png","sourceType","gist","originalUrl","https://gist.github.com/Noelfish6/dcb164cb9576c8b20d291001b718c6f9","author","Noelfish6","id","v3-user-noelfish6","accountType","user","email","noel.fish6@gmail.com","displayName","Zhengyan Yu","avatar","https://avatars0.githubusercontent.com/u/13926622?v=4","oauthProvider","github","oauthId","13926622","isAdmin","stripeCustomerId","handle","handleNormalized","noelfish6","lifecycleEmailsEnabled",true,"createdAt",1791064387053,"updatedAt","gist-dcb164cb9576c8b20d291001b718c6f9","files",{"_67":68,"_69":70,"_71":72,"_73":74},"f1",{"_75":83,"_77":84},"f2",{"_75":81,"_77":82},"f3",{"_75":79,"_77":80},"f4",{"_75":76,"_77":78},"name","piechart.js","text","var svg = d3.select(\"#piechart\"),\n width = +svg.attr(\"width\"),\n height = +svg.attr(\"height\"),\n radius = Math.min(width, height) / 2,\n g = svg.append(\"g\").attr(\"transform\", \"translate(\" + width / 2 + \",\" + height / 2 + \")\");\n\nvar color = d3.scaleOrdinal(d3.schemeCategory20);\n\nvar pie = d3.pie()\n .sort(null)\n .value(function(d) { return d.count; });\n\nvar path = d3.arc()\n .outerRadius(radius - 10)\n .innerRadius(0);\n\nvar label = d3.arc()\n .outerRadius(radius - 40)\n .innerRadius(radius - 40);\n\n\ndispatch.on(\"dataLoaded.pie\", function(data) {\n\n var groupsDataObject = {};\n for(var i = 0; i < data.nodes.length; i++)\n {\n var character = data.nodes[i];\n if(!groupsDataObject[character.group])\n groupsDataObject[character.group] = [];\n groupsDataObject[character.group].push(character);\n }\n var groupsData = [];\n for(var groupId in groupsDataObject)\n {\n groupsData.push({groupId: parseInt(groupId), count: groupsDataObject[groupId].length});\n }\n\n var arc = g.selectAll(\".arc\")\n .data(pie(groupsData))\n .enter().append(\"g\")\n .attr(\"class\", \"arc\");\n\n arc.append(\"path\")\n .attr(\"d\", path)\n .attr(\"fill\", function(d) { return color(d.data.groupId); });\n\n arc.append(\"text\")\n .attr(\"transform\", function(d) { return \"translate(\" + label.centroid(d) + \")\"; })\n .attr(\"dy\", \"0.35em\")\n .text(function(d) { return d.data.age; });\n\n arc.on(\"mouseover\", function(d) {\n d3.select(this).style(\"stroke\", \"black\")\n })\n\n arc.on(\"mouseout\", function(d) {\n d3.select(this).style(\"stroke\", \"\")\n })\n\n// dispatch.call('dataLoaded.pie',data,null);\n\n\n});\n\n","nodelink.js","var nodelinkSvg = d3.select(\"#nodelink\"),\n width = +nodelinkSvg.attr(\"width\"),\n height = +nodelinkSvg.attr(\"height\");\n\nvar color = d3.scaleOrdinal(d3.schemeCategory20);\n\nvar simulation = d3.forceSimulation()\n .force(\"link\", d3.forceLink().id(function(d) { return d.id; }))\n .force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2));\n\n\ndispatch.on(\"dataLoaded.nodelink\", function(graph) {\n var link = nodelinkSvg.append(\"g\")\n .attr(\"class\", \"links\")\n .selectAll(\"line\")\n .data(graph.links)\n .enter().append(\"line\")\n .attr(\"stroke-width\", function(d) { return Math.sqrt(d.value); });\n\n var node = nodelinkSvg.append(\"g\")\n .attr(\"class\", \"nodes\")\n .selectAll(\"circle\")\n .data(graph.nodes)\n .enter().append(\"circle\")\n .attr(\"r\", 5)\n .attr(\"fill\", function(d) { return color(d.group); })\n .call(d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended));\n\n node.append(\"title\")\n .text(function(d) { return d.id; });\n\n simulation\n .nodes(graph.nodes)\n .on(\"tick\", ticked);\n\n simulation.force(\"link\")\n .links(graph.links);\n\n\n node.on(\"mouseover\", function(d) {\n d3.select(this).style(\"stroke\", \"black\")\n })\n\n node.on(\"mouseout\", function(d) {\n d3.select(this).style(\"stroke\", \"\")\n })\n\n\n\n\n\n//////////////////////////////////////////////////////////////////////////////////////////\n \n // node.on(\"mouseover\", function() {\n // var ext = node.extent()\n // var filtered = data.filter(function(d) {\n // return (d.data.created > ext[0] && d.data.created < ext[1])\n // })\n // g.selectAll(\"circle\")\n // .style(\"stroke\", \"\")\n \n // g.selectAll(\"circle\")\n // .data(filtered, function(d) { return d.data.id })\n // .style({\n // stroke: \"#fff\"\n // })\n\n // //emit filtered data\n // dispatch.filter(filtered)\n // })\n\n//////////////////////////////////////////////////////////////////////////////////////////\n \n\n\n\n function ticked() {\n link\n .attr(\"x1\", function(d) { return d.source.x; })\n .attr(\"y1\", function(d) { return d.source.y; })\n .attr(\"x2\", function(d) { return d.target.x; })\n .attr(\"y2\", function(d) { return d.target.y; });\n\n node\n .attr(\"cx\", function(d) { return d.x; })\n .attr(\"cy\", function(d) { return d.y; });\n }\n\n// dispatch.call('dataLoaded.nodelink',graph,null);\n\n});\n\nfunction dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n}\n\nfunction dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n}\n\nfunction dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n}\n\n\n","index.html","\n\n\n\n\n\n\n\n\n","data.js","var dispatch = d3.dispatch(\"dataLoaded\");\n\nd3.json(\"miserables.json\", function(error, data)\n{\n if (error) throw error;\n else\n dispatch.call('dataLoaded', null, data);\n});","slug","dcb164cb9576c8b20d291001b718c6f9","title","Gist dcb164cb9576c8b20d291001b718c6f9","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","RFPvAq6uGxIE3d6Nlue4L","startCommitId","forkedFrom","forkedFromVisibility",1509654932000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]