Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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="tooltip" >
- <p><strong>The store name is:</strong></p>
- <p><span id="value"></span></p>
- </div>
- <div id="map"></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(this)
- .style('fill','red')
- d3.select("#tooltip")
- .style("left", xPosition + "px")
- .style("top", yPosition + "px")
- .select("#value")
- .text(d.name);
- d3.select("#tooltip").classed("hidden", false);
- })
- .on("mouseout", function() {
- //Hide the tooltip
- d3.select(this)
- .style('fill','blue')
- d3.select("#tooltip").classed("hidden", true);
- });
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement