Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Final Map</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .boundary {
            fill: none;
            stroke: #dfdfdf;
            stroke-linejoin: round;
        }
        #map {
            text-align: center;
        }
        circle {
            fill: blue;
            opacity:.9;
        }
        text{
            font-family: 'PT Sans', sans-serif;
            font-weight: 300;
            font-size: 12px;
            z-index: 900;
        }
        #tooltip {
            position: absolute;
            width: 200px;
            height: auto;
            padding: 10px;
            background-color: #ff9436;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }
        #tooltip.hidden {
            display: none;
        }
        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="tooltip" class="hidden">
    <p><strong>The store name is:</strong></p>
    <p><span id="value"></span></p>
</div>

<script>
    var height = 600;
    var width = 900, centered;

    var projection = d3.geo.albersUsa()
            .scale(1200)
            .translate([width/2, height/2]);
    var path = d3.geo.path().projection(projection);

    var svg = d3.select("#map")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

    var g = svg.append("g");

    d3.json('us.json', function(us) {
        console.log("usa", us);

        var map = svg.append('g').attr('class', 'boundary');
        usa = map.selectAll('path')
                .data(topojson.feature(us, us.objects.states).features);

        usa.enter()
                .append('path')
                .attr('d', path)
                .attr('fill', 'gray');


        d3.json('newstorelocations.json', function (locations){
            console.log('stores', locations);

            svg.selectAll('circle')
                    .data(locations)
                    .enter()
                    .append('circle')
                    .attr('cx', function(d) {return projection([d.lon, d.lat])[0]})
                    .attr('cy', function(d) {return projection([d.lon, d.lat])[1]})
                    .attr('r', 4)
                    .on("mouseover", function(d) {
                        console.log("binish", d);

                        var xPosition = (d3.select(this).attr('x', function(d) {return projection([d.lon, d.lat])[0]}));
                        var yPosition = (d3.select(this).attr('y', function(d) {return projection([d.lon, d.lat])[1]}));

                        d3.select("#tooltip")
                                .style("left", xPosition + "px")
                                .style("top", yPosition + "px")
                                .select("#value")
                                .text(function(d) {return d.name});

                        d3.select("#tooltip").classed("hidden", false);

                    })
                    .on("mouseout", function() {

                        //Hide the tooltip
                        d3.select("#tooltip").classed("hidden", true);

                    });
        });
    });
</script>
</body>
</html>