jalapic/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    forked & adapted from d3noob's block: Simple line with hover

  
## data.csv

          
            date
            severity

            
              1
              43

            
              2
              53

            
              3
              67

            
              4
              89

            
              5
              99

            
              6
              130

            
              7
              166

            
              8
              234

            
              9
              345

            
              10
              443

            
              11
              543

            
              12
              580

            
              13
              605

            
              14
              652

            
              15
              686

            
              16
              758

            
              17
              846

            
              18
              943

            
              19
              1014

            
              20
              1118

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 16px Helvetica;}

path {
	stroke: #ff0000;
	stroke-width: 2;
	fill: none;
}

circle {
	stroke: #ffffff;
  stroke-width: 3;
	fill: #cc0000;
  }

.axis path,
.axis line {
	fill: none;
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

div.tooltip {
     position:absolute;
        top:-10px;
        right:9999px;
        width:120px;
        margin-right:-220px;
        padding:10px;
        color:#fff;
        background:#333;
        opacity:0;


}

</style>
<body>

<!-- load the d3.js library -->
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var	margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 800 - margin.left - margin.right,
	height = 400 - margin.top;
 padding = 5; // space around the chart, not including labels

// Set the ranges
var	x = d3.scale.linear().range([padding, width-padding]);
var	y = d3.scale.linear().range([height, padding]).nice();

// Define the axes
var	xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

var	yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

// Define the line
var	valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.severity); });

// Define 'div' for tooltips
var div = d3.select("body")
	.append("div")  // declare the tooltip div
	.attr("class", "tooltip")              // apply the 'tooltip' class
	.style("opacity", 0);                  // set the opacity to nil

// Adds the svg canvas
var	svg = d3.select("body")
	.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom + padding*5)
	.append("g")
		.attr("transform",
		      "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
		d.date = +d.date;
		d.close = +d.severity;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);

	// Add the valueline path.
	svg.append("path")
		.attr("class", "line")
		.attr("d", valueline(data));

	// draw the scatterplot
	svg.selectAll("dot")
		.data(data)
	.enter().append("circle")
		.attr("r", 7)
		.attr("cx", function(d) { return x(d.date); })
		.attr("cy", function(d) { return y(d.close); })
  // Tooltip stuff after this
    .on("mouseover", function(d) {
                d3.select(this)
                .attr("r", 12);
             div.transition()
                .duration(400)
                .style("opacity", .9);
             div.html("Week = " +
                      +d.date +
                      "<br/>" +
                      "Severity = " +
                      +d.severity)
                .style("left", (d3.event.pageX+7) + "px")
                .style("top", (d3.event.pageY-60) + "px");
            })
            .on("mouseout", function(d) {
                d3.select(this)
                  .attr("r", 7);
            div.transition()
                .duration(500)
                .style("opacity", 0);

                });


	// Add the X Axis
	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

	// Add the Y Axis
	svg.append("g")
		.attr("class", "y axis")
		.call(yAxis);

});

   // now add titles to the axes
 svg.append("text")
    .attr("text-anchor", "middle")
    .attr("transform", "translate("+","+(height/2)+")rotate(-90)")       .text("Value");

          svg.append("text")
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+
                  (height+padding*8)+")")
            .text("Week");


</script>
</body>
	date	severity
	1	43
	2	53
	3	67
	4	89
	5	99
	6	130
	7	166
	8	234
	9	345
	10	443
	11	543
	12	580
	13	605
	14	652
	15	686
	16	758
	17	846
	18	943
	19	1014
	20	1118
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	body { font: 16px Helvetica;}

	path {
	stroke: #ff0000;
	stroke-width: 2;
	fill: none;
	}

	circle {
	stroke: #ffffff;
	stroke-width: 3;
	fill: #cc0000;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	div.tooltip {
	position:absolute;
	top:-10px;
	right:9999px;
	width:120px;
	margin-right:-220px;
	padding:10px;
	color:#fff;
	background:#333;
	opacity:0;


	}

	</style>
	<body>

	<!-- load the d3.js library -->
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	// Set the dimensions of the canvas / graph
	var margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 800 - margin.left - margin.right,
	height = 400 - margin.top;
	padding = 5; // space around the chart, not including labels

	// Set the ranges
	var x = d3.scale.linear().range([padding, width-padding]);
	var y = d3.scale.linear().range([height, padding]).nice();

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.severity); });

	// Define 'div' for tooltips
	var div = d3.select("body")
	.append("div") // declare the tooltip div
	.attr("class", "tooltip") // apply the 'tooltip' class
	.style("opacity", 0); // set the opacity to nil

	// Adds the svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom + padding*5)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	// Get the data
	d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
	d.date = +d.date;
	d.close = +d.severity;
	});

	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);

	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.attr("d", valueline(data));

	// draw the scatterplot
	svg.selectAll("dot")
	.data(data)
	.enter().append("circle")
	.attr("r", 7)
	.attr("cx", function(d) { return x(d.date); })
	.attr("cy", function(d) { return y(d.close); })
	// Tooltip stuff after this
	.on("mouseover", function(d) {
	d3.select(this)
	.attr("r", 12);
	div.transition()
	.duration(400)
	.style("opacity", .9);
	div.html("Week = " +
	+d.date +
	"<br/>" +
	"Severity = " +
	+d.severity)
	.style("left", (d3.event.pageX+7) + "px")
	.style("top", (d3.event.pageY-60) + "px");
	})
	.on("mouseout", function(d) {
	d3.select(this)
	.attr("r", 7);
	div.transition()
	.duration(500)
	.style("opacity", 0);

	});



	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	});

	// now add titles to the axes
	svg.append("text")
	.attr("text-anchor", "middle")
	.attr("transform", "translate("+","+(height/2)+")rotate(-90)") .text("Value");

	svg.append("text")
	.attr("text-anchor", "middle")
	.attr("transform", "translate("+ (width/2) +","+
	(height+padding*8)+")")
	.text("Week");



	</script>
	</body>