29 |
32 |
33 | 
35 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/examples/popover/index.js:
--------------------------------------------------------------------------------
1 | var graphic;
2 |
3 | graphic = new Object;
4 |
5 | graphic.create = function() {
6 | var g, height, i, j, points, size, spacing, width, _i, _j, _len, _len2, _ref, _ref2;
7 | width = $(document).width() / 2;
8 | height = $(document).height() * .85;
9 | size = d3.min([width, height]);
10 | graphic.svg = d3.select("#graphic").append("svg").attr("width", size).attr("height", size);
11 | g = graphic.svg.append("g");
12 | points = [];
13 | spacing = 30;
14 | _ref = d3.range(0, height - spacing, spacing);
15 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
16 | i = _ref[_i];
17 | _ref2 = d3.range(0, width - spacing, spacing);
18 | for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
19 | j = _ref2[_j];
20 | points.push({
21 | x: i,
22 | y: j
23 | });
24 | }
25 | }
26 | return g.selectAll("circle").data(points).enter().append("circle").attr("cx", function(d, i) {
27 | return d.x;
28 | }).attr("cy", function(d, i) {
29 | return d.y;
30 | }).attr("r", function(d, i) {
31 | return Math.round(Math.random() * spacing / 2 + 1);
32 | }).popover(function(d, i) {
33 | var r, svg;
34 | r = +d3.select(this).attr('r');
35 | svg = d3.select(document.createElement("svg")).attr("height", 50);
36 | g = svg.append("g");
37 | g.append("rect").attr("width", r * 10).attr("height", 10);
38 | g.append("text").text("10 times the radius of the cirlce").attr("dy", "25");
39 | return {
40 | title: "It's a me, Rectangle",
41 | content: svg,
42 | detection: "shape",
43 | placement: "fixed",
44 | gravity: "right",
45 | position: [d.x, d.y],
46 | displacement: [r + 2, -72],
47 | mousemove: false
48 | };
49 | });
50 | };
51 |
52 | $(document).ready(graphic.create);
53 |
--------------------------------------------------------------------------------
/examples/tooltip/index.coffee:
--------------------------------------------------------------------------------
1 | graphic = new Object
2 |
3 | graphic.create = ()->
4 | width = $(document).width()/2
5 | height = $(document).height()*.85
6 | size = d3.min([width,height])
7 | graphic.svg = d3.select("#graphic")
8 | .append("svg")
9 | .attr("width",size)
10 | .attr("height",size)
11 |
12 | g = graphic.svg.append("g")
13 |
14 | points = []
15 | spacing = 30
16 | for i in d3.range(0,height-spacing,spacing)
17 | for j in d3.range(0,width-spacing,spacing)
18 | points.push(x: i, y: j)
19 |
20 | g.selectAll("circle")
21 | .data(points).enter()
22 | .append("circle")
23 | .attr("cx",(d,i)-> d.x)
24 | .attr("cy",(d,i)-> d.y)
25 | .attr("r",(d,i)-> Math.round(Math.random()*spacing/2+1))
26 | .tooltip(
27 | (d,i)->
28 | r = +d3.select(this).attr('r')
29 |
30 | svg = d3.select(document.createElement("svg"))
31 | .attr("height",50)
32 |
33 | g = svg.append("g")
34 |
35 | g.append("rect")
36 | .attr("width",r*10)
37 | .attr("height",10)
38 |
39 | g.append("text")
40 | .text("10 times the radius of the cirlce")
41 | .attr("dy","25")
42 |
43 | {
44 | type: "tooltip"
45 | text: "Tip for circle of radius #{r}"
46 |
47 | detection: "shape"
48 |
49 | placement: "fixed"
50 | gravity: "right"
51 | position: [d.x,d.y]
52 | displacement:[r+2,-20]
53 | mousemove: false
54 | }
55 | )
56 |
57 | $(document).ready(graphic.create)
58 |
--------------------------------------------------------------------------------
/examples/tooltip/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 10px sans-serif;
3 | }
4 | #main {
5 | left: 25%;
6 | position: absolute;
7 | }
8 | #main #text {
9 | padding-bottom: 10px;
10 | }
11 |
12 | body {
13 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
14 | font-size: 13px;
15 | line-height: 18px;
16 | color: #333;
17 | }
--------------------------------------------------------------------------------
/examples/tooltip/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/examples/tooltip/index.js:
--------------------------------------------------------------------------------
1 | var graphic;
2 |
3 | graphic = new Object;
4 |
5 | graphic.create = function() {
6 | var g, height, i, j, points, size, spacing, width, _i, _j, _len, _len2, _ref, _ref2;
7 | width = $(document).width() / 2;
8 | height = $(document).height() * .85;
9 | size = d3.min([width, height]);
10 | graphic.svg = d3.select("#graphic").append("svg").attr("width", size).attr("height", size);
11 | g = graphic.svg.append("g");
12 | points = [];
13 | spacing = 30;
14 | _ref = d3.range(0, height - spacing, spacing);
15 | for (_i = 0, _len = _ref.length; _i < _len; _i++) {
16 | i = _ref[_i];
17 | _ref2 = d3.range(0, width - spacing, spacing);
18 | for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
19 | j = _ref2[_j];
20 | points.push({
21 | x: i,
22 | y: j
23 | });
24 | }
25 | }
26 | return g.selectAll("circle").data(points).enter().append("circle").attr("cx", function(d, i) {
27 | return d.x;
28 | }).attr("cy", function(d, i) {
29 | return d.y;
30 | }).attr("r", function(d, i) {
31 | return Math.round(Math.random() * spacing / 2 + 1);
32 | }).tooltip(function(d, i) {
33 | var r, svg;
34 | r = +d3.select(this).attr('r');
35 | svg = d3.select(document.createElement("svg")).attr("height", 50);
36 | g = svg.append("g");
37 | g.append("rect").attr("width", r * 10).attr("height", 10);
38 | g.append("text").text("10 times the radius of the cirlce").attr("dy", "25");
39 | return {
40 | type: "tooltip",
41 | text: "Tip for circle of radius " + r,
42 | detection: "shape",
43 | placement: "fixed",
44 | gravity: "right",
45 | position: [d.x, d.y],
46 | displacement: [r+2, -20],
47 | mousemove: false
48 | };
49 | });
50 | };
51 |
52 | $(document).ready(graphic.create);
53 |
--------------------------------------------------------------------------------
/grunt.js:
--------------------------------------------------------------------------------
1 | /*global module:false*/
2 | module.exports = function(grunt) {
3 | //Load in the coffee and css grunt machines!
4 | grunt.loadNpmTasks('grunt-coffee'); // http://github.com/avalade/grunt-coffee
5 | grunt.loadNpmTasks('grunt-css'); // http://github.com/jzaefferer/grunt-css
6 | // Project configuration.
7 | grunt.initConfig({
8 | pkg: '