D3 Examples - SF Movies Beta

SF Movies Beta
A beta version of a Data Mining Project using Data on the locations of movies Shot in San Francisco from https://data.sfgov.org I have used Pyhton Pandas to clean and wrangle the data files, and the Google geocoding service to convert raw addresses to lat, lon. I use d3.js to plot a map of sf and the movie locations. Then I have used the RottenTomatoes api to pull up the poster of the movies (improvements required here) and I show a Google map StreetView upon mouseover on a movie location. This is work in progress ...
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
#body
{
/*background:url('gray.jpg');*/
}
#tip {
    display:none;
    pointer-events: none;
    position: absolute;
    /*background: url('gray.png');*/
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 10px 10px 7px;
    color: white;
    z-index: 1337;
    width: 300px;
 /*   text-align: left;*/
}
​
#tip .zip {
    margin-left: 5px;
    font-size: 20px;
    line-height: 22px;
}
​
#tip .ziphead {
    margin-left: 5px;
    font-size: 20px;
    font-family: Arial, Verdana, sans-serif;
    color:palegreen;
    line-height: 22px;
}
​
#tip .zipdir {
    margin-left: 5px;
    font-size: 15 px;
    line-height: 16px;
}
​
#tip .zipactors {
    margin-left: 5px;
    font-size: 15px;
    font-style: italic;
    line-height: 18px;
}
​
​
#tip .ziprating {
    color: tomato;
    margin-left: 5px;
    font-size: 15px;
    line-height: 18px;
}
#tip img{
    float:left;
    width: 130px;
    margin-right: 10px;
}
​
#lpic {
    display: none;
    pointer-events: none;
    position: absolute;
    /*background: url('gray.png');*/
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 10px 10px 7px;
    color: white;
    z-index: 1337;
    width: 280px;
    text-align: left;
}
​
#lpic .hoods {
    margin-bottom: 10px;
    font-style: italic;
    margin-left: 10px;
}
​
#lpic img {
    width: 280px;
}
​
</style>
<body background='gray.png'>
    <div id="tip">
                <p class="zip"> <img src = 'blah.png'/> </p> <p class='ziphead'> 94103 
                 </p>
                 <p class= 'zipactors'> njnjndj </p>
                 <p class = 'ziprating'> nnn </p>
                
            </div>
    <div id = "lpic">
        <p class="hoods">SoMa, Mission, Potrero Hill, and others</p>
        <img src = 'gray.png' class= "image"/> 
    </div>
 <!script src="https://d3js.org/d3.v2.min.js?2.10.0"><!/script>
 <script type="text/javascript" src="https://d3js.org//d3.v3.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
​
    var width = 960,
    height = 600,
    scale = 270000,
    latitude = 37.7750,
    longitude = -122.4183;
​
​
    var svg = d3.select("body").insert("svg:svg", "h2")
    .attr("width", width)
    .attr("height", height);
​
    var hoods = svg.append("svg:g")
    .attr("id", "hoods");
​
    var circles = svg.append("svg:g")
    .attr("id", "circles");
    
​
​
​
    var xym = d3.geo.albers()
    .scale(scale) 
    .rotate([-longitude, 0]) 
    .center([0, latitude])  
    //.parallels([24.6, 43.6]);
​
    var path = d3.geo.path().projection(xym);
​
    // xym.origin([134, 25])
    // xym.translate([350, 745])
    // xym
    // xym.scale(1980)
    // translate([width / 2, height / 2]) 
    //   .scale(scale) 
    //   .rotate([-longitude, 0]) 
    //   .center([0, latitude]);
   
   
​
    //d3.json("zctas_sanfrancisco.json", function(data) {
    d3.json("SFN.geojson", function(data) {
        hoods.selectAll("path").data(data.features)
        .enter().append("svg:path")
        .attr("d", path)
        .style("fill", function() { return "teal" })
        .on("mouseover", function(e){d3.select(this).style("fill", "gray")})
        .on("mouseout", function(e){d3.select(this).style("fill", "teal")})
        .attr("stroke","white")
        .attr("stroke-width", 1)
      });
​
    var xy = xym([longitude,latitude])
    console.log(xy)
    hoods.append('text')
                .attr('x', 960)
                .attr('y', 30)
                .text('Movies and San Francisco')
                .attr('fill','tomato')
                .attr('font-family','sans-serif')
                .attr('font-size',32)
                .transition().duration(1000)
                .attr('x',10);
​
    var positions = []
    var form_add = []
    var title = []
    var lonlat = []
​
    //var mData
​
    var tip = d3.select('#tip')
    var lpic = d3.select('#lpic')
