<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 A 3D graph representing the network of coappearances of characters in Victor Hugo's novel Les Miserables ##
We define our graph as an igraph.Graph object. Python igraph
is a library for high-performance graph generation  and analysis.
Step1:  Read graph data from a json file
Step2:  Get the number of nodes
Step3:  Define the list of edges
Step4:  Define the Graph object from Edges
Step5:  Extract the node attributes, 'group', and 'name'
Step6:  Get the node positions, set by the Kamada-Kawai layout for 3D graphs
Step7:  layt is a list of three elements lists (the coordinates of nodes)
Step8:  Set data for the Plotly plot of the graph
Step9:  <div>
    <a href="https
<ASSISTANT_TASK:>
Python Code:
import igraph as ig
Explanation: A 3D graph representing the network of coappearances of characters in Victor Hugo's novel Les Miserables ##
We define our graph as an igraph.Graph object. Python igraph
is a library for high-performance graph generation  and analysis.
End of explanation
import json
data = []
with open('miserables.json') as f: 
    for line in f:
        data.append(json.loads(line))        
data=data[0]
data
print data.keys()
Explanation: Read graph data from a json file:
End of explanation
N=len(data['nodes'])
N
Explanation: Get the number of nodes:
End of explanation
L=len(data['links'])
Edges=[(data['links'][k]['source'], data['links'][k]['target']) for k in range(L)]
Explanation: Define the list of edges:
End of explanation
G=ig.Graph(Edges, directed=False)
Explanation: Define the Graph object from Edges:
End of explanation
data['nodes'][0]
labels=[]
group=[]
for node in data['nodes']:
    labels.append(node['name'])
    group.append(node['group'])
Explanation: Extract the node attributes, 'group', and 'name':
End of explanation
layt=G.layout('kk', dim=3) 
Explanation: Get the node positions, set by the Kamada-Kawai layout for 3D graphs:
End of explanation
layt[5]
Explanation: layt is a list of three elements lists (the coordinates of nodes):
End of explanation
Xn=[layt[k][0] for k in range(N)]# x-coordinates of nodes
Yn=[layt[k][1] for k in range(N)]# y-coordinates
Zn=[layt[k][2] for k in range(N)]# z-coordinates
Xe=[]
Ye=[]
Ze=[]
for e in Edges:
    Xe+=[layt[e[0]][0],layt[e[1]][0], None]# x-coordinates of edge ends
    Ye+=[layt[e[0]][1],layt[e[1]][1], None]  
    Ze+=[layt[e[0]][2],layt[e[1]][2], None]  
import plotly.plotly as py
from plotly.graph_objs import *
trace1=Scatter3d(x=Xe,
               y=Ye,
               z=Ze,
               mode='lines',
               line=Line(color='rgb(125,125,125)', width=1),
               hoverinfo='none'
               )
trace2=Scatter3d(x=Xn,
               y=Yn,
               z=Zn,  
               mode='markers',
               name='actors',
               marker=Marker(symbol='dot',
                             size=6, 
                             color=group, 
                             colorscale='Viridis',
                             line=Line(color='rgb(50,50,50)', width=0.5)
                             ),
               text=labels,
               hoverinfo='text'
               )
axis=dict(showbackground=False,
          showline=False,  
          zeroline=False,
          showgrid=False,
          showticklabels=False,
          title='' 
          )
layout = Layout(
         title="Network of coappearances of characters in Victor Hugo's novel<br> Les Miserables (3D visualization)", 
         width=1000,
         height=1000,
         showlegend=False,
         scene=Scene(  
         xaxis=XAxis(axis),
         yaxis=YAxis(axis), 
         zaxis=ZAxis(axis), 
        ),
     margin=Margin(
        t=100
    ),
    hovermode='closest',
    annotations=Annotations([
           Annotation(
           showarrow=False, 
            text="Data source: <a href='http://bost.ocks.org/mike/miserables/miserables.json'>[1]</a>",
            xref='paper',     
            yref='paper',     
            x=0,  
            y=0.1,  
            xanchor='left',   
            yanchor='bottom',  
            font=Font(
            size=14 
            )     
            )
        ]),    )
data=Data([trace1, trace2])
py.sign_in('empet', 'jkxft90od0')
fig=Figure(data=data, layout=layout)
py.plot(fig, filename='Les-Miserables')
Explanation: Set data for the Plotly plot of the graph:
End of explanation
from IPython.core.display import HTML
def  css_styling():
    styles = open("./custom.css", "r").read()
    return HTML(styles)
css_styling()
Explanation: <div>
    <a href="https://plot.ly/~empet/9059/" target="_blank" title="Network of coappearances of characters in Victor Hugo&#39;s novel&lt;br&gt; Les Miserables (3D visualization)" style="display: block; text-align: center;"><img src="https://plot.ly/~empet/9059.png" alt="Network of coappearances of characters in Victor Hugo&#39;s novel&lt;br&gt; Les Miserables (3D visualization)" style="max-width: 100%;width: 1000px;"  width="1000" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="empet:9059"  src="https://plot.ly/embed.js" async></script>
</div>
End of explanation
<END_TASK>