Created
May 13, 2020 00:55
-
-
Save cgobat/2234f8b706222a320cab8762a4bfd31c to your computer and use it in GitHub Desktop.
Dynamic and open implementation of https://shahinrostami.com/posts/statistics/data-is-beautiful/occurrence-and-co-occurrence-of-pokemon-types-with-chord-diagrams/
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
| { | |
| "cells": [ | |
| { | |
| "cell_type": "code", | |
| "execution_count": 1, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "import numpy as np, pandas as pd, itertools\n", | |
| "from chord import Chord" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 2, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "gens = ['I','II','III','IV','V','VI','VII','VIII']\n", | |
| "pokelist = pd.DataFrame([])\n", | |
| "for generation in gens:\n", | |
| " url = \"https://en.wikipedia.org/wiki/List_of_generation_\"+generation+\"_Pok%C3%A9mon\"\n", | |
| " pokelist = pokelist.append(pd.read_html(url)[2 if generation=='VII' else 1])\n", | |
| "\n", | |
| "pokelist.columns = pokelist.columns.droplevel()\n", | |
| "pokelist = pokelist.drop([\"Japanese\",\"Evolves into\",\"Notes\"],axis=1).set_index(\"National Pokédexnumber\")\n", | |
| "pokelist.index.name = \"#\"\n", | |
| "pokelist[\"Primary\"] = [entry.split(\"[\")[0] for entry in pokelist.Primary]\n", | |
| "pokelist[\"Secondary\"] = [entry.split(\"[\")[0] for entry in pokelist.Secondary]" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 3, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "typelist = pokelist[(pokelist.Primary != pokelist.Secondary) & (pokelist.Primary != \"Unknown\")].drop([\"English\"],axis=1)\n", | |
| "typelist.to_csv(\"./Outputs/types.csv\")" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 4, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "combos = list(itertools.chain.from_iterable((i, i[::-1]) for i in typelist.values))" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 5, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [ | |
| "matrix = pd.pivot_table(pd.DataFrame(combos), index=0, columns=1, aggfunc=\"size\", fill_value=0)\n", | |
| "matrixlist = pd.pivot_table(pd.DataFrame(combos), index=0, columns=1, aggfunc=\"size\", fill_value=0).values.tolist()" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 6, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/plain": [ | |
| "0 Bird\n", | |
| "1 Bug\n", | |
| "2 Dark\n", | |
| "3 Dragon\n", | |
| "4 Electric\n", | |
| "5 Fairy\n", | |
| "6 Fighting\n", | |
| "7 Fire\n", | |
| "8 Flying\n", | |
| "9 Ghost\n", | |
| "10 Grass\n", | |
| "11 Ground\n", | |
| "12 Ice\n", | |
| "13 Normal\n", | |
| "14 Poison\n", | |
| "15 Psychic\n", | |
| "16 Rock\n", | |
| "17 Steel\n", | |
| "18 Water\n", | |
| "dtype: object" | |
| ] | |
| }, | |
| "execution_count": 6, | |
| "metadata": {}, | |
| "output_type": "execute_result" | |
| } | |
| ], | |
| "source": [ | |
| "names = np.unique(combos).tolist()\n", | |
| "pd.Series(names)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 7, | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "data": { | |
| "text/html": [ | |
| "<!DOCTYPE html>\n", | |
| "<html>\n", | |
| " <head>\n", | |
| " <!--Chord - Python wrapper around d3-chord\n", | |
| "\n", | |
| " This package enables the generation of Chord diagrams. They can be saved \n", | |
| " directly to HTML files or displayed in a Jupyter Notebook output cell.\n", | |
| "\n", | |
| " Copyright 2020, Dr. Shahin Rostami\n", | |
| " http://shahinrostami.com\n", | |
| " https://github.com/shahinrostami/chord\n", | |
| " https://pypi.org/project/chord/\n", | |
| " -->\n", | |
| " \t<meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\"/>\n", | |
| " <title>Chord Diagram</title>\n", | |
| " <!-- Google Fonts -->\n", | |
| " <script src=\"https://d3js.org/d3.v5.min.js\"></script>\n", | |
| " <link\n", | |
| " href=\"https://fonts.googleapis.com/css?family=Lato:400,900\"\n", | |
| " rel=\"stylesheet\"\n", | |
| " type=\"text/css\"\n", | |
| " />\n", | |
| "\n", | |
| " <style>\n", | |
| " .tippy-content {\n", | |
| " font-family: \"Lato\", sans-serif;\n", | |
| " }\n", | |
| "\n", | |
| " #chart-03bc42ae {\n", | |
| "\n", | |
| " font-size: ;\n", | |
| " font-family: \"Lato\", sans-serif;\n", | |
| " text-align: center;\n", | |
| " fill: #454545;\n", | |
| " }\n", | |
| "\n", | |
| " #chart-03bc42ae svg {\n", | |
| " max-width: 700px;\n", | |
| " }\n", | |
| "\n", | |
| " @media (min-width: 600px) {\n", | |
| "\t\t\t\t#chart-03bc42ae{\n", | |
| "\t\t\t\t\tfont-size: ;\n", | |
| "\t\t\t\t}\n", | |
| "\t\t\t}\n", | |
| " </style>\n", | |
| " </head>\n", | |
| " <body>\n", | |
| " <div id=\"chart-03bc42ae\" class=\"chord\">\n", | |
| " </div>\n", | |
| " <script src=\"https://unpkg.com/@popperjs/core@2\"></script>\n", | |
| " <script src=\"https://unpkg.com/tippy.js@6\"></script>\n", | |
| " <script>\n", | |
| " var script = document.createElement(\"script\");\n", | |
| " script.type = \"text/javascript\";\n", | |
| " script.src = \"https://d3js.org/d3.v5.min.js\";\n", | |
| "\n", | |
| " script.onload = function () {\n", | |
| "\n", | |
| " var script2 = document.createElement(\"script\");\n", | |
| " script2.type = \"text/javascript\";\n", | |
| " script2.src = \"https://shahinrostami.com/assets/chord/script.js\";\n", | |
| " script2.onload = function () {\n", | |
| " margin = {\n", | |
| " left: 0,\n", | |
| " top: 0,\n", | |
| " right: 0,\n", | |
| " bottom: 0\n", | |
| " };\n", | |
| " width = Math.min(window.innerWidth, 700) - margin.left - margin.right;\n", | |
| " height = Math.min(window.innerWidth, 700) - margin.top - margin.bottom;\n", | |
| " innerRadius = Math.min(width, height) * 0.39;\n", | |
| " outerRadius = innerRadius * 1.1;\n", | |
| "\n", | |
| " tag_id = \"chart-03bc42ae\";\n", | |
| " padding = 0.01;\n", | |
| " Names = ['Bird', 'Bug', 'Dark', 'Dragon', 'Electric', 'Fairy', 'Fighting', 'Fire', 'Flying', 'Ghost', 'Grass', 'Ground', 'Ice', 'Normal', 'Poison', 'Psychic', 'Rock', 'Steel', 'Water'];\n", | |
| " colors = d3.schemeSet1;\n", | |
| " opacityDefault = 0.8;\n", | |
| " matrix = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 4, 2, 3, 4, 13, 1, 6, 2, 2, 0, 12, 2, 5, 6, 5], [0, 0, 0, 4, 1, 3, 4, 3, 5, 2, 4, 3, 2, 1, 3, 3, 1, 2, 4], [0, 0, 4, 0, 2, 0, 2, 2, 6, 4, 3, 6, 1, 1, 3, 3, 2, 2, 3], [0, 4, 1, 2, 0, 2, 0, 1, 5, 1, 1, 1, 2, 2, 2, 0, 0, 4, 3], [0, 2, 3, 0, 2, 0, 0, 0, 2, 1, 5, 0, 0, 4, 0, 7, 2, 4, 4], [0, 3, 4, 2, 0, 0, 0, 6, 1, 1, 3, 0, 1, 3, 2, 3, 1, 3, 3], [0, 4, 3, 2, 1, 0, 6, 0, 6, 4, 0, 2, 0, 2, 2, 3, 3, 1, 1], [0, 13, 5, 6, 5, 2, 1, 6, 0, 3, 7, 3, 2, 26, 3, 7, 4, 3, 8], [0, 1, 2, 4, 1, 1, 1, 4, 3, 0, 6, 5, 1, 0, 3, 3, 0, 3, 2], [0, 6, 4, 3, 1, 5, 3, 0, 7, 6, 0, 1, 2, 2, 14, 4, 2, 3, 3], [0, 2, 3, 6, 1, 0, 0, 2, 3, 5, 1, 0, 3, 1, 2, 2, 9, 2, 9], [0, 2, 2, 1, 2, 0, 1, 0, 2, 1, 2, 3, 0, 0, 0, 3, 2, 0, 7], [1, 0, 1, 1, 2, 4, 3, 2, 26, 0, 2, 1, 0, 0, 0, 4, 0, 0, 1], [0, 12, 3, 3, 2, 0, 2, 2, 3, 3, 14, 2, 0, 0, 0, 0, 1, 0, 6], [0, 2, 3, 3, 0, 7, 3, 3, 7, 3, 4, 2, 3, 4, 0, 0, 2, 8, 5], [0, 5, 1, 2, 0, 2, 1, 3, 4, 0, 2, 9, 2, 0, 1, 2, 0, 7, 11], [0, 6, 2, 2, 4, 4, 3, 1, 3, 3, 3, 2, 0, 0, 0, 8, 7, 0, 1], [0, 5, 4, 3, 3, 4, 3, 1, 8, 2, 3, 9, 7, 1, 6, 5, 11, 1, 0]];\n", | |
| " wrap_labels = true;\n", | |
| " credit = false\n", | |
| " details = \n", | |
| " \n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " /////////// Create scale and layout functions //////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " var colors = d3\n", | |
| " .scaleOrdinal()\n", | |
| " .domain(d3.range(Names.length))\n", | |
| " .range(colors);\n", | |
| "\n", | |
| " //A \"custom\" d3 chord function that automatically sorts the order of the chords in such a manner to reduce overlap\n", | |
| " var chord = customChordLayout()\n", | |
| " .padding(padding)\n", | |
| " .sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom\n", | |
| " .matrix(matrix);\n", | |
| "\n", | |
| " var arc = d3\n", | |
| " .arc()\n", | |
| " .innerRadius(innerRadius * 1.01)\n", | |
| " .outerRadius(outerRadius);\n", | |
| "\n", | |
| " var path = d3.ribbon().radius(innerRadius);\n", | |
| "\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " ////////////////////// Create SVG //////////////////////////\n", | |
| " ///////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " var svg = d3\n", | |
| " .select(\"#\" + tag_id)\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\n", | |
| " \"viewBox\",\n", | |
| " \"0 0 \" +\n", | |
| " (width + margin.left + margin.right) +\n", | |
| " \" \" +\n", | |
| " (height + margin.top + margin.bottom)\n", | |
| " )\n", | |
| " .attr(\"preserveAspectRatio\", \"xMinYMin meet\")\n", | |
| " .append(\"g\")\n", | |
| " .attr(\n", | |
| " \"transform\",\n", | |
| " \"translate(\" +\n", | |
| " (width / 2 + margin.left) +\n", | |
| " \",\" +\n", | |
| " (height / 2 + margin.top) +\n", | |
| " \")\"\n", | |
| " );\n", | |
| "\n", | |
| " d3.select(\"#\" + tag_id)\n", | |
| " .append(\"span\")\n", | |
| " .style(\"display\", \"block\")\n", | |
| " .style(\"font-size\", \"12px\")\n", | |
| " .style(\"text-align\", \"right\")\n", | |
| " .style(\"font-family\", '\"Arial\", sans-serif')\n", | |
| " .html(\n", | |
| " 'made with <a href=\"https://github.com/shahinrostami/chord\">chord</a></span>'\n", | |
| " );\n", | |
| "\n", | |
| " if(credit){\n", | |
| " d3.select(\"#\" + tag_id).select(\"span\")\n", | |
| " .append(\"span\")\n", | |
| " .style(\"font-size\", \"12px\")\n", | |
| " .style(\"font-family\", '\"Arial\", sans-serif')\n", | |
| " .html(\n", | |
| " ' [<a href=\"https://twitter.com/shahinrostami\">@ShahinRostami</a>]</span>'\n", | |
| " );\n", | |
| " }\n", | |
| "\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " /////////////// Create the gradient fills //////////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " //Function to create the id for each chord gradient\n", | |
| " function getGradID(d) {\n", | |
| " return (\n", | |
| " \"linkGrad-\" + tag_id + \"-\" + d.source.index + \"-\" + d.target.index\n", | |
| " );\n", | |
| " }\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Create the gradients definitions for each chord\n", | |
| " var grads = svg\n", | |
| " .append(\"defs\")\n", | |
| " .selectAll(\"linearGradient\")\n", | |
| " .data(chord.chords())\n", | |
| " .enter()\n", | |
| " .append(\"linearGradient\")\n", | |
| " .attr(\"id\", getGradID)\n", | |
| " .attr(\"gradientUnits\", \"userSpaceOnUse\")\n", | |
| " .attr(\"x1\", function (d, i) {\n", | |
| " return (\n", | |
| " innerRadius *\n", | |
| " Math.cos(\n", | |
| " (d.source.endAngle - d.source.startAngle) / 2 +\n", | |
| " d.source.startAngle -\n", | |
| " Math.PI / 2\n", | |
| " )\n", | |
| " );\n", | |
| " })\n", | |
| " .attr(\"y1\", function (d, i) {\n", | |
| " return (\n", | |
| " innerRadius *\n", | |
| " Math.sin(\n", | |
| " (d.source.endAngle - d.source.startAngle) / 2 +\n", | |
| " d.source.startAngle -\n", | |
| " Math.PI / 2\n", | |
| " )\n", | |
| " );\n", | |
| " })\n", | |
| " .attr(\"x2\", function (d, i) {\n", | |
| " return (\n", | |
| " innerRadius *\n", | |
| " Math.cos(\n", | |
| " (d.target.endAngle - d.target.startAngle) / 2 +\n", | |
| " d.target.startAngle -\n", | |
| " Math.PI / 2\n", | |
| " )\n", | |
| " );\n", | |
| " })\n", | |
| " .attr(\"y2\", function (d, i) {\n", | |
| " return (\n", | |
| " innerRadius *\n", | |
| " Math.sin(\n", | |
| " (d.target.endAngle - d.target.startAngle) / 2 +\n", | |
| " d.target.startAngle -\n", | |
| " Math.PI / 2\n", | |
| " )\n", | |
| " );\n", | |
| " });\n", | |
| "\n", | |
| " //Set the starting color (at 0%)\n", | |
| " grads\n", | |
| " .append(\"stop\")\n", | |
| " .attr(\"offset\", \"0%\")\n", | |
| " .attr(\"stop-color\", function (d) {\n", | |
| " return colors(d.source.index);\n", | |
| " });\n", | |
| "\n", | |
| " //Set the ending color (at 100%)\n", | |
| " grads\n", | |
| " .append(\"stop\")\n", | |
| " .attr(\"offset\", \"100%\")\n", | |
| " .attr(\"stop-color\", function (d) {\n", | |
| " return colors(d.target.index);\n", | |
| " });\n", | |
| "\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " ////////////////// Draw outer Arcs /////////////////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " var outerArcs = svg\n", | |
| " .selectAll(\"g.group\")\n", | |
| " .data(chord.groups)\n", | |
| " .enter()\n", | |
| " .append(\"g\")\n", | |
| " .attr(\"class\", \"group\")\n", | |
| " .on(\"mouseover\", fade(0.1, 1))\n", | |
| " .on(\"mouseout\", fade(opacityDefault, opacityDefault));\n", | |
| "\n", | |
| " outerArcs\n", | |
| " .append(\"path\")\n", | |
| " .style(\"fill\", function (d) {\n", | |
| " return colors(d.index);\n", | |
| " })\n", | |
| " .attr(\"d\", arc)\n", | |
| " .each(function (d, i) {\n", | |
| " //Search pattern for everything between the start and the first capital L\n", | |
| " var firstArcSection = /(^.+?)L/;\n", | |
| "\n", | |
| " //Grab everything up to the first Line statement\n", | |
| " var newArc = firstArcSection.exec(d3.select(this).attr(\"d\"))[1];\n", | |
| " //Replace all the comma's so that IE can handle it\n", | |
| " newArc = newArc.replace(/,/g, \" \");\n", | |
| "\n", | |
| " //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2)\n", | |
| " //flip the end and start position\n", | |
| " if (\n", | |
| " (d.endAngle > (90 * Math.PI) / 180) &\n", | |
| " (d.startAngle < (270 * Math.PI) / 180)\n", | |
| " ) {\n", | |
| " var startLoc = /M(.*?)A/, //Everything between the first capital M and first capital A\n", | |
| " middleLoc = /A(.*?)0 0 1/, //Everything between the first capital A and 0 0 1\n", | |
| " endLoc = /0 0 1 (.*?)$/; //Everything between the first 0 0 1 and the end of the string (denoted by $)\n", | |
| " //Flip the direction of the arc by switching the start en end point (and sweep flag)\n", | |
| " //of those elements that are below the horizontal line\n", | |
| " var newStart = endLoc.exec(newArc)[1];\n", | |
| " var newEnd = startLoc.exec(newArc)[1];\n", | |
| " var middleSec = middleLoc.exec(newArc)[1];\n", | |
| "\n", | |
| " //Build up the new arc notation, set the sweep-flag to 0\n", | |
| " newArc = \"M\" + newStart + \"A\" + middleSec + \"0 0 0 \" + newEnd;\n", | |
| " } //if\n", | |
| "\n", | |
| " //Create a new invisible arc that the text can flow along\n", | |
| " svg\n", | |
| " .append(\"path\")\n", | |
| " .attr(\"class\", \"hiddenArcs\")\n", | |
| " .attr(\"id\", \"arc-\" + tag_id + \"-\" + i)\n", | |
| " .attr(\"d\", newArc)\n", | |
| " .style(\"fill\", \"none\");\n", | |
| "\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " ////////////////// Append Names ////////////////////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " //Append the label names on the outside\n", | |
| "\n", | |
| " if (wrap_labels) {\n", | |
| " outerArcs\n", | |
| " .append(\"text\")\n", | |
| " .attr(\"class\", \"titles\")\n", | |
| " .attr(\"dy\", function (d, i) {\n", | |
| " return (d.endAngle > (90 * Math.PI) / 180) &\n", | |
| " (d.startAngle < (270 * Math.PI) / 180)\n", | |
| " ? 25\n", | |
| " : -16;\n", | |
| " })\n", | |
| " .append(\"textPath\")\n", | |
| " .attr(\"startOffset\", \"50%\")\n", | |
| " .style(\"text-anchor\", \"middle\")\n", | |
| " .attr(\"xlink:href\", function (d, i) {\n", | |
| " return \"#arc-\" + tag_id + \"-\" + i;\n", | |
| " })\n", | |
| " .text(function (d, i) {\n", | |
| " return Names[i];\n", | |
| " });\n", | |
| " } else {\n", | |
| " //Append the label names on the outside\n", | |
| " outerArcs\n", | |
| " .append(\"text\")\n", | |
| " .each(function (d) {\n", | |
| " d.angle = (d.startAngle + d.endAngle) / 2;\n", | |
| " })\n", | |
| " .attr(\"dy\", \".35em\")\n", | |
| " .attr(\"class\", \"titles\")\n", | |
| " .attr(\"text-anchor\", function (d) {\n", | |
| " return d.angle > Math.PI ? \"end\" : null;\n", | |
| " })\n", | |
| " .attr(\"transform\", function (d) {\n", | |
| " return (\n", | |
| " \"rotate(\" +\n", | |
| " ((d.angle * 180) / Math.PI - 90) +\n", | |
| " \")\" +\n", | |
| " \"translate(\" +\n", | |
| " (outerRadius + 10) +\n", | |
| " \")\" +\n", | |
| " (d.angle > Math.PI ? \"rotate(180)\" : \"\")\n", | |
| " );\n", | |
| " })\n", | |
| " .text(function (d, i) {\n", | |
| " return Names[i];\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " ////////////////// Draw inner chords ///////////////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " svg\n", | |
| " .selectAll(\"path.chord\")\n", | |
| " .data(chord.chords)\n", | |
| " .enter()\n", | |
| " .append(\"path\")\n", | |
| " .attr(\"class\", \"chord\")\n", | |
| " .style(\"fill\", function (d) {\n", | |
| " return \"url(#\" + getGradID(d) + \")\";\n", | |
| " })\n", | |
| " .style(\"opacity\", opacityDefault)\n", | |
| " .attr(\"d\", path)\n", | |
| " .on(\"mouseover\", mouseoverChord(details))\n", | |
| " .on(\"mouseout\", mouseoutChord(opacityDefault, opacityDefault));\n", | |
| " });\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| " ////////////////// Extra Functions /////////////////////////\n", | |
| " ////////////////////////////////////////////////////////////\n", | |
| "\n", | |
| " //Returns an event handler for fading a given chord group.\n", | |
| " function fade(opacityIn, opacityOut) {\n", | |
| " return function (d, i) {\n", | |
| " d3.select(this.ownerSVGElement)\n", | |
| " .selectAll(\"path.chord\")\n", | |
| " .filter(function (d) {\n", | |
| " return d.source.index !== i && d.target.index !== i;\n", | |
| " })\n", | |
| " .transition()\n", | |
| " .style(\"opacity\", opacityIn);\n", | |
| "\n", | |
| " d3.select(this.ownerSVGElement)\n", | |
| " .selectAll(\"path.chord\")\n", | |
| " .filter(function (d) {\n", | |
| " return d.source.index == i || d.target.index == i;\n", | |
| " })\n", | |
| " .transition()\n", | |
| " .style(\"opacity\", opacityOut);\n", | |
| "\n", | |
| " \n", | |
| " };\n", | |
| " } //fade\n", | |
| "\n", | |
| " //Highlight hovered over chord\n", | |
| " function mouseoverChord(details) {\n", | |
| " return function (d, i) {\n", | |
| "\n", | |
| " d3.select(this.ownerSVGElement)\n", | |
| " .selectAll(\"path.chord\")\n", | |
| " .transition()\n", | |
| " .style(\"opacity\", 0.1);\n", | |
| " //Show hovered over chord with full opacity\n", | |
| " d3.select(this).transition().style(\"opacity\", 1);\n", | |
| "\n", | |
| " tippy_content = \"<span style='font-weight:900'>\" +\n", | |
| " Names[d.source.index] +\n", | |
| " \"</span> and <span style='font-weight:900'>\" +\n", | |
| " Names[d.target.index] +\n", | |
| " \"</span><br>occur together in <span style='font-weight:900'>\" +\n", | |
| " d.source.value +\n", | |
| " \"</span> instances\";\n", | |
| "\n", | |
| " \n", | |
| " if (Array.isArray(details) && details.length) {\n", | |
| " if (Array.isArray(details[d.source.index][d.target.index]) && details[d.source.index][d.target.index].length) {\n", | |
| " tippy_content = tippy_content +\n", | |
| " \"<br><br><span><em>\" +\n", | |
| " details[d.source.index][d.target.index].join(', ') +\n", | |
| " \"</em></span>\";\n", | |
| " }\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " \n", | |
| " tippy(this, {\n", | |
| " allowHTML: true,\n", | |
| " followCursor: true,\n", | |
| " content: tippy_content,\n", | |
| " size: \"large\",\n", | |
| " arrow: true,\n", | |
| " });\n", | |
| "\n", | |
| " /*d3.select(\"#list\")\n", | |
| " .html(\n", | |
| " details[d.source.index][d.target.index]\n", | |
| " );*/\n", | |
| " \n", | |
| "\n", | |
| " };\n", | |
| " \n", | |
| " } //fade\n", | |
| "\n", | |
| " //Bring all chords back to default opacity\n", | |
| " function mouseoutChord(opacityIn, opacityOut) {\n", | |
| " return function (d, i) {\n", | |
| " d3.select(this.ownerSVGElement)\n", | |
| " .selectAll(\"path.chord\")\n", | |
| " .transition()\n", | |
| " .style(\"opacity\", opacityOut);\n", | |
| " };\n", | |
| " //Set opacity back to default for all\n", | |
| " } //function mouseoutChord\n", | |
| "\n", | |
| "\n", | |
| " };\n", | |
| " document.body.appendChild(script2);\n", | |
| " };\n", | |
| "\n", | |
| " document.body.appendChild(script);\n", | |
| " </script>\n", | |
| " <script></script>\n", | |
| " </body>\n", | |
| "</html>\n" | |
| ], | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ] | |
| }, | |
| "metadata": {}, | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "source": [ | |
| "colors = [\"#A6B91A\", \"#705746\", \"#6F35FC\", \"#F7D02C\", \"#D685AD\", \"#C22E28\", \"#EE8130\", \"#A98FF3\", \"#735797\", \"#7AC74C\", \"#E2BF65\", \"#96D9D6\", \"#A8A77A\", \"#A33EA1\", \"#F95587\", \"#B6A136\", \"#B7B7CE\", \"#6390F0\"]\n", | |
| "Chord(matrixlist, names).show()" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": null, | |
| "metadata": {}, | |
| "outputs": [], | |
| "source": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "display_name": "Python 3", | |
| "language": "python", | |
| "name": "python3" | |
| }, | |
| "language_info": { | |
| "codemirror_mode": { | |
| "name": "ipython", | |
| "version": 3 | |
| }, | |
| "file_extension": ".py", | |
| "mimetype": "text/x-python", | |
| "name": "python", | |
| "nbconvert_exporter": "python", | |
| "pygments_lexer": "ipython3", | |
| "version": "3.6.6" | |
| }, | |
| "toc": { | |
| "base_numbering": 1, | |
| "nav_menu": {}, | |
| "number_sections": true, | |
| "sideBar": true, | |
| "skip_h1_title": false, | |
| "title_cell": "Table of Contents", | |
| "title_sidebar": "Contents", | |
| "toc_cell": false, | |
| "toc_position": {}, | |
| "toc_section_display": true, | |
| "toc_window_display": false | |
| }, | |
| "varInspector": { | |
| "cols": { | |
| "lenName": 16, | |
| "lenType": 16, | |
| "lenVar": 40 | |
| }, | |
| "kernels_config": { | |
| "python": { | |
| "delete_cmd_postfix": "", | |
| "delete_cmd_prefix": "del ", | |
| "library": "var_list.py", | |
| "varRefreshCmd": "print(var_dic_list())" | |
| }, | |
| "r": { | |
| "delete_cmd_postfix": ") ", | |
| "delete_cmd_prefix": "rm(", | |
| "library": "var_list.r", | |
| "varRefreshCmd": "cat(var_dic_list()) " | |
| } | |
| }, | |
| "oldHeight": 122.4, | |
| "position": { | |
| "height": "40px", | |
| "left": "1070px", | |
| "right": "20px", | |
| "top": "120px", | |
| "width": "350px" | |
| }, | |
| "types_to_exclude": [ | |
| "module", | |
| "function", | |
| "builtin_function_or_method", | |
| "instance", | |
| "_Feature" | |
| ], | |
| "varInspector_section_display": "none", | |
| "window_display": false | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 4 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment