I am still pretty new to working with D3, Polymaps, and with data overall. I have been working on using d3 and polymaps to display location and size of solar power stations across the country. Each circle on the map corresponds to a specific long/lat, and the size in acres of each power plant (pulled from the json file).
I have two problems (also, I have looked at documentation and tutorials for creating tooltips, and for setting the scale of the circles).
- The size of the circles remains the same despite the zoom level
- I would like the text labels to show up as a tooltip when each circle is hovered over or clicked. (currently hovering over any circle reveals ALL the text for each location)
Here is a link to the visualization in its current state http://www.tijaniogunlende.com/dataviz/index.html
These are the tutorials/code I attempted to incorporate (with little success) Simple Tooltip,Tooltip with Jquery Tipsy, SVG Geometric Zooming, and K-means Clustering
They all seem fairly straightforward until I try to implement them in my code. I have a basic understanding of D3 and polymaps but I have to admit I've hit a wall with this one.
Any HELP/GUIDANCE would greatly be appreciated.
HERE'S MY CODE:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="d3-master/d3.js"></script>
<script type="text/javascript" src="polymaps/polymaps.js"></script>
<script type="text/javascript" src="js/kmeans.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<style type="text/css">@import url("http://polymaps.org/style.css");</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--Content here -->
<section id="all-content">
<h1>US Solar Power Plant Locations</h1>
<p>How are US companies taking advantage of solar Resources? - By building Larger Solar Plants in areas that recieve the most Energy from the sun.<br /> Starting from 1990 to 2025 there has been an increase in the number both planned and completed of solar power plants and their relative size to one another.<br />
Typically the more sun an area gets there is a tendency for Larger Solar Power Plants</p>
<span class="future">*To be displayed on a time-scale. Also names of each power plant will be added later.</span>
<article id="map-instructions">Zoom into the map to get an idea of each solar power plants relative size in Acres</article>
<div id="map"></div>
</section>
<!--Polymaps Build-->
<script type="text/javascript">
var po = org.polymaps;
//Create map object and add to #map
var map = po.map()
.container(d3.select("#map").append("svg:svg").node())
.zoom(4)
.zoomRange([4, 8])
.center({lon: -98.5795, lat: 39.828175})
.add(po.interact());
//Add Image tiles as base
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
//Adding NREL Solar Resource Data as an Overlay
//For adding geoJson files
// Add the compass control on top.
map.add(po.compass()
.pan("none"));
//Load solaruse.json file
d3.json("solaruse.json", function(data){
//Beneath the compas layer
var layer = d3.select("#map svg").insert("svg:g", ".compass");
//insert an svg element for each Solar Array Station
var marker = layer.selectAll("g")
.data(d3.entries(data))
.enter().append("svg:g")
.attr("transform", transform);
var radius = d3.scale.sqrt()
.domain([0, 70])
.range([7, 13]);
//Circle
var circle = marker.append("svg:circle")
//Set attribute value based on Size of each solar plant (Works FIne, Need to fix the scale.)
.attr("r", function(d) { return radius(d.value[4]); });
//Label each on hover (double check)
marker.append("svg:text")
.attr("x", 20)
.attr("dy", ".3em")
.attr("visibility", "hidden")
.text(function(d) { return d.value[1]; }); //*Problems loading the text here, fix the function*
//update marker positions when the map is moved
marker.on("mouseover", function() { layer.selectAll("text").attr("visibility", "visible");
});
map.on("move", function() {
layer.selectAll("g").attr("transform", transform);
});
function transform(d) {
d = map.locationPoint({lon: d.value[5], lat: d.value[6]});
return "translate(" + d.x + "," + d.y + ")";
}
});
</script>
<!--Graphs-->
<div class="chart"></div>
<!--End Graphs-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>-->
<!-- D3 -->
</body>
