Skip to content

Instantly share code, notes, and snippets.

@Jackbennett
Last active August 29, 2015 13:56
Show Gist options
  • Save Jackbennett/9240151 to your computer and use it in GitHub Desktop.
Save Jackbennett/9240151 to your computer and use it in GitHub Desktop.
$(document).ready(function(){
$('#mixes a').click(function(){
var id = $(this).attr('data-mix_id')
$('#scatter').empty()
scatter(id, d3.select('#scatter'));
})
var chart = $("#scatter svg"),
aspect = chart.width() / chart.height(),
container = chart.parent();
$(window).on("resize", function() {
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize")
});
function scatter(data, selection){
data.forEach(function(d) {
// Time and speed to ON or OFF but don't overlap as percents.
if( ! d.HST || d.HST === 0){ d.HST = 0 } else { d.HST = 90 }
if( ! d.CRS1 || d.CRS1 === 0){ d.CRS1 = 0 } else { d.CRS1 = 80 }
if( ! d.CRS2 || d.CRS2 === 0){ d.CRS2 = 0 } else { d.CRS2 = 85 }
});
var margin = {
top: 30,
right: 45,
bottom: 20,
left: 45
};
var width = selection.style('width').replace('px', '') - margin.left - margin.right;
var height = selection.style('height').replace('px', '') - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var x = d3.time.scale()
.domain(d3.extent(data, function (d) {
return parseDate(d.time);
}))
.range([0, width]);
var yl = d3.scale.linear()
.domain([0, d3.max( data, function(d){ return Math.max(d.S1,d.S2) }) ])
.range([height, 0]);
var yr = d3.scale.linear()
.domain([0, d3.max( data, function(d){ return Math.max(d.KG) }) ])
.range([height, 0]);
var yp = d3.scale.linear()
.domain([0, 100])
.range([height, 0]);
var line = function(d, sensor){
if(sensor === 'CRS1' || sensor === 'CRS2' || sensor === 'HST'){
svg.select("." + sensor)
.style("stroke-dasharray", "3, 3" )
return d3.svg.line()
.interpolate("step-after")
.x(function (d) {
return x(parseDate(d.time));
})
.y(function (d, i) {
return yp(d[sensor]);
});
}
if(sensor === 'KG'){
return d3.svg.line()
.x(function (d) {
return x(parseDate(d.time));
})
.y(function (d, i) {
return yr(d[sensor]);
});
}
if(sensor === 'S1' || sensor === 'S2'){
return d3.svg.line()
.interpolate("monotone")
.x(function (d) {
return x(parseDate(d.time));
})
.y(function (d, i) {
return yl(d[sensor]);
});
}
}
var zoom = d3.behavior.zoom()
.x(x)
.on("zoom", zoomed);
svg = selection.append("svg:svg")
.attr('width', '100%')
.attr('height', '100%')
.attr('preserveAspectRatio','xMidYMid meet')
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
svg.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr('preserveAspectRatio','xMidYMid meet')
.attr("class", "plot");
var make_x_axis = function () {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10);
};
var make_y_axis = function () {
return d3.svg.axis()
.scale(yl)
.orient("left")
.ticks(10);
};
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.append("g")
.attr("class", "y grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
Object.keys(data[0]).forEach(function(key){
chartBody.append("svg:path")
.datum(data)
.attr("class", key)
.attr("d", line(this,key) );
})
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0 - margin.top)
.attr("width", width)
.attr("height", height + margin.top + margin.bottom);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10);
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
var ylAxis = d3.svg.axis()
.scale(yl)
.orient("left")
.ticks(10);
svg.append("g")
.attr("class", "y yl axis")
.call(ylAxis);
var yrAxis = d3.svg.axis()
.scale(yr)
.orient("right")
.ticks(10);
svg.append("g")
.attr("class", "y yr axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yrAxis);
function zoomed() {
svg.select(".CRS1")
.attr("class", "CRS1")
.attr("d", line(this,'CRS1'));
svg.select(".CRS2")
.attr("class", "CRS2")
.attr("d", line(this,'CRS2'));
svg.select(".HST")
.attr("class", "HST")
.attr("d", line(this,'HST'));
svg.select(".S1")
.attr("class", "S1")
.attr("d", line(this,'S1'));
svg.select(".S2")
.attr("class", "S2")
.attr("d", line(this,'S2'));
svg.select(".KG")
.attr("class", "KG")
.attr("d", line(this,'KG'));
svg.select(".x.axis").call(xAxis);
svg.select(".x.grid")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment