#NEWLINE# def visualize( self , complex , path_html = 'mapper_visualization_output.html' , title = 'My Data' , graph_link_distance = 30 , graph_gravity = 0.1 , graph_charge = ( - 120 ) , custom_tooltips = None , width_html = 0 , height_html = 0 , show_tooltips = True , show_title = True , show_meta = True ) : #NEWLINE# #INDENT# json_s = { #NEWLINE# #INDENT# #NEWLINE# #UNINDENT# } #NEWLINE# json_s [ 'nodes' ] = [ ] #NEWLINE# json_s [ 'links' ] = [ ] #NEWLINE# k2e = { #NEWLINE# #INDENT# #NEWLINE# #UNINDENT# } #NEWLINE# for ( e , k ) in enumerate ( complex [ 'nodes' ] ) : #NEWLINE# #INDENT# if ( custom_tooltips != None ) : #NEWLINE# #INDENT# tooltip_s = ( ( '<h2>Cluster %s</h2>' % k ) + ' ' . join ( [ str ( f ) for f in custom_tooltips [ complex [ 'nodes' ] [ k ] ] ] ) ) #NEWLINE# if ( self . color_function == 'average_signal_cluster' ) : #NEWLINE# #INDENT# tooltip_i = int ( ( ( sum ( [ f for f in tooltip_s [ complex [ 'nodes' ] [ k ] ] ] ) / len ( custom_tooltips [ complex [ 'nodes' ] [ k ] ] ) ) * 30 ) ) #NEWLINE# json_s [ 'nodes' ] . append ( { #NEWLINE# #INDENT# 'name' : str ( k ) , #NEWLINE# 'tooltip' : tooltip_s , #NEWLINE# 'group' : ( 2 * int ( np . log ( len ( complex [ 'nodes' ] [ k ] ) ) ) ) , #NEWLINE# 'color' : str ( tooltip_i ) , #NEWLINE# #UNINDENT# } ) #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# json_s [ 'nodes' ] . append ( { #NEWLINE# #INDENT# 'name' : str ( k ) , #NEWLINE# 'tooltip' : tooltip_s , #NEWLINE# 'group' : ( 2 * int ( np . log ( len ( complex [ 'nodes' ] [ k ] ) ) ) ) , #NEWLINE# 'color' : str ( k . split ( '_' ) [ 0 ] ) , #NEWLINE# #UNINDENT# } ) #NEWLINE# #UNINDENT# #UNINDENT# else : #NEWLINE# #INDENT# tooltip_s = ( '<h2>Cluster %s</h2>Contains %s members.' % ( k , len ( complex [ 'nodes' ] [ k ] ) ) ) #NEWLINE# json_s [ 'nodes' ] . append ( { #NEWLINE# #INDENT# 'name' : str ( k ) , #NEWLINE# 'tooltip' : tooltip_s , #NEWLINE# 'group' : ( 2 * int ( np . log ( len ( complex [ 'nodes' ] [ k ] ) ) ) ) , #NEWLINE# 'color' : str ( k . split ( '_' ) [ 0 ] ) , #NEWLINE# #UNINDENT# } ) #NEWLINE# #UNINDENT# k2e [ k ] = e #NEWLINE# #UNINDENT# for k in complex [ 'links' ] : #NEWLINE# #INDENT# for link in complex [ 'links' ] [ k ] : #NEWLINE# #INDENT# json_s [ 'links' ] . append ( { #NEWLINE# #INDENT# 'source' : k2e [ k ] , #NEWLINE# 'target' : k2e [ link ] , #NEWLINE# 'value' : 1 , #NEWLINE# #UNINDENT# } ) #NEWLINE# #UNINDENT# #UNINDENT# if ( width_html == 0 ) : #NEWLINE# #INDENT# width_css = '100%' #NEWLINE# width_js = 'document.getElementById("holder").offsetWidth-20' #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# width_css = ( '%spx' % width_html ) #NEWLINE# width_js = ( '%s' % width_html ) #NEWLINE# #UNINDENT# if ( height_html == 0 ) : #NEWLINE# #INDENT# height_css = '100%' #NEWLINE# height_js = 'document.getElementById("holder").offsetHeight-20' #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# height_css = ( '%spx' % height_html ) #NEWLINE# height_js = ( '%s' % height_html ) #NEWLINE# #UNINDENT# if ( show_tooltips == False ) : #NEWLINE# #INDENT# tooltips_display = 'display: none;' #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# tooltips_display = '' #NEWLINE# #UNINDENT# if ( show_meta == False ) : #NEWLINE# #INDENT# meta_display = 'display: none;' #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# meta_display = '' #NEWLINE# #UNINDENT# if ( show_title == False ) : #NEWLINE# #INDENT# title_display = 'display: none;' #NEWLINE# #UNINDENT# else : #NEWLINE# #INDENT# title_display = '' #NEWLINE# #UNINDENT# with open ( path_html , 'wb' ) as outfile : #NEWLINE# #INDENT# html = ( '<!DOCTYPE html>\n    <meta charset="utf-8">\n    <meta name="generator" content="KeplerMapper">\n    <title>%s | KeplerMapper</title>\n    <link href=\'https://fonts.googleapis.com/css?family=Roboto:700,300\' rel=\'stylesheet\' type=\'text/css\'>\n    <style>\n    * {margin: 0; padding: 0;}\n    html { height: 100%%;}\n    body {background: #111; height: 100%%; font: 100 16px Roboto, Sans-serif;}\n    .link { stroke: #999; stroke-opacity: .333;  }\n    .divs div { border-radius: 50%%; background: red; position: absolute; }\n    .divs { position: absolute; top: 0; left: 0; }\n    #holder { position: relative; width: %s; height: %s; background: #111; display: block;}\n    h1 { %s padding: 20px; color: #fafafa; text-shadow: 0px 1px #000,0px -1px #000; position: absolute; font: 300 30px Roboto, Sans-serif;}\n    h2 { text-shadow: 0px 1px #000,0px -1px #000; font: 700 16px Roboto, Sans-serif;}\n    .meta {  position: absolute; opacity: 0.9; width: 220px; top: 80px; left: 20px; display: block; %s background: #000; line-height: 25px; color: #fafafa; border: 20px solid #000; font: 100 16px Roboto, Sans-serif;}\n    div.tooltip { position: absolute; width: 380px; display: block; %s padding: 20px; background: #000; border: 0px; border-radius: 3px; pointer-events: none; z-index: 999; color: #FAFAFA;}\n    }\n    </style>\n    <body>\n    <div id="holder">\n      <h1>%s</h1>\n      <p class="meta">\n      <b>Lens</b><br>%s<br><br>\n      <b>Cubes per dimension</b><br>%s<br><br>\n      <b>Overlap percentage</b><br>%s%%<br><br>\n      <!-- <b>Linking locally</b><br>%s<br><br> -->\n      <b>Color Function</b><br>%s( %s )<br><br>\n      <b>Clusterer</b><br>%s<br><br>\n      <b>Scaler</b><br>%s\n      </p>\n    </div>\n    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>\n    <script>\n    var width = %s,\n      height = %s;\n\n    var color = d3.scale.ordinal()\n      .domain(["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"])\n      .range(["#FF0000","#FF1400","#FF2800","#FF3c00","#FF5000","#FF6400","#FF7800","#FF8c00","#FFa000","#FFb400","#FFc800","#FFdc00","#FFf000","#fdff00","#b0ff00","#65ff00","#17ff00","#00ff36","#00ff83","#00ffd0","#00e4ff","#00c4ff","#00a4ff","#00a4ff","#0084ff","#0064ff","#0044ff","#0022ff","#0002ff","#0100ff","#0300ff","#0500ff"]);\n\n    var force = d3.layout.force()\n      .charge(%s)\n      .linkDistance(%s)\n      .gravity(%s)\n      .size([width, height]);\n\n    var svg = d3.select("#holder").append("svg")\n      .attr("width", width)\n      .attr("height", height);\n    \n    var div = d3.select("#holder").append("div")   \n      .attr("class", "tooltip")               \n      .style("opacity", 0.0);\n    \n    var divs = d3.select(\'#holder\').append(\'div\')\n      .attr(\'class\', \'divs\')\n      .attr(\'style\', function(d) { return \'overflow: hidden; width: \' + width + \'px; height: \' + height + \'px;\'; });  \n    \n      graph = %s;\n\n      force\n        .nodes(graph.nodes)\n        .links(graph.links)\n        .start();\n\n      var link = svg.selectAll(".link")\n        .data(graph.links)\n        .enter().append("line")\n        .attr("class", "link")\n        .style("stroke-width", function(d) { return Math.sqrt(d.value); });\n\n      var node = divs.selectAll(\'div\')\n      .data(graph.nodes)\n        .enter().append(\'div\')\n        .on("mouseover", function(d) {      \n          div.transition()        \n            .duration(200)      \n            .style("opacity", .9);\n          div .html(d.tooltip + "<br/>")  \n            .style("left", (d3.event.pageX + 100) + "px")     \n            .style("top", (d3.event.pageY - 28) + "px");    \n          })                  \n        .on("mouseout", function(d) {       \n          div.transition()        \n            .duration(500)      \n            .style("opacity", 0);   \n        })\n        .call(force.drag);\n      \n      node.append("title")\n        .text(function(d) { return d.name; });\n\n      force.on("tick", function() {\n      link.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.attr("cx", function(d) { return d.x; })\n        .attr("cy", function(d) { return d.y; })\n        .attr(\'style\', function(d) { return \'width: \' + (d.group * 2) + \'px; height: \' + (d.group * 2) + \'px; \' + \'left: \'+(d.x-(d.group))+\'px; \' + \'top: \'+(d.y-(d.group))+\'px; background: \'+color(d.color)+\'; box-shadow: 0px 0px 3px #111; box-shadow: 0px 0px 33px \'+color(d.color)+\', inset 0px 0px 5px rgba(0, 0, 0, 0.2);\'})\n        ;\n      });\n    </script>' % ( title , width_css , height_css , title_display , meta_display , tooltips_display , title , complex [ 'meta' ] , self . nr_cubes , ( self . overlap_perc * 100 ) , self . link_local , self . color_function , complex [ 'meta' ] , str ( self . clf ) , str ( self . scaler ) , width_js , height_js , graph_charge , graph_link_distance , graph_gravity , json . dumps ( json_s ) ) ) #NEWLINE# outfile . write ( html . encode ( 'utf-8' ) ) #NEWLINE# #UNINDENT# if ( self . verbose > 0 ) : #NEWLINE# #INDENT# print ( ( "\nWrote d3.js graph to '%s'" % path_html ) )