{"id":495,"date":"2019-02-19T23:45:43","date_gmt":"2019-02-19T23:45:43","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh201w23\/?page_id=495"},"modified":"2019-02-19T23:45:44","modified_gmt":"2019-02-19T23:45:44","slug":"publish-your-cytoscape-graph","status":"publish","type":"page","link":"https:\/\/miriamposner.com\/classes\/dh201w23\/tutorials-guides\/network-analysis\/publish-your-cytoscape-graph\/","title":{"rendered":"Publish your Cytoscape graph"},"content":{"rendered":"\n

So far we’ve created a basic Cytoscape network<\/a>, learned to work with node attributes<\/a>, learned to select parts of a network<\/a>, and learned how to convert a bimodal edge list into a unimodal edge list<\/a>. Now we’ll learn about the ways we can export a network diagram in order to share it with the world.<\/p>\n\n\n\n

There are a few different ways to do this, depending on how fancy you want to get. The easiest way is to create a static image of the network. We’ll start with that, in Step 1. Creating an interactive, web-based version<\/a> is more fiddly, but not super-complicated. We’ll do that second, beginning in Step 2.<\/p>\n\n\n\n

<\/a>1. Option 1: Export a static image<\/h2>\n\n\n\n

You’ll be relieved to hear that this is pretty easy. Just click the Export Network Image to File<\/strong> button (labeled 1<\/strong> in the image below). Then — this is the only confusing part — press the Browse<\/strong> button (labeled 2<\/strong>) to choose where to save your image. Give your image a name (3<\/strong>), then click OK<\/strong> (4<\/strong>). You can then set the size of the image and a few other parameters, and you’ll be able to save the static image to wherever you’d like.<\/p>\n\n\n\n

\"\"\/<\/a><\/figure>\n\n\n\n

<\/a>2. Option 2: Exporting an interactive version for the web<\/h2>\n\n\n\n

This option, alas, has a few more steps, but the result is interactive, zoomable, clickable, and has some other nice features. Here’s an example of one of these interactive network graphs<\/a>. In broad strokes, you’ll:<\/p>\n\n\n\n

  1. Export your network data from Cytoscape (in a special format called .cyjs);<\/li>
  2. Export the styling you’ve done to your network (in a special format called .json);<\/li>
  3. Upload the network data to the web;<\/li>
  4. Upload the style information to the web;<\/li>
  5. Enter the URLs to the network and style data to the CyNetShare service;<\/li>
  6. Click visualize!<\/li><\/ol>\n\n\n\n

    Here’s a hitch: We have to put our files on a server in order to hook them up to CyNetShare. There are a few different ways to do this. If you have access to a server that can host files, that’s probably easiest. For the purposes of this tutorial, though, I’m assuming you don’t<\/em> have access to a server, so I’ll show you how to use Github’s Gist<\/a> service to host your style file.<\/p>\n\n\n\n

    Hang in there. There are a lot of steps, but none of them is actually that complicated.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>3. Export your network data<\/h2>\n\n\n\n

    Let’s export our network data from Cytoscape. To do that, click on File<\/strong>, then Export<\/strong>, then Export Network and View<\/strong>. (Be sure you choose Network and View<\/strong>; exporting the network alone won’t work.)<\/p>\n\n\n\n

    For the export file format (1<\/strong>), select Cytoscape.js JSON (*.cyjs)<\/strong>. In the field labeled Save Network as<\/strong> (2<\/strong>), click Browse<\/strong> (3<\/strong>), give your file a name (4<\/strong>), and save it somewhere you’ll find it again later. Finally, click OK<\/strong>.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>4. Export your style (1)<\/h2>\n\n\n\n

    In the previous step, you exported information about your nodes and edges, but you didn’t export any information about the color, size, or layout of your network — which is to say, you’re missing style information.<\/p>\n\n\n\n

    Luckily, you can export that, too. There are a couple steps involved in this. First, assuming you’ve been modifying one of Cytoscape’s existing styles (that’s what we did in previous tutorials in this series), click on the downward-pointing arrow next to the name of the style, and then click Copy style<\/strong>. Give your new style a name (it’s easiest if you don’t use spaces). Then click OK<\/strong>.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>5. Export your style (2)<\/h2>\n\n\n\n

    Now we can export the style information we just copied. Click on File<\/strong>, then Export<\/strong>, and then Styles<\/strong>. Select the name of the style you created in the previous step. Now — this is important — for the export file format, select Style for cytoscape.js (*.json)<\/strong>.<\/p>\n\n\n\n

    Now, just as you did in Step 3, select Browse<\/strong>, give your style a name, and save it somewhere you’ll remember. Finally, click Save<\/strong>, and then OK<\/strong>.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>6. Create a Gist for your network data<\/h2>\n\n\n\n

    Now we have one file that contains our network data and one file that contains style information. We have to put both of these files on the internet somewhere so that the CyNetShare application, which will host our visualization, can access them. We’ll use Gist<\/a>, a service designed to allow people to share code quickly and easily.<\/p>\n\n\n\n

    In a web browser, go to gist.github.com<\/a>. Now just drag and drop the network file you saved in Step 4 onto the Add File<\/strong> box. It will automatically load. Now click on the Create public gist<\/strong> button.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>7. Get the URL for your network data<\/h2>\n\n\n\n

    We want the URL for the raw version of the network data — meaning the version that doesn’t contain all of the Github menus and toolbars — so click on the Raw<\/strong> button.<\/p>\n\n\n\n

    Now copy the URL for the raw version of your network data. Paste it in a blank document somewhere (or just leave the window open) so you’ll be able to find the URL again later.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>8. Create a Gist for your style information<\/h2>\n\n\n\n

    Now repeat Steps 6 and 7 with the style file you generated in Step 5. Be sure to click on the Raw<\/strong> button before you copy the URL.<\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>9. Enter the URLs on CyNetShare<\/h2>\n\n\n\n

    CyNetShare is a website that allows you to publish an interactive version of your network graph. Go to cynetshare.ucsd.edu.<\/a><\/p>\n\n\n\n

    In the Network Data URL<\/strong> box, copy and paste the URL to the raw version of the Gist you created to contain your network data.<\/p>\n\n\n\n

    In the Visual Style URL<\/strong> box, copy and paste the URL to the raw version of the Gist you created to contain your style information.<\/p>\n\n\n\n

    Now click Visualize!<\/strong><\/p>\n\n\n\n

    \"\"\/<\/a><\/figure>\n\n\n\n

    <\/a>10. Hopefully you have a network!<\/h2>\n\n\n\n

    Hopefully that worked! Ideally, you’ll be able to zoom into the network using the scroll wheel (or two fingers) and move the canvas around by clicking, holding for a moment, and dragging.<\/p>\n\n\n\n

    In practice, I’ve found that CyNetShare can be a bit buggy. Some things I’ve encountered:<\/p>\n\n\n\n

    1. You may have to select your style from the dropdown menu on the top left.<\/li>
    2. If you get a large “loading” image in the middle of your window that won’t go away, try clicking on the Share<\/strong> button on the right side of the browser window. (It looks like a white arrow on a red background.) Copy the URL that pops up, paste it in a new browser window, and load it. Often that makes the “loading” image go away. (Why? No idea.)<\/li><\/ol>\n\n\n\n

      Congrats, you’ve published your interactive network graph!<\/p>\n\n\n\n

      \"\"\/<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

      So far we’ve created a basic Cytoscape network, learned to work with node attributes, learned to select parts of a network, and learned how to convert a bimodal edge list into a unimodal edge… Continue reading Publish your Cytoscape graph<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":482,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-495","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/pages\/495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/comments?post=495"}],"version-history":[{"count":0,"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/pages\/495\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/pages\/482"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/classes\/dh201w23\/wp-json\/wp\/v2\/media?parent=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}