Skip to content

Instantly share code, notes, and snippets.

@alecrajeev

alecrajeev/index.html

Last active October 14, 2015 01:56
Show Gist options
  • Save alecrajeev/0de57794f4483b84b268 to your computer and use it in GitHub Desktop.
Save alecrajeev/0de57794f4483b84b268 to your computer and use it in GitHub Desktop.
Download ZIP
Bifurcation Plot
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Bifurcation Plot </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<style>
svg {
border: 1px solid #f0f;
}
.tick-minor {
display: none;
}
.tick-minor line{
shape-rendering: crispEdges;
}
.axis {
font: 12px sans-serif;
fill: #777
}
.axis path {
display: none;
}
.axis line {
stroke-width: 1px;
stroke: #ccc;
}
.line {
fill: none;
stroke-width: 1px;
stroke: #AAA;
}
.legend {
padding: 5px;
font: 14px sans-serif;
box-shadow: 2px 2px 1px #888;
}
.chartTitle {
position: absolute;
left: 350px;
font: 30px sans-serif;
}
.circle {
/* fill: rgba;
fill-opacity: .02;*/
fill: rgba(0,0,255,.05);
}
.dataCircle {
fill: steelblue;
}
</style>
</head>
<body>
<div class="graph"></div>
<div>
<input type="button" onclick="next()" value="Next!"/>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script type="text/javascript" src="plotTheoreticalDataScript.js"></script>
Raw
plotTheoreticalDataScript.js
// experimental data driver located at
// http://sine.ni.com/apps/utf8/niid_web_display.download_page?p_id_guid=88AF154718E95366E04400144FB7D21D
var margin = {top: 50, right: 10, bottom: 60, left: 80};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select(".graph").append("svg") // data join
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.range([height,0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-height)
.tickPadding(8)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-width)
.tickPadding(8)
var drawCircles = function(i) {}
var next = function() {}
queue()
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed2_0.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed2_25.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed2_5.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed2_75.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed3_0.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed3_25.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed3_5.json")
.defer(d3.json, "https://raw.githubusercontent.com/alecrajeev/BifurcationPlot/master/theory_data/processed3_75.json")
.await(makeMyChart);
function makeMyChart(err, data0, data1, data2, data3, data4, data5, data6, data7) {
if (err)
console.error(err);
xScale.domain([2.0,4.0]);
yScale.domain([0.0,1.0]);
var xCoordinates = [];
var xCoordinatesNames = [];
var dataWrapper = [data0,data1,data2,data3,data4,data5,data6,data7];
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.selectAll("g")
.selectAll("text")
.text(function(d) {return d; });
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis)
.selectAll("g")
.selectAll("text")
.text(function(d) {return d; });
svg.append("g")
.attr("class", "alabel")
.attr("transform", "translate(" + (width/2 - 80) + "," + (height + 40) + ")")
.append("text")
.text("r");
svg.append("g")
.attr("class", "alabel")
.attr("transform", "translate(" + "-50" + "," + (height/2) + ")")
.append("text")
.text("x");
drawCircles = function(i) {
var circleContent = svg.selectAll(".circleContent")
.data(dataWrapper[i]);
var circleEnter = circleContent.enter()
.append("g")
.attr("transform", function (d) {
return "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")";
});
circleEnter.append("circle")
.attr("class", "circle")
.attr("r", ".5");
var updateSelection = svg.selectAll(".circleContent")
.attr("transform", function (d) {
return "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")";
});
updateSelection.select("circle")
.attr("class", "circle")
.attr("r", ".5");
console.log("here" + i);
return i;
}
// drawCircles(3);
var c = 3;
next = function() {
c = (c+1) % 8;
drawCircles(c);
}
console.log("here");
for (i = 0; i < 8; i++)
console.log(drawCircles(i));
// drawCircles(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment