danharr/donut.csv

## donut.csv

          
            product
            sales

            
              a
              2900

            
              b
              700

## font.ttf
test

## force.json
{
"links":[
{
"source":0,
"target":1
},
{
"source":0,
"target":2
},
{
"source":0,
"target":3
},
{
"source":0,
"target":4
}
],
"nodes":[
{
"name":"140",
"size":7,
"fill":"#FF0066"
},
{
"name":"ORIGINAL",
"size":2,
"fill":"green"
},
{
"name":"VARIETY",
"size":2,
"fill":"green"
}
,
{
"name":"FAMILY",
"size":4,
"fill":"green"
}
,
{
"name":"COMPLETE",
"size":3,
"fill":"green"
}

]
}

## index.html

<!DOCTYPE html>
<html>
<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
  @font-face{font-family:sky;src:url('sky_medium.ttf')}
@font-face{font-family:snb;src:url('sky_medium.ttf')}
@font-face{font-family:snr;src:url('sky_medium.ttf')}
   .line{
 stroke-width:10;
 opacity:0.5;
 }


.axis path,
    .axis line {
        fill: none;
        stroke: none;
        shape-rendering: crispEdges;
}
    .axis text {
        font-family: sky;
        font-size:8px;
        fill:grey;
}

.link {
  stroke: black;
  stroke-opacity: 0.5;
}


</style>


</head>
<body>

	<script src="master.js" charset="utf-8"></script>
	<script src="titles.js" charset="utf-8"></script>

	<script src="top_left.js" charset="utf-8"></script>
    <script src="top_middle.js" charset="utf-8"></script>
    <script src="top_right.js" charset="utf-8"></script>


<script src="middle_middle.js" charset="utf-8"></script>


	<script src="ticker.js" charset="utf-8"></script>

</body>
</html>

## master.js


var currentdate = new Date();

var currentdate = new Date();
var datetime = currentdate.getHours() + ":" + currentdate.getMinutes();

var masterw = 1336;
var masterh = 647;


var w = masterw/3;
var h = masterh/3;


//var w = 800;
//var h = 500;

var margin = {top: 10, right: 10, bottom:10 , left: 10};
var cmargin = {top: 10, right: 40, bottom:45 , left: 10};

var x = d3.scale.linear().domain([0,23]).range([cmargin.left,w-cmargin.right]);
var x2 = d3.time.scale().domain([new Date(2014,0,1),new Date(2014,0,1,23,59)]).range([cmargin.left,w]);

var svg = d3.select("body")
            .append("svg")
            .attr("width",masterw )
            .attr("height", masterh);

var format = d3.time.format("%H:00");
//var status = svg.append("text").text(currentdate).attr("x",4).attr("y",4).style("font-family","sky").style("font-size",8).style("fill","blue");


## middle_middle.js
var  radius = Math.min(w, h) / 2;

var arc = d3.svg.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 70);

var color = d3.scale.ordinal()
    .range(["#333333", "none"]);

    var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.sales; });


var masterw = 1336;
var masterh = 647;


var w = masterw/3;
var h = masterh/3;


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


    d3.csv("donut.csv", function(error, data) {

  data.forEach(function(d) {
    //d.sales = +d.sales;
    d.sales = Math.random();
  });

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc")
      .attr("transform", "translate(" + (w + (radius*1.5))  + "," + (h+radius) + ")");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.product); });


});

## sky_medium.ttf

      
    Raw
  

              sky_medium.ttf
            
          
            View raw
        
    
## sky_regular.ttf

      
    Raw
  

              sky_regular.ttf
            
          
            View raw
        
    
## test.csv

          
            hour
            lw
            yest
            tod

            
              0
              4
              8
              3

            
              1
              2
              6
              2

            
              2
              3
              4
              0

            
              3
              2
              6
              0

            
              4
              9
              11
              0

            
              5
              5
              4
              4

            
              6
              8
              6
              6

            
              7
              10
              12
              18

            
              8
              14
              25
              19

            
              9
              22
              32
              22

            
              10
              23
              28
              26

            
              11
              20
              40
              30

            
              12
              45
              35

            
              13
              84
              78

            
              14
              46
              55

            
              15
              14
              49

            
              16
              21
              21

            
              17
              32
              19

            
              18
              49
              32

            
              19
              78
              66

            
              20
              54
              32

            
              21
              23
              11

            
              22
              14
              8

            
              23
              17
              4

