sudeepdas · December 14, 2015 23:39
diff --git a/README.md b/README.md
diff --git a/gray.png b/gray.png
diff --git a/index.html b/index.html
 <!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="http://d3js.org/d3.v2.min.js?2.10.0"><!/script>
 <script type="text/javascript" src="http://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",'http://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("http://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", "http://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("http://api.themoviedb.org/3/Movie.search/en/json/a10ba46be51e867f47557ee65a295cdb/" + film + "?callback=?", function(json) {
        //console.log(json);
       // $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=9gfm9nggrw4t9sj29uqyfcet"
       //     +"&q=" + encodeURI(film)+"&callback=?", function(json) {
       //         console.log(json.movies[0].posters)
       //                 });
    });
  </script>
diff --git a/sfmovies.csv b/sfmovies.csv
diff --git a/SFN.geojson b/SFN.geojson
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/zctas_sanfrancisco.json b/zctas_sanfrancisco.json
	<!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="http://d3js.org/d3.v2.min.js?2.10.0"><!/script>
	<script type="text/javascript" src="http://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",'http://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("http://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", "http://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("http://api.themoviedb.org/3/Movie.search/en/json/a10ba46be51e867f47557ee65a295cdb/" + film + "?callback=?", function(json) {
	//console.log(json);
	// $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=9gfm9nggrw4t9sj29uqyfcet"
	// +"&q=" + encodeURI(film)+"&callback=?", function(json) {
	// console.log(json.movies[0].posters)
	// });
	});
	</script>