Friday 03 July 2015 4:28 am

line graph test

var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 839 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d %B %Y").parse;

var x = d3.time.scale() .range([0, width]);

var y = d3.scale.linear() .range([height, 0]);

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

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

var line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); });

var line2 = d3.svg.line() .x(0) .y(0);

var svg = d3.select("#cam-d3-line").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tooltip = d3.select("#cam-d3-line") .append("div") // declare the tooltip div .attr("class", "tooltip") // apply the 'tooltip' class .style("opacity", 0);

d3.csv("https://www.cityam.com/wp-content/uploads/2015/07/bp2-559647e7005af.csv", function(error, data) { if (error) throw error;

data.forEach(function(d) { var datez = d.date.slice() d.date = parseDate(d.date); d.close = +d.close; });

x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.close; }));

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

svg.append("path") .datum(data) .attr("class", "line") .attr("d", line);

svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class","axis-text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("share price (p)");

var nodes = svg.append("g") .attr("class","nodes") .selectAll("circle") .data(data) .enter() .append("circle") .attr("class","circle") .attr("cx", function(d){return x(d.date)}) .attr("cy", function(d) {return y(d.close)}) // .attr("r", 0) .style("fill", "#cb181d") // .style("opacity", 0) // .transition().duration(800) .attr("r", function(d) {if(d.bubble === "1") {return 5} else {return 0}}) .style("opacity",1) .on("mouseover", mouseover) .on("mouseout", mouseout);

// var circleText = svg.selectAll("text") // .data(data) // .enter() // .append("text") // .attr("class","labelText") // .attr("x", function(d){return x(d.date)-20}) // .attr("y", function(d) {return y(d.close)}) // .text(function(d) {return d.text}) // .style("opacity",0)

function mouseover(d) { // show tooltip fade in tooltip.transition() .duration(500) // .style("opacity", 0) .style("stroke-width", 9); tooltip.transition() .duration(200) .style("opacity", .9) // .style("font-size", 8) .style("stroke-width", 3); tooltip.html("

"+d.datez+"

"+(d.text)+"

"); // tooltip.style("left", (d3.event.pageX) + "px") // .style("top", (d3.event.pageY - 28) + "px") // .style("font-size", 8); }

function mouseout(p) { // show tooltip fadeout tooltip.transition().duration(200).style("opacity", .9); tooltip.transition().duration(500).style("opacity", 0); }

});