Initiation à la programmation ENSAE 1A

seance9_d3js.tex

récupération des données velib pour ce TD


from pyensae import download_data
import pandas

download_data("td9_data.zip", website = 'xd')
file1 = "td9_full.txt"
tbl = pandas.read_csv (file1, sep = "\t")

premier graphe


import pylab
from pandas.tools.plotting import scatter_plot

gr = tbl.groupby(['lat','lng'], as_index = False).agg(lambda x: len(x))
scatter_plot(gr, "lat", "lng" )
pylab.show()

fichier osm_essai.html


<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    var proj =  new OpenLayers.Projection("EPSG:4326");
 
    var zoom=16;
 
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
 
    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 ).transform(proj, map.getProjectionObject() );
    markers.addMarker(new OpenLayers.Marker(lonLat));

    var lonLat2 = new OpenLayers.LonLat( -0.1279688 ,51.5067286 ).transform(proj, map.getProjectionObject() );
    markers.addMarker(new OpenLayers.Marker(lonLat2));
 
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

fichier osm_essai.html


# ... ajouter des choses ici
lines = [ ]
for i,row in enumerate(gr.values) :
    y = lat = row[1]
    x = lng = row[0]
    # utiliser i,x,y pour construire la ligne de javascript correspondant à la station i
    lines.append(line)
    
text = "\n".join( lines )
html = html.replace("__VELIB__", text)
with open("velib.html", "w") as f : f.write(html)

lancer directement le navigateur


import webbrowser
webbrowser.open(<url>)

File: seance9_d3js.tex, line 134


agatha,frank
agatha,toni
alice,andrew
alice,april
alice,bette
...

File: seance9_d3js.tex, line 145


var links = [
  {source: "Microsoft", target: "Amazon", type: "licensing"},
  {source: "Microsoft", target: "HTC", type: "licensing"},
  {source: "Samsung", target: "Apple", type: "suit"},
	// ...
	] ;

conversion des données d'un fichier texte au javascript

with open("td9_graph_lworld.txt", "r") as f :
    lines = f.readlines()
    
links =[]
for line in lines :
    spl = line.strip("\n\r ").split(",")
    if len(spl) == 2 :
        l = { "source":spl[0],"target":spl[1],"type":"-"}
        links.append(l)
        l = { "source":spl[1],"target":spl[0],"type":"-"}
        links.append(l)
        
with open("td9_graph_lworld.js", "w") as f :
    f.write ("var links = [\n")
    for l in links :
        f.write("{")
        f.write( ",".join ( [ "{0}:'{1}'".format (k,v) for k,v in l.items() ] ) )
        f.write("},\n")
    f.write("\n];\n")
    

lancer directement le navigateur


import pyensae
pyensae.download_data("td9_graph_lworld.zip", website = 'xd') 

astuce pour modifier le texte et sa taille


// bien placé, le code suivant modifie le texte affiché et sa taille
d3.select(this)
	.select("text")
			.style("font-size", "10px")
			.text(function(d,i){return d.name + "**" ;});