I/Q v1

i-q-v1.markdown

I/Q v1

A Pen by Kaithar on CodePen.

License.

index.html

<div class="graph"></div>

script.js

var duration = 50,
  limit = 45 * 1000,
  now = new Date(Date.now() - 0);

var width = 400,
  height = 200

function zero(now, offset) {
  return 0
}

function half(now, offset) {
  return 0.5
}

function cycle_percent(now, one_cycle, phase_offset) {
  return (((now % one_cycle) / one_cycle) - phase_offset) % 1.0
}

function xat_phased(now, offset) {
  var one_cycle = 5000
  return Math.sin(cycle_percent(now, one_cycle, offset) * Math.PI * 2)
}

function mix(now, offset) {
  return groups.ref_mixed_i.x_func(now, groups.ref_i.phase + offset) +
    groups.ref_mixed_q.x_func(now, groups.ref_q.phase + offset)
}

function square(now, offset) {
  var one_cycle = 50000,
    cp = cycle_percent(now, one_cycle, offset)
  if (cp > 0.5) return -1
  else return 1
}

function mixed_i(now, offset) {
  return groups.ref_i.x_func(now, groups.ref_i.phase + offset) *
    groups.ref_i_input.x_func(now, groups.ref_i_input.phase + offset)
}

function mixed_q(now, offset) {
  return groups.ref_q.x_func(now, groups.ref_q.phase + offset) *
    groups.ref_q_input.x_func(now, groups.ref_q_input.phase + offset)
}

var groups = {
  zero_i: {
    color: 'grey',
    x_func: zero,
    phase: 0
  },
  zero_q: {
    color: 'grey',
    x_func: zero,
    phase: 0
  },
  zero_r: {
    color: 'grey',
    x_func: zero,
    phase: 0
  },
  zero_m: {
    color: 'grey',
    x_func: zero,
    phase: 0
  },
  ref_i: {
    color: 'black',
    x_func: xat_phased,
    phase: 0
  },
  ref_q: {
    color: 'black',
    x_func: xat_phased,
    phase: 0.25
  },
  ref_i_input: {
    color: 'green',
    x_func: square,
    phase: 0
  },
  ref_q_input: {
    color: 'blue',
    x_func: half,
    phase: 0
  },
  ref_mixed_i: {
    color: 'green',
    x_func: mixed_i,
    phase: 0
  },
  ref_mixed_q: {
    color: 'blue',
    x_func: mixed_q,
    phase: 0
  },
  ref_rf: {
    color: 'red',
    x_func: mix,
    phase: 0
  }
}

var x = d3.scaleTime()
  .domain([now - limit, now - duration])
  .range([0, width])

var xaxis = d3.axisBottom(x)

var y = d3.scaleLinear()
  .domain([-20, 20])
  .range([height, 0])

var line = d3.line().curve(d3.curveBasis)
  .x(function(d, i) {
    return x(d[0])
  })
  .y(function(d) {
    return y(d[1])
  })

var svg = d3.select('.graph').append('svg')
  .attr('class', 'chart')
  .attr('width', 3 * (width + 350))
  .attr('height', 3 * (height + 50))

var axis = svg.selectAll(".x.axis").data(d3.range(2, 3)).enter()
  .append('g')
  .attr('class', 'x axis')
  .attr('transform', function(d) {
    return 'translate(0,' + ((height + 10) * d) + ')'
  })
  .call(xaxis)

var paths_i = svg.append('g').attr('class', 'trace').attr('transform', 'translate(0,' + 20 + ')')
var paths_mix = svg.append('g').attr('class', 'trace').attr('transform', 'translate(0,' + (height * 1 + 30) + ')')
var paths_q = svg.append('g').attr('class', 'trace').attr('transform', 'translate(0,' + (height * 2 + 40) + ')')
var paths_rf = svg.append('g').attr('class', 'trace').attr('transform', 'translate(' + (width + 50) + ',' + (height * 1 + 30) + ')')

var paths = d3.select('g.trace')

function make_path(name, path_group) {
  var group = groups[name]
  group.data = d3.range(limit / duration, 0, -1).map(function(d) {
    tt = now - d * duration
    return [tt, group.x_func(tt, group.phase) * 10]
  })
  group.path = path_group.append('path')
    .data([group.data])
    .attr('class', name + ' group')
    .style('stroke', group.color)
}

make_path('zero_i', paths_i)
make_path('zero_m', paths_mix)
make_path('zero_q', paths_q)
make_path('zero_r', paths_rf)
make_path('ref_i', paths_i)
make_path('ref_i_input', paths_i)
make_path('ref_mixed_i', paths_mix)
make_path('ref_q', paths_q)
make_path('ref_q_input', paths_q)
make_path('ref_mixed_q', paths_mix)
make_path('ref_rf', paths_rf)

function tick() {
  now = new Date()
    //console.log(now-0)
    // Add new values
  for (var name in groups) {
    var group = groups[name]
    group.data.push([now - 0, group.x_func(now, group.phase) * 10])
    group.path.attr('d', line)
  }

  // Shift domain
  x.domain([now - limit, now - duration])

  // Slide x-axis left
  axis.transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .call(xaxis)
    .on('end', tick)

  // Slide paths left
  paths.attr('transform', null)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .attr('transform', 'translate(' + x(now - limit) + ')')

  // Remove oldest data point from each group
  for (var name in groups) {
    var group = groups[name]
    while (group.data[0][0] < now - limit)
      group.data.shift()
  }
}

tick()

scripts

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.js"></script>

style.css

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .graph .axis {
            stroke-width: 1;
        }

        .graph .axis .tick line {
            stroke: black;
        }

        .graph .axis .tick text {
            fill: black;
            font-size: 0.7em;
        }

        .graph .axis .domain {
            fill: none;
            stroke: black;
        }

        .graph .group {
            fill: none;
            stroke: black;
            stroke-width: 1.5;
        }