Skip to content

Commit

Permalink
basic functioning graphing with scope mgmt, #118
Browse files Browse the repository at this point in the history
  • Loading branch information
@jywarren
jywarren committed Jul 6, 2015
1 parent 866efab commit 8db03fe
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 125 deletions.
246 changes: 125 additions & 121 deletions app/assets/javascripts/graph2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,148 +38,152 @@ SpectralWorkbench = Class({
nv.addGraph(this.graphSetup());

// Update the chart when window updates.
$(window).on('resize', function() { this.update() });

$(window).on('resize', this.update.apply(this));
},

graphSetup: function() {
// closure to preserve scope
return (function() {
console.log()
chart = nv.models.lineChart()
.height(this.height-this.margin.top-this.margin.bottom)
.margin(this.margin)
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
//// .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(false) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;

chart.xAxis //Chart x-axis settings
.axisLabel('Wavelength (nanometers)')
.tickFormat(d3.format('1d'));

chart.yAxis //Chart y-axis settings
.axisLabel('Intensity (%)')
.tickFormat(d3.format('%'));
var chart = nv.models.lineChart()
.height(this.height-this.margin.top-this.margin.bottom)
.margin(this.margin)
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
// .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(false) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;

var dataUrl;
if ( this.dataType == "spectrum" ) dataUrl = "/spectrums/" + this.args.spectrum_id + ".json"
else if ( this.dataType == "set" ) dataUrl = "/sets/" + this.args.set_id + ".json"

/* Fetch data */
d3.json(dataUrl, function(error, data) {

if (this.dataType == "spectrum") {

var lines = data.data.lines,
average = [],
red = [],
green = [],
blue = [];
chart.xAxis //Chart x-axis settings
.axisLabel('Wavelength (nanometers)')
.tickFormat(d3.format('1d'));

chart.yAxis //Chart y-axis settings
.axisLabel('Intensity (%)')
.tickFormat(d3.format('%'));

var dataUrl;

if ( this.dataType == "spectrum" ) dataUrl = "/spectrums/" + this.args.spectrum_id + ".json"
else if ( this.dataType == "set" ) dataUrl = "/sets/" + this.args.set_id + ".json"

// preserve scope
var that = this;

/* Fetch data */
d3.json(dataUrl, function(error, data) {

if (that.dataType == "spectrum") {

var lines = data.data.lines,
average = [],
red = [],
green = [],
blue = [];

// Set up x and y properties like data.x and data.y
$.each(lines,function(i,data) {

if (data.wavelength == null) {

var x = data.pixel;
// change graph labels

} else var x = data.wavelength;

average.push({ y: parseInt(data.average / 2.55)/100, x: x })
red.push( { y: parseInt(data.r / 2.55)/100, x: x })
green.push( { y: parseInt(data.g / 2.55)/100, x: x })
blue.push( { y: parseInt(data.b / 2.55)/100, x: x })

});

that.graphData = that.graphData.concat([
{
values: average,
key: data.title+" (average)",
color: '#444'
},
{
values: red,
key: data.title+" (R)",
color: 'rgba(255,0,0,0.2)'
},
{
values: green,
key: data.title+" (G)",
color: 'rgba(0,255,0,0.2)'
},
{
values: blue,
key: data.title+" (B)",
color: 'rgba(0,0,255,0.2)'
}
]);

} else if (that.dataType == "set") {

var spectra = data.spectra;

$.each(spectra, function(i,spectrum) {

var average = [];

// Set up x and y properties like data.x and data.y
$.each(lines,function(i,data) {

$.each(spectrum.data.lines, function(i,data) {
if (data.wavelength == null) {

var x = data.pixel;
// change graph labels

} else var x = data.wavelength;

average.push({ y: data.average / 255, x: x })
red.push( { y: data.r / 255, x: x })
green.push( { y: data.g / 255, x: x })
blue.push( { y: data.b / 255, x: x })

});

this.graphData = this.graphData.concat([
{
values: average,
key: data.title+" (average)",
color: '#444'
},
{
values: red,
key: data.title+" (R)",
color: 'rgba(255,0,0,0.2)'
},
{
values: green,
key: data.title+" (G)",
color: 'rgba(0,255,0,0.2)'
},
{
values: blue,
key: data.title+" (B)",
color: 'rgba(0,0,255,0.2)'
}
]);

} else if (this.dataType == "set") {

var spectra = data.spectra,
average = [];

$.each(spectra, function(i,spectrum) {

// Set up x and y properties like data.x and data.y
$.each(spectrum.data.lines, function(i,data) {
if (data.wavelength == null) {

var x = data.pixel;
// change graph labels

} else var x = data.wavelength;

average.push({ y: data.average / 255, x: x })

});


});
this.graphData = this.graphData.concat([

that.graphData = that.graphData.concat([
{
values: average,
key: data.title,
color: 'rgba(200,0,0,0.5)' // use d3 color generator here
key: spectrum.title
}
]);

}

/* Enter data into the graph */
d3.select('#graph svg') //Select the <svg> element you want to render the chart in.
.datum(this.graphData) //Populate the <svg> element with chart data...
.call(this.chart) //Finally, render the chart!
// .on("mouseover",this.onmouseover)

});

this.chart = chart;

return chart;
})
});

}

/* Enter data into the graph */
d3.select('#graph svg') //Select the <svg> element you want to render the chart in.
.datum(that.graphData) //Populate the <svg> element with chart data...
.call(chart) //Finally, render the chart!
// .on("mouseover",this.onmouseover)

});

// is this necessary? we immediately add it
// with nv.addGraph(...)
this.chart = chart;

return chart;
},

update: function() {

this.width = getUrlParameter('width') || $(window).width() || this.width;
this.height = getUrlParameter('height') || this.height;

this.width = this.width - this.margin.left - this.margin.right;

$('#graph').height(this.height)
$('img.spectrum').width(this.width)
.height(100)
.css('margin-left',this.margin.left);

// update only if we're past initialization
if (this.chart) this.chart.update();

var that = this;
return (function() {
that.width = getUrlParameter('width') || $(window).width() || that.width;
that.height = getUrlParameter('height') || that.height;

that.width = that.width - that.margin.left - that.margin.right;

$('#graph').height(that.height)
$('img.spectrum').width(that.width)
.height(100)
.css('margin-left',that.margin.left);

// update only if we're past initialization
if (that.chart) {
that.chart.update();
}
})
},

/* for lines */
Expand Down
33 changes: 33 additions & 0 deletions app/assets/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,39 @@ h1,h2,h3,h4,.lead {
padding-top:10px;
}

#embed {
font-size:12px;
border:1px solid #ddd;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
}

#embed .credit {
float:right;
padding-top:10px;
padding-right:10px;
}

#embed .social {
padding-top:10px;
padding-right:10px;
font-size:14px;
}

#embed .social a {
padding:0 5px;
}

#embed .social a:hover {
text-decoration:none;
}

#embed .social a:hover .icon {
color:#88f;
}

footer {
padding-bottom:200px;
color:#777;
Expand Down
15 changes: 13 additions & 2 deletions app/views/sets/embed2.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
<div id="embed">
<div id="graph"></div>

<script type="text/javascript">

var sw;
jQuery(document).ready(function($) {
SpectralWorkbench.initialize({ set_id: <%= @set.id %> });
sw = new SpectralWorkbench({ set_id: <%= @set.id %> });
})

</script>

<div class="container-fluid">
<div class="col span12">

<h2><a target="_blank" href="/sets/<%= @set.id %>"><%= @set.title %></a></h2>

<p style="text-align:center;">
<p class="credit">
by <a target="_blank" href="/profile/"><%= @set.author %></a> on <img src="/images/spectralworkbench.png" /> <a target="_blank" href="/">SpectralWorkbench.org</a>
</p>
<p class="social">
<a href=""><i class="icon icon-twitter"></i></a>
<a href=""><i class="icon icon-facebook"></i></a>
</p>

<table class="table">
<tr>
<th>Spectrum</th>
<th>Author</th>
<th>Tools</th>
</tr>
<% @set.spectra.each do |spectrum| %>
<tr>
Expand All @@ -31,3 +40,5 @@

</div>
</div>
</div>

12 changes: 10 additions & 2 deletions app/views/spectrums/embed2.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
<div id="embed">
<img class="spectrum" src="<%= @spectrum.photo.url(:large) %>" />

<div id="graph"></div>

<script type="text/javascript">

var sw;
jQuery(document).ready(function($) {
// SpectralWorkbench.initialize({ spectrum_id: <%= @spectrum.id %> });
sw = new SpectralWorkbench({ spectrum_id: <%= @spectrum.id %> });
})

</script>

<div class="container-fluid">
<div class="col span12">

<h2><a target="_blank" href="/spectrums/<%= @spectrum.id %>"><%= @spectrum.title %></a></h2>

<p style="text-align:center;">
<p class="credit">
by <a target="_blank" href="/profile/"><%= @spectrum.author %></a> on <img src="/images/spectralworkbench.png" /> <a target="_blank" href="/">SpectralWorkbench.org</a>
</p>
<p class="social">
<a href=""><i class="icon icon-twitter"></i></a>
<a href=""><i class="icon icon-facebook"></i></a>
</p>

</div>
</div>
</div>

0 comments on commit 8db03fe

Please sign in to comment.