## ticker.js
svg.append("clipPath")
    .attr("id", "chart-area")
    .append("rect")
    .attr("x", 100)
    .attr("y", masterh-25)
    .attr("width", masterw-100)
    .attr("height",25)

    ;

var tickerTime = svg.append("text").text(datetime).attr("x",20).attr("y",masterh-6).style("font-family","snr").style("font-size",24);


var yellowTicker = svg.append("g").attr('with-space-preserve', true).attr("clip-path", "url(#chart-area)");

yellowTicker.append("rect").attr("width",masterw-20).attr("height",25).attr("x",100).attr("y",masterh-25).style("fill","#ffde00");
yellowTicker.append("rect").attr("width",200).attr("height",25).attr("x",100).attr("y",masterh-25).style("fill","black");


var Message = yellowTicker.append("text")
.text("COMPANY STARTS WORK ON A NEW DASHBOARD                   BREAKING NEWS                   32 SALES IN LAST HOUR (2PM)                   DELAYS SEEN AT SYON LANE                   342 BROADBAND SALES YESTERDAY (+34 vs DAY BEFORE)")
.attr("x",600).attr("y",masterh-5)
.style("font-family","snr")
.attr('xml:space', 'preserve')
.style("font-size",24)
.style("fill","black")
.transition()
.duration(32000)
.ease("linear")
.attr("x",-1200)


var bN = svg.append("text").text("BREAKING NEWS").attr("x",105).attr("y",masterh-5)
.style("font-family","snr").style("font-size",24)
.style("fill","#ffde00");

## titles.js

//Titles

var mytitles = svg.selectAll(".mytitles")
.data([
["SALES BY HOUR",0,0],
["SALES TODAY",1,0],
["BUNDLES TODAY",2,0],
["MIDDLE LEFT",0,1],
["SALES VS MONTH TARGET",1,1],
["MIDDLE RIGHT",2,1],
["BOTTOM LEFT",0,2],
["BOTTOM MIDDLE",1,2],
["BOTTOM RIGHT",2,2]

])
.enter()
.append("text")
.attr("x",function(d) {return w*d[1]+margin.left;})
.attr("y",function(d) {return margin.top*2+(h*d[2]);})
.style("font-size",20)
.style("font-family","snb")
.style("fill","#333")
.text(function(d) {return d[0];});


## top_left.js


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


	d3.csv("test.csv", function(data) {
        //Hand CSV data off to global variable so it's accessible later.
        dataset = data;


var y = d3.scale.linear().domain([0,d3.max(dataset,function(d){return +d.lw;})]).range([h-cmargin.bottom,cmargin.top]);
var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(3);


 var xAxis = d3.svg.axis()
    .scale(x2)
    .tickFormat(format)
	.ticks(3)
    .orient('bottom');


	var lineA = d3.svg.line()
.interpolate("basis")
    .x(function(d, i) { return x(d.hour); })
    .y(function(d, i) { return y(+d.lw); });


var lineB = d3.svg.line()
.interpolate("basis")
    .x(function(d, i) { return x(d.hour); })
    .y(function(d, i) { return y(+d.yest); });


var lineC = d3.svg.line()
.interpolate("basis")
    .x(function(d, i) { return x(d.hour); })
    .y(function(d, i) { return y(+d.tod); });


	//1st widget
	//last week
  topleft.append("path")
    .datum(dataset)
    .attr("class", "line")
    .style("stroke","grey")
    .style("fill","none")
	.style("opacity",0.4)
   .style("stroke-width",4)
   //.style("stroke-dasharray", ("14, 3"))
    .attr("d", lineA)
	.append("title")
	.text("Last Week");

 //yesterday
    topleft.append("path")
    .datum(dataset)
    .attr("class", "line")
    .style("stroke","black")
    .style("fill","none")
	.style("opacity",0.4)
   .style("stroke-width",4)
    .attr("d", lineB)
	.append("title")
	.text("Yesterday");


//today
    topleft.append("path")
    .datum(dataset.filter(function(d) {return d.hour < 11;}))
    //.filter(function(dataset) {return d.hour<6;})
    .attr("class", "line")
    .style("stroke","#18bdff")
    .style("fill","none")
	.style("opacity",1)
    .style("stroke-width",4)
    .attr("d", lineC)
	.append("title")
	.text("Today");


	topleft.append('g')
  .attr('class', 'y axis')
.attr('transform', 'translate('+cmargin.left+',0)')
  .call(yAxis);


topleft.append('g')
  .attr('class', 'x axis')
.attr('transform', 'translate(0,'+(h-(cmargin.bottom))+')')
  .call(xAxis);


});

## top_middle.js
 //totals
 d3.csv("test.csv", function(data) {
        //Hand CSV data off to global variable so it's accessible later.
        dataset = data;


 var a = d3.sum(dataset,function(d) {return d.tod;});

 //alert(a);

 var total = topleft.append("g");

/* total.append("rect").attr("x",w).attr("y",h)
 .attr("width",w).attr("height",h);*/


 total.append("text")
 .attr("x",w*1.1)
  .attr("y",h/1.5)
  .style("font-family","sky")
  .style("font-size",150)
  .style("fill","#18bdff")
  .text(a);


});

## top_right.js
var force = d3.layout.force()
    .charge(-1050)
    .linkDistance(w/6.5)
    .size([w, h]);


d3.json("force.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return 4; });

  var node = svg.append("g").selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d.size*7;})
      .style("fill",function(d) { return "#18bdff"; })
      .style("stroke-width", function(d) {return d.size;})
      .style("stroke", function(d) { return "#E7E7E7"; })
      .call(force.drag);


      var text = svg.append("g").selectAll(".forceText")
   .data(graph.nodes)
   .enter()
   .append("text")
   .attr("x",0)
   .attr("y",".31em")
   .text(function(d) {return d.name;})
   .style("fill","black")
   .style("font-family","snb")
   .style("font-size",function(d) {return d.size*5;})


  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x + (2*w); })
        .attr("y1", function(d) { return d.source.y })
        .attr("x2", function(d) { return d.target.x+ (2*w); })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x + (2*w); })
        .attr("cy", function(d) { return d.y ; });


        text.attr("x", function(d) { return d.x+ (2*w)-(4*d.size); })
        .attr("y", function(d) { return d.y+(d.size*2); })
  });
});
	{
	"links":[
	{
	"source":0,
	"target":1
	},
	{
	"source":0,
	"target":2
	},
	{
	"source":0,
	"target":3
	},
	{
	"source":0,
	"target":4
	}
	],
	"nodes":[
	{
	"name":"140",
	"size":7,
	"fill":"#FF0066"
	},
	{
	"name":"ORIGINAL",
	"size":2,
	"fill":"green"
	},
	{
	"name":"VARIETY",
	"size":2,
	"fill":"green"
	}
	,
	{
	"name":"FAMILY",
	"size":4,
	"fill":"green"
	}
	,
	{
	"name":"COMPLETE",
	"size":3,
	"fill":"green"
	}

	]
	}

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<style type="text/css">
	@font-face{font-family:sky;src:url('sky_medium.ttf')}
	@font-face{font-family:snb;src:url('sky_medium.ttf')}
	@font-face{font-family:snr;src:url('sky_medium.ttf')}
	.line{
	stroke-width:10;
	opacity:0.5;
	}



	.axis path,
	.axis line {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sky;
	font-size:8px;
	fill:grey;
	}

	.link {
	stroke: black;
	stroke-opacity: 0.5;
	}



	</style>


	</head>
	<body>

	<script src="master.js" charset="utf-8"></script>
	<script src="titles.js" charset="utf-8"></script>

	<script src="top_left.js" charset="utf-8"></script>
	<script src="top_middle.js" charset="utf-8"></script>
	<script src="top_right.js" charset="utf-8"></script>


	<script src="middle_middle.js" charset="utf-8"></script>




	<script src="ticker.js" charset="utf-8"></script>

	</body>
	</html>


	var currentdate = new Date();

	var currentdate = new Date();
	var datetime = currentdate.getHours() + ":" + currentdate.getMinutes();

	var masterw = 1336;
	var masterh = 647;


	var w = masterw/3;
	var h = masterh/3;



	//var w = 800;
	//var h = 500;

	var margin = {top: 10, right: 10, bottom:10 , left: 10};
	var cmargin = {top: 10, right: 40, bottom:45 , left: 10};

	var x = d3.scale.linear().domain([0,23]).range([cmargin.left,w-cmargin.right]);
	var x2 = d3.time.scale().domain([new Date(2014,0,1),new Date(2014,0,1,23,59)]).range([cmargin.left,w]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width",masterw )
	.attr("height", masterh);

	var format = d3.time.format("%H:00");
	//var status = svg.append("text").text(currentdate).attr("x",4).attr("y",4).style("font-family","sky").style("font-size",8).style("fill","blue");
	var radius = Math.min(w, h) / 2;

	var arc = d3.svg.arc()
	.outerRadius(radius - 40)
	.innerRadius(radius - 70);

	var color = d3.scale.ordinal()
	.range(["#333333", "none"]);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.sales; });



	var masterw = 1336;
	var masterh = 647;


	var w = masterw/3;
	var h = masterh/3;





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



	d3.csv("donut.csv", function(error, data) {

	data.forEach(function(d) {
	//d.sales = +d.sales;
	d.sales = Math.random();
	});

	var g = svg.selectAll(".arc")
	.data(pie(data))
	.enter().append("g")
	.attr("class", "arc")
	.attr("transform", "translate(" + (w + (radius*1.5)) + "," + (h+radius) + ")");

	g.append("path")
	.attr("d", arc)
	.style("fill", function(d) { return color(d.data.product); });



	});
