Skip to content

Instantly share code, notes, and snippets.

@erichiggins

erichiggins/jsbin.bahijuve.css

Created March 16, 2014 18:19
Show Gist options
  • Save erichiggins/9587551 to your computer and use it in GitHub Desktop.
Save erichiggins/9587551 to your computer and use it in GitHub Desktop.
Download ZIP
Quick trajectory chart using D3.js. http://jsbin.com/bahijuve/
Raw
jsbin.bahijuve.css
.line {
fill: none;
stroke: lightblue;
stroke-width: 1.5px;
stroke-linecap: butt;
shape-rendering: geometricPrecision ;
}
.axis--x text {
}
.axis--y text {
}
.axis text {
font-size: 12px;
font-family: helvetica;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Raw
jsbin.bahijuve.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=chart></div>
</body>
</html>
Raw
jsbin.bahijuve.js
var trajectory = [
{
'lead': 0.0,
'energy': 2728.3372547313193,
'drop': -2.0,
'range': 0.0,
'time': 0.0,
'velocity': 2650.0,
'windage': -0.0,
'momentum': 2.0591224564009956,
'mach': 2.3735950414823304
},
{
'lead': 20.650294578883212,
'energy': 2368.1272143128713,
'drop': 1.8550641470304157,
'range': 100.0,
'time': 0.11733121919820008,
'velocity': 2468.8764761418242,
'windage': 0.7254758871479394,
'momentum': 1.918384526076901,
'mach': 2.211363381812303
},
{
'lead': 42.841254256436486,
'energy': 2046.0653300553893,
'drop': -0.0046806202183119865,
'range': 200.0,
'time': 0.2434162173661164,
'velocity': 2294.862110413941,
'windage': 2.9910452914893115,
'momentum': 1.783170605998916,
'mach': 2.0554993683638516
},
{
'lead': 66.74562485759347,
'energy': 1758.8722306188579,
'drop': -8.479948734233997,
'range': 300.0,
'time': 0.37923650487269017,
'velocity': 2127.7176365431214,
'windage': 6.9693489708226535,
'momentum': 1.6532947797307145,
'mach': 1.9057886912351911
},
{
'lead': 92.5620574005842,
'energy': 1504.2292419137752,
'drop': -24.652085205635323,
'range': 400.0,
'time': 0.5259207806851375,
'velocity': 1967.6772338248895,
'windage': 12.858915552467039,
'momentum': 1.5289390109878578,
'mach': 1.7624411039412928
},
{
'lead': 120.51287449520729,
'energy': 1280.3748958372362,
'drop': -49.8249784206003,
'range': 500.0,
'time': 0.6847322414500414,
'velocity': 1815.3711215325127,
'windage': 20.881937213019533,
'momentum': 1.4105929973771538,
'mach': 1.6260210915169016
},
{
'lead': 150.86411855595924,
'energy': 1082.0978284762675,
'drop': -85.57811099450812,
'range': 600.0,
'time': 0.857182491795223,
'velocity': 1668.8992138199978,
'windage': 31.30423247367535,
'momentum': 1.2967803202440469,
'mach': 1.4948267542101534
},
{
'lead': 183.90729961036658,
'energy': 912.3390839043768,
'drop': -133.84633791724397,
'range': 700.0,
'time': 1.0449278386952647,
'velocity': 1532.4100352485566,
'windage': 44.417257708989695,
'momentum': 1.1907244966017148,
'mach': 1.3725739098806555
},
{
'lead': 219.88990831478776,
'energy': 770.2029780275416,
'drop': -196.9564848707156,
'range': 800.0,
'time': 1.2493744790612942,
'velocity': 1407.9895907217588,
'windage': 60.46851065937036,
'momentum': 1.0940464092958566,
'mach': 1.2611309852814727
},
{
'lead': 259.00256877181886,
'energy': 654.3536548101,
'drop': -277.6420134867392,
'range': 900.0,
'time': 1.4716055043853344,
'velocity': 1297.7860857474063,
'windage': 79.64879973693293,
'momentum': 1.0084152727423519,
'mach': 1.1624221200131344
},
{
'lead': 301.3369401252381,
'energy': 561.943190604933,
'drop': -379.0108376620239,
'range': 1000.0,
'time': 1.7121417052570347,
'velocity': 1202.6605180250676,
'windage': 102.05009273378771,
'momentum': 0.9345001056951967,
'mach': 1.077218506479574
}
];
var ranges = _.pluck(trajectory, 'range');
var drops = _.pluck(trajectory, 'drop');
var width = 600;
var height = 300;
// Create the SVG.
var svg = d3.select('#chart').append('svg')
.datum(trajectory) // Provides the dataset.
.attr('width', width)
.attr('height', height)
.append('g')
// Translate the SVG to let the axis & labels fit.
.attr('transform', 'translate(32,-30)');
// Define the X-axis data boundaries for scale.
var x = d3.scale.linear()
.domain([_.min(ranges), _.max(ranges)])
.range([0, width - 60]);
// Define the Y-axis data boundaries for scale.
var y = d3.scale.linear()
.domain([50, _.min(drops) - 21])
.range([50, height-20]);
// Define the X-axis scale and orientation.
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
// Define the Y-axis scale and orientation.
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
// Define the trajectory line.
var line = d3.svg.line()
.x(function(d) { return x(d.range); })
.y(function(d) { return y(d.drop); });
// Add the Y-axis to the SVG.
svg.append('g')
.attr('class', 'axis axis--y')
.attr('transform', 'translate(10,0)')
.call(yAxis);
// Add the X-axis to the SVG.
svg.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(10, ' + (height -20) + ')')
.call(xAxis)
// The following rotates the X axis labels.
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '.15em')
.attr('transform', 'rotate(-45)');
// Add the trajectory line to the SVG.
svg.append('path')
.attr('class', 'line')
.attr('d', line)
.attr('transform', 'translate(10, 0)');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment