​

$(function() {

  spectrum_data = [

    {

        "Mass": "3005.99",

        "Intensity": "9"

    },

    {

        "Mass": "4009.68",

        "Intensity": "47"

    },

    {

        "Mass": "5011.39",

        "Intensity": "15"

    },

    {

        "Mass": "6019.15",

        "Intensity": "50"

    },

    {

        "Mass": "7019.86",

        "Intensity": "48"

    },

    {

        "Mass": "8025.15",

        "Intensity": "19"

    },

    {

        "Mass": "9028.27",

        "Intensity": "33"

    }

];

//console.log("spectrumdata = " + spectrum_data.length);

//svg

var width = 1500;

var height = 500;

​

​

//svg object

var svg = d3.select("body").append("svg").attr("width", width).attr(

        "height", height).style("outline","solid");

​

​

var  data = SortObject(spectrum_data);

    var xScale = d3.scale.linear().domain(

            [ 3000, 11000 ]).range([ 0, (width-50) ]);

    var yScale = d3.scale.linear().domain( [50 ,0 ]).range([ 0,450 ]);

    //}

​

​

    function SortObject(passedObject) {

        var values = [];

        var sorted_obj = {};

​

        for (var key in passedObject) {

            if (passedObject.hasOwnProperty(key)) {

                values.push(passedObject[key]);

            }

        }

​

        // sort keys

        values.sort();

​

        // create new object based on Sorted Keys

        jQuery.each(values, function (i, value) {

            var key = GetKey(passedObject, value);

            sorted_obj[key] = value;

        });

​

        return sorted_obj;

    }

    function GetKey(someObject, value) {

        for (var key in someObject) {

            if (someObject[key] === value) {

                return key;

            }

        }

    }

createLinegraph(spectrum_data); 

​

function createLinegraph(data) {

//  var linegraph = svg.selectAll("line")

//                  .data(data)

//                  .enter()

//                  .append("line")

//                  .attr("x1",function(d) {return height-d.Mass})

//                  .attr("x2",function(d) {return height-d.Mass})

//                  .attr("y1",function(d) {return d.Intensity})

//                  .attr("y2",function(d) {return d.Intensity})

//                  .style("stroke","black")

    var line = d3.svg.line()

    .x(function(d) {//console.log(xScale(parseInt(d.Mass)));

        return xScale(d.Mass); })

    .y(function(d) {//console.log(xScale(d.Intensity));

        return yScale(d.Intensity); });

    var tooltip = d3.select("body")

     .data(data)

//    .enter()

    .append("div")

    .style("position", "absolute")

    .style("z-index", "10")

    .style("visibility", "hidden")

    .text(function(d){console.log((d.Mass+ ","+ d.Intensity));return (d.Mass+ ","+ d.Intensity);});

var linegraph=   svg.append("path")

     .datum(data)

     .attr("d", line)

     .style("stroke-width", 1.5)

     .style("stroke", "black")

     .style("fill","none")

     .attr("transform", "translate(40,20)")

     //.on("mouseover", function() { console.log(d3.mouse(this)); })

     .on("mouseover", function(){

       var pos = d3.mouse(this);

       tooltip.text(xScale.invert(pos[0]).toFixed(1) + ' , ' + yScale.invert(pos[1]).toFixed(1));

       return tooltip.style("visibility", "visible");

     })

     .on("mousemove", function(){return tooltip.style("top",

    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})

    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

​

​

}

​

​

​

​

var xAxis = d3.svg.axis().scale(xScale);

​

xAxis.orient("bottom").ticks(10);

​

svg.append("g").call(xAxis).attr("class", "axis").attr("transform", "translate(40,470)");

​

var yAxis = d3.svg.axis().scale(yScale);

​

yAxis.orient("left").ticks(20);

​

svg.append("g").attr("class", "axis").call(yAxis).attr("transform", "translate(30,20)");

​

​

​

​

//function mousemove() {

////var x0 = xScale.invert(d3.mouse(this)[0]),

////  i = bisectDate(data, x0, 1),

////  d0 = data[i - 1],

////  d1 = data[i],

////  d = x0 - d0.date > d1.date - x0 ? d1 : d0;

//focus.

//data(data).

//enter().

//attr(function(d){return "transform", "translate(" + xScale(d.Mass) + "," + yScale(d.Intensity) + ")"});

////focus.select("text").text(formatCurrency(d.Mass));

//}

​

});

​

​

​