help path update

_.md

[ Launch: help path update ] 0f38320643f108e31616 by gelicia

config.json

{"description":"help path update","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"main.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ROeeMr0.png"}

inlet.js

var svg = d3.select('svg');


var data = [0.23,0.75,21,86,23]

svg.append("rect").attr({
  x:28,
  y:369,
  height: 50,
  width: 100
}).on("click", function(){
	updateScale();
});

// chart
var chart = svg.append("g").attr("transform", "translate(33,5)");

var xScale = d3.scale.linear().range([0, 400]).domain([0,data.length]);
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(data.length)
    .tickSize(9)
    .tickPadding(4);

chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, 300)")
    .call(xAxis);

var yScale = d3.scale.linear().range([0,279]).domain([1,0]);
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('right')
    .ticks(2)
    .tickSize(9)
    .tickPadding(4);

var plotLine = d3.svg.line()
  .x(function(d,i) { return xScale(i); })
  .y(function(d) { return yScale(d); })
   .interpolate("linear");

chart.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(419,20)")
    .call(yAxis);

var colorScale = d3.scale.category20();

/*chart.append("path")
 .attr({
    "class": "quickPlotData",
    "d": plotLine(data),
    "stroke": "blue",
    "fill": "none"
});*/

 chart.append("path")
      .datum(data)
      .attr({
        "class": "quickPlotData",
        "d": plotLine,
        "stroke": "blue",
        "fill": "none"
    });

var qPLine = d3.svg.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d) { return yScale(d.dataFieldValue) + svgOffsets.yScaleUpperPadding; })
    .interpolate("linear");


//would like to keep this self contained - 
function updateScale(){
  if (yScale.domain()[0] == "1"){
    var dataMax = d3.max(data);
	yScale.domain([dataMax,0]);
  }
  else{
    yScale.domain([1,0]);
  }
  
	var yAxisTransition = chart.transition().duration(750);
	yAxisTransition.select(".y.axis").call(yAxis);
  
	d3.selectAll("path.quickPlotData").transition().duration(750).attr("d", plotLine);
}

main.css

.axis text {
    font: 10px sans-serif;
}

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