Thursday 21 May 2015 1:04 pm

Steam test

chart("https://cityam.go-vip.net/wp-content/uploads/2015/05/steamin-555e1069cd273.csv", "blue");

var datearray = []; var colorrange = [];

function chart(csvpath, color) {

if (color == "blue") { colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; } else if (color == "pink") { colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"]; } else if (color == "orange") { colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]; } strokecolor = colorrange[0];

var format = d3.time.format("%m/%d/%Y"); //%m/%d/%y

var margin = {top: 20, right: 40, bottom: 20, left: 40}; var width = 840; var height = 400;

var tooltip = d3.select("#chartHouseBuilding") .append("div") .attr("class", "toolTip");

var x = d3.time.scale() .range([margin.left, width-margin.right]);

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

var z = d3.scale.ordinal() .range(colorrange);

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

var yAxis = d3.svg.axis() .scale(y) .tickFormat(d3.format("s"));

var yAxisr = d3.svg.axis() .scale(y) .tickFormat(d3.format("s"));

var stack = d3.layout.stack() .offset("silhouette") .values(function(d) { return d.values; }) .x(function(d) { return d.date; }) .y(function(d) { return d.value; });

var nest = d3.nest() .key(function(d) { return d.key; });

var area = d3.svg.area() .interpolate("cardinal") .x(function(d) { return x(d.date); }) .y0(function(d) { return y(d.y0); }) .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select('#' + chart_id) .append('svg:svg') .attr('width', width) .attr('height', height) .attr('viewBox', '0 0 ' + width + ' ' + height ) .attr('perserveAspectRatio', 'xMinYMid') .attr('id', chart_id + '-chart') .attr('class', chart_id + '-chart');

var graph = d3.csv(csvpath, function(data) { data.forEach(function(d) { d.date = format.parse(d.date); d.value = +d.value; });

var layers = stack(nest.entries(data));

x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

svg.selectAll(".layer") .data(layers) .enter().append("path") .attr("class", "layer") .attr("d", function(d) { return area(d.values); }) .style("fill", function(d, i) { return z(i); });

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

svg.append("g") .attr("class", "y axis axisRight") .attr("transform", "translate(" + (width-margin.right) + ", 0)") .call(yAxis.orient("right"));

svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ", 0)") .call(yAxis.orient("left"));

svg.selectAll(".layer") .attr("opacity", 1) .on("mouseover", function(d, i) { svg.selectAll(".layer").transition() .duration(250) .attr("opacity", function(d, ni) { return ni === i ? 1 : 0.6; })})

.on("mousemove", function(d, i) { mousex = d3.mouse(this); mousex = mousex[0]; var invertedx = x.invert(mousex); invertedx = invertedx.getYear();

var selected = (d.values);

for (var k = 0; k " + theYear + "
" + key1 + ": " + proFormat(pro1) + "
" + key2 + ": " + proFormat(pro2) + "
" + key3 + ": " + proFormat(pro3) + "

"; //var pro = d.values[mousedate].value;

//var proOutput = proFormat(pro);

d3.select(this) .classed("hover", true) .attr("stroke", strokecolor) .attr("stroke-width", "0.5px"), tooltip.html( webString ).style("display", "block");

}) .on("mouseout", function(d, i) { svg.selectAll(".layer") .transition() .duration(250) .attr("opacity", "1"); d3.select(this) .classed("hover", false) .attr("stroke-width", "0px"), tooltip.html( "

" + d.key + "

" ).style("display", "none"); })

var vertical = d3.select("#chartHouseBuilding") .append("div") .attr("class", "remove") .style("position", "absolute") .style("z-index", "19") .style("width", "1px") .style("height", height) .style("top", "10px") .style("bottom", "30px") .style("left", "0px") .style("background", "#fff");

d3.select("#chartHouseBuilding") .on("mousemove", function(){ mousex = d3.mouse(this); mousex = mousex[0] + 5; vertical.style("left", mousex + "px" )}) .on("mouseover", function(){ mousex = d3.mouse(this); mousex = mousex[0] + 5; vertical.style("left", mousex + "px")}); }); }

/* JS code for auto resizing of chart for responsive devices */ var the_chart = jQuery("#" + chart_id + '-chart'), aspect = the_chart.width() / the_chart.height(), container = the_chart.parent();

jQuery(window).on("resize", function() { var targetWidth = container.width(); the_chart.attr("width", targetWidth); the_chart.attr("height", Math.round(targetWidth / aspect)); }).trigger("resize");