SO help - line

_.md

[ Launch: SO help - line ] 5808514 by enjalot

config.json

{"description":"SO help - line","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/PL5MFkK.png"}

inlet.js

//http://stackoverflow.com/questions/17172150/line-connecting-the-points

var width = 400,
height = 400,
radius = 320;

var width = 400,
height = 400,
radius = 320;

var theta = -0.2392*Math.PI
var rad = radius - 25;
var circle2 = {x: Math.cos(theta)*rad, y: Math.sin(theta)*rad}
console.log(circle2)


bdata = [{"value":10},
    {"value":10},
    {"value":20},
    {"value":10},
    {"value":10}];

tdata = [{"x":0.5, "y":10.5}];

var s = ([65]);

var color = d3.scale.ordinal()
.range(["#d2000e", "#ffce00", "#00a600", "#ffce00", "#d2000e"]);

var pie = d3.layout.pie()
    .value(function(d) { return d.value; })
    .sort(null)
    .startAngle(0)
.endAngle((Math.PI/2));

var arc = d3.svg.arc()
.innerRadius(radius - 26)
.outerRadius(radius - 20);

var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.data([bdata])
  .append("g")
.attr("transform", "translate(40, 40)");

var path = svg.selectAll("path")
  .data(pie)
.enter().append("path")
  .attr("fill", function(d, i) { return color(i); })
  .attr("d", arc)
  .attr("transform", "translate(0," + 299.5 + ")");

var x = d3.scale.linear()
            .domain([0, 200])
            .range([0, 300]);

var y = d3.scale.linear()
            .domain([0, 20])
            .range([300, 0]);

var radius = d3.scale.linear()
            .domain([0, 9])
            .range([180, 240]);

var fill = d3.scale.linear()
            .domain([0, 9])
            .range(["red", "steelblue"]);

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

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

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + 300 + ")")
  .call(xAxis)
.append("text")
  //.attr("transform")
  .attr("x", 315)
  .attr("y", 5)
  .attr("dx", ".71em")
  .style("text-anchor", "middle")
  .text("m3/hr");    

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("y", -10)
  .attr("dy", ".71em")
  .style("text-anchor", "middle")
  .style("color", "#222")
  .text("bar");

var circles = svg.selectAll("circle")
                .data(tdata)
                .enter()
                .append("circle");                  

var circleAttr = circles
            .attr("transform", "translate(0," + 290 + ")")
            .attr("cx", function (d) { return -x(d.x); })
            .attr("cy", function (d) { return -y(d.y); })
            .attr("r", 7);  


var g2 = svg.selectAll("circle")
.data([0, 1])
.enter()
 .append("svg:g")
.attr("transform", "translate(0," + 300 + ")");

var circle = g2.selectAll("circle")
.attr("class", "secpoint")
.data([circle2])
.enter()
.append("svg:circle")
//    .attr("transform", function(d) { return "rotate(" + -s + ")"; })
.attr("cx", function(d) { return d.x})
.attr("cy", function(d) { return d.y})
.attr("r", 7)
.attr("stroke", "black")


svg.append("line")
.attr("transform", "translate(0," + 290 + ")")

.attr({
  x1: -x(tdata[0].x),
  x2: circle2.x + 3,
  y1: -y(tdata[0].y),
  y2: circle2.y + 3
})
.style({
  stroke: "#000000"
})