brightonphpfftd3js2013/ydatameanremoved.html at master · espeecat/brightonphpfftd3js2013 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mean Zero Time Series</title>
<style>
    /* line style */
	path {
        stroke: red;
        stroke-width: 2;
        fill: none; /* stop it being solid area */
    }
    /* x axis tick */
    .x.axis line {
        stroke: #000;
    }
	/* x axis line */
    .x.axis path {
        fill: none;
        stroke: #000;
    }
     /* Y tick */
    .y.axis line, .y.axis path {
        fill: none;
        stroke: #000;
    }
</style>

<h1>Simple GA data with mean removed</h1>
<p>code at jasonbailey.net for Brighton PHP</p>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    d3.json("zero-mean-y.json", function(error, data) {
        plotChart(data);  //load the json data
    });

    function plotChart(data) {
        var w = 800; //width
        var h = 400; // height
        var x = d3.scale.linear().domain([0, ((data.length) - 0) / 24]).range([0, w]);  // 24 for days
        var y = d3.scale.linear().domain([-800, 1500]).range([h,0]);

        var xAxis = d3.svg.axis().scale(x).orient("bottom");  //x axis at bottom

        var yAxis = d3.svg.axis().scale(y).orient("left"); // y axis on left

        var line = d3.svg.line().x(function(d, i) {
                    return x(i) / 24; // divide x values by 24 to get hours in days
                }).y(function(d, i) {
                    return y(d);  });

        var graph = d3.select("#graph").append("svg:svg").attr("width", w )
                .attr("height", h+ 200 ).append("svg:g")
                .attr("transform", "translate(" + 100 + "," + 100 + ")"); // move chart down and right

        graph.append("svg:path").attr("d", line(data)); // red line

		graph.append("g").attr("class", "x axis")
		     .attr("transform", "translate(0," + h + ")").call(xAxis);
        graph.append("g").attr("class", "y axis").call(yAxis);

		graph.append("text").attr("class", "x label")
                .attr("text-anchor", "end").attr("x", w - (w / 2))
                .attr("y", h + 45).text("Time in Days");

		graph.append("text").attr("class", "y label")
                .attr("text-anchor", "end").attr("y", -60).attr("x", -60)
                .attr("dy", ".75em").attr("transform", "rotate(-90)")
                .text("Number of Visits");
    }

</script>

</html>