​
    d3.csv("sfmovies.csv", function(loadedRows) {
        //var positions = [];
            //mData = loadedRows;     
     loadedRows.forEach(function(row){
            //console.log(row)
            row.lat =   parseFloat(row.lat)
            row.lon = parseFloat(row.lon)
            //console.log(row.lon)
            positions.push(xym([row.lon,row.lat]));
            form_add.push(row.form_add)
            title.push(row.Title)
            lonlat.push([row.lon,row.lat])
            //console.log(row.form_add);
            
            //
            })
     //title[0] = 'Dirty Harry';
     
     console.log(title);
        
​
    circles.selectAll("cicle")
        .data(positions)
        .enter().append("svg:circle")
        .attr("cx", function(d,i){return positions[i][0];})
        //.transition().duration(10000).attr("cx", function(d,i){return positions[i][0];})
        .attr("cy", function(d,i) {return positions [i][1];})
        //.transition().duration(1000).attr("cy", function(d,i){return positions[i][1];})
        .attr("r",2.5)
        .attr("stroke","black")
        .style("fill", "orange")
        .attr("id", function(d,i) {return title[i];})
        .on("mouseover",function(d,i){
                d3.select(this).style("fill"," lawngreen")
                                    .transition(100).attr('r',10)
                //d3.select(circles).circle.style('fill','lawngreen')
                cy = this.cy.baseVal.value;
                   console.log(form_add[i]);
                tip.style('display','block')
                    .style('left', 650 + 'px')
                    .style('top', 30 + 'px')
                    //.select(".hoods").text(form_add[i])  //form_add[i];})
                    //.select("#tip .zip").text(function(){return 'Vertigo';})
                    //.select('img').attr("src",'https://imgc.allpostersimages.com/images/P-473-488-90/56/5667/H35UG00Z/posters/dirty-harry-italian-style.jpg')
                    
                //tip.select(".hoods").text(form_add[i]);
                $.getJSON("https://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=9gfm9nggrw4t9sj29uqyfcet"
                    +"&q=" + encodeURI(title[i])+"&callback=?", function(json) {
                       console.log(json.movies[0])
                       //tip.select(".zip").text('<img src ='+ json.movies[0].posters.profile+ '/>'+title[i]);
                       tip.select(".zip img").attr("src", json.movies[0].posters.profile);
                       tip.select(".ziphead").html(title[i] + "</br> <hr>")
                       tip.select(".zipactors").text(json.movies[0].abridged_cast[0].name
                        +', '+  json.movies[0].abridged_cast[1].name + ', '+
                         json.movies[0].abridged_cast[2].name )
                       tip.select(".ziprating").text(json.movies[0].ratings.critics_score + '% '+ 
                        json.movies[0].ratings.critics_rating)
                       /*tip.select(".ziptext").html(title[i] + "</br> <hr>"+ 
                        json.movies[0].abridged_cast[0].name
                        +', '+  json.movies[0].abridged_cast[1].name
                        + "</br>" + json.movies[0].ratings.critics_score+  "% "
                        + "<img src ="+json.movies[0].ratings.critics_rating+".png height = 20px width=20px/>") */
                    
                    lpic.style('display','block')
                    .style('left', 650 + 'px')
                    .style('top', 275 + 'px')
                    .select('img').attr("src", "https://maps.googleapis.com/maps/api/streetview?size=640x300&location="+lonlat[i][1]
                        +","+lonlat[i][0]+"&sensor=false&heading=50&fov=120");
                    lpic.select(".hoods").text(form_add[i]);
                });
                circles.selectAll("circle")
                     .style("fill", function(){
                        if(this.id == title[i])
                            //this.parentNode.appendChild(this);
                            return "red";
                        else 
                             return "orange" ;
                    })
                     .transition(100).attr("r", function(){
                        if(this.id == title[i]) 
                            return 10
                        else
                            return 2.5;
                    })
                    .transition(100).attr(
                        "r",function(){
                            if(this.id == title[i])
                         return 4.5;
                        else 
                         return 2.5;});
                    //.sort(this.id == title[i]);
                    //.parentNode.appendChild(this);
                    //element.parentNode.appendChild(element)
                    // circles.selectAll("circle .vertigo").style("fill","lawngreen");
            })
        .on("mouseout",function(){
            d3.select(this).style("fill","red").transition(100).attr('r',4.5)
            tip.style('display', 'none');
            lpic.style('display', 'none');
           // circles.selectAll('circle').transition(100).attr("r",3);
            });
​
       /* circles.selectAll("circle")
        .style("fill", function(){
            if(this.id == 'vertigo')
             return "orange" 
            else 
             return "black" ;
        });*/
​
        var film = "Vertigo";
        console.log(film);
        //$.getJSON("https://api.themoviedb.org/3/Movie.search/en/json/a10ba46be51e867f47557ee65a295cdb/" + film + "?callback=?", function(json) {
        //console.log(json);
       // $.getJSON("https://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=9gfm9nggrw4t9sj29uqyfcet"
       //     +"&q=" + encodeURI(film)+"&callback=?", function(json) {
       //         console.log(json.movies[0].posters)
       //                 });
    });
  </script>
    