hour	lw	yest	tod
0	4	8	3
1	2	6	2
2	3	4	0
3	2	6	0
4	9	11	0
5	5	4	4
6	8	6	6
7	10	12	18
8	14	25	19
9	22	32	22
10	23	28	26
11	20	40	30
12	45	35
13	84	78
14	46	55
15	14	49
16	21	21
17	32	19
18	49	32
19	78	66
20	54	32
21	23	11
22	14	8
23	17	4
	svg.append("clipPath")
	.attr("id", "chart-area")
	.append("rect")
	.attr("x", 100)
	.attr("y", masterh-25)
	.attr("width", masterw-100)
	.attr("height",25)

	;

	var tickerTime = svg.append("text").text(datetime).attr("x",20).attr("y",masterh-6).style("font-family","snr").style("font-size",24);



	var yellowTicker = svg.append("g").attr('with-space-preserve', true).attr("clip-path", "url(#chart-area)");

	yellowTicker.append("rect").attr("width",masterw-20).attr("height",25).attr("x",100).attr("y",masterh-25).style("fill","#ffde00");
	yellowTicker.append("rect").attr("width",200).attr("height",25).attr("x",100).attr("y",masterh-25).style("fill","black");


	var Message = yellowTicker.append("text")
	.text("COMPANY STARTS WORK ON A NEW DASHBOARD BREAKING NEWS 32 SALES IN LAST HOUR (2PM) DELAYS SEEN AT SYON LANE 342 BROADBAND SALES YESTERDAY (+34 vs DAY BEFORE)")
	.attr("x",600).attr("y",masterh-5)
	.style("font-family","snr")
	.attr('xml:space', 'preserve')
	.style("font-size",24)
	.style("fill","black")
	.transition()
	.duration(32000)
	.ease("linear")
	.attr("x",-1200)


	var bN = svg.append("text").text("BREAKING NEWS").attr("x",105).attr("y",masterh-5)
	.style("font-family","snr").style("font-size",24)
	.style("fill","#ffde00");

	//Titles

	var mytitles = svg.selectAll(".mytitles")
	.data([
	["SALES BY HOUR",0,0],
	["SALES TODAY",1,0],
	["BUNDLES TODAY",2,0],
	["MIDDLE LEFT",0,1],
	["SALES VS MONTH TARGET",1,1],
	["MIDDLE RIGHT",2,1],
	["BOTTOM LEFT",0,2],
	["BOTTOM MIDDLE",1,2],
	["BOTTOM RIGHT",2,2]

	])
	.enter()
	.append("text")
	.attr("x",function(d) {return w*d[1]+margin.left;})
	.attr("y",function(d) {return margin.top2+(hd[2]);})
	.style("font-size",20)
	.style("font-family","snb")
	.style("fill","#333")
	.text(function(d) {return d[0];});





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


	d3.csv("test.csv", function(data) {
	//Hand CSV data off to global variable so it's accessible later.
	dataset = data;



	var y = d3.scale.linear().domain([0,d3.max(dataset,function(d){return +d.lw;})]).range([h-cmargin.bottom,cmargin.top]);
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left')
	.ticks(3);




	var xAxis = d3.svg.axis()
	.scale(x2)
	.tickFormat(format)
	.ticks(3)
	.orient('bottom');



	var lineA = d3.svg.line()
	.interpolate("basis")
	.x(function(d, i) { return x(d.hour); })
	.y(function(d, i) { return y(+d.lw); });





	var lineB = d3.svg.line()
	.interpolate("basis")
	.x(function(d, i) { return x(d.hour); })
	.y(function(d, i) { return y(+d.yest); });


	var lineC = d3.svg.line()
	.interpolate("basis")
	.x(function(d, i) { return x(d.hour); })
	.y(function(d, i) { return y(+d.tod); });




	//1st widget
	//last week
	topleft.append("path")
	.datum(dataset)
	.attr("class", "line")
	.style("stroke","grey")
	.style("fill","none")
	.style("opacity",0.4)
	.style("stroke-width",4)
	//.style("stroke-dasharray", ("14, 3"))
	.attr("d", lineA)
	.append("title")
	.text("Last Week");

	//yesterday
	topleft.append("path")
	.datum(dataset)
	.attr("class", "line")
	.style("stroke","black")
	.style("fill","none")
	.style("opacity",0.4)
	.style("stroke-width",4)
	.attr("d", lineB)
	.append("title")
	.text("Yesterday");



	//today
	topleft.append("path")
	.datum(dataset.filter(function(d) {return d.hour < 11;}))
	//.filter(function(dataset) {return d.hour<6;})
	.attr("class", "line")
	.style("stroke","#18bdff")
	.style("fill","none")
	.style("opacity",1)
	.style("stroke-width",4)
	.attr("d", lineC)
	.append("title")
	.text("Today");


	topleft.append('g')
	.attr('class', 'y axis')
	.attr('transform', 'translate('+cmargin.left+',0)')
	.call(yAxis);



	topleft.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,'+(h-(cmargin.bottom))+')')
	.call(xAxis);







	});
	//totals
	d3.csv("test.csv", function(data) {
	//Hand CSV data off to global variable so it's accessible later.
	dataset = data;


	var a = d3.sum(dataset,function(d) {return d.tod;});

	//alert(a);

	var total = topleft.append("g");

	/* total.append("rect").attr("x",w).attr("y",h)
	.attr("width",w).attr("height",h);*/




	total.append("text")
	.attr("x",w*1.1)
	.attr("y",h/1.5)
	.style("font-family","sky")
	.style("font-size",150)
	.style("fill","#18bdff")
	.text(a);


	});
	var force = d3.layout.force()
	.charge(-1050)
	.linkDistance(w/6.5)
	.size([w, h]);


	d3.json("force.json", function(error, graph) {
	force
	.nodes(graph.nodes)
	.links(graph.links)
	.start();

	var link = svg.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return 4; });

	var node = svg.append("g").selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", function(d) {return d.size*7;})
	.style("fill",function(d) { return "#18bdff"; })
	.style("stroke-width", function(d) {return d.size;})
	.style("stroke", function(d) { return "#E7E7E7"; })
	.call(force.drag);



	var text = svg.append("g").selectAll(".forceText")
	.data(graph.nodes)
	.enter()
	.append("text")
	.attr("x",0)
	.attr("y",".31em")
	.text(function(d) {return d.name;})
	.style("fill","black")
	.style("font-family","snb")
	.style("font-size",function(d) {return d.size*5;})



	force.on("tick", function() {
	link.attr("x1", function(d) { return d.source.x + (2*w); })
	.attr("y1", function(d) { return d.source.y })
	.attr("x2", function(d) { return d.target.x+ (2*w); })
	.attr("y2", function(d) { return d.target.y; });

	node.attr("cx", function(d) { return d.x + (2*w); })
	.attr("cy", function(d) { return d.y ; });


	text.attr("x", function(d) { return d.x+ (2w)-(4d.size); })
	.attr("y", function(d) { return d.y+(d.size*2); })
	});
	});