manniru
12/10/2016 - 10:29 AM

Quick trajectory chart using D3.js. http://jsbin.com/bahijuve/

Quick trajectory chart using D3.js. http://jsbin.com/bahijuve/

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)');
<!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>
.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;
}