---
# System prepended metadata

title: Figure 1

---

# Figure 1
![](https://i.imgur.com/0xXNNaO.png)

---

# Figure 2

{ 
  const realData = vl.markLine()
    .data(allAngles)
    .transform(
      //vl.filter(`datum.reg === 86`),
      vl.filter(`datum.distance < ${rubiscoDiameter * 2}`),
      vl.filter(`datum.inner == true`),
      vl.calculate(`1000*(datum.numRubInner/datum.volume)/${avogradoNumber}`).as('concentration'),
      vl.filter(`datum.concentration > 200`),
      vl.groupby(['reg'])
        .density('angle')
        .bandwidth(5)
        .cumulative(false)
        .groupby(['reg','concentration', 'numRubInner', 'numRub', 'volume']),
    )
    .encode(
      vl.x({axis:{grid: false}}).fieldQ('value').title('Angle between a referene RuBisCo and its nearest neighbors (deg)'), //.sort(vl.field('count').order('descending')), //.order('descending'),
      vl.y({axis:{grid: false, tickCount: 5}}).fieldQ('density'), // .scale({type: 'log'}),
      // vl.x().fieldQ('value'),
      //vl.y().fieldQ('density'), // .scale({type: 'log'}),
      vl.color().fieldQ('concentration').title([`Rubisco Concentration (µM)`]).scale({scheme: 'plasma'}).sort('descending').legend({orient: 'bottom', titleLimit: 300, width: 400}),
      // vl.strokeWidth().fieldQ('count')
      vl.tooltip(['reg', 'concentration', 'numRubInner', 'numRub', 'volume']) //.fieldN('reg')
    )

  const randomData = vl.markLine({size: 5})
    .data(randomAngles)
        .transform(
      vl.groupby(['reg']).density('angle').cumulative(false).groupby(['numRub'])
    )
    .encode(
      vl.x({axis:{grid: false}}).fieldQ('value'), //.sort(vl.field('count').order('descending')), //.order('descending'),
      vl.y({axis:{grid: false}}).fieldQ('density'), // .scale({type: 'log'}),
      // vl.x().fieldQ('value'),
      //vl.y().fieldQ('density'), // .scale({type: 'log'}),
      vl.color({legend: {title: 'hello'}).value('darkgreen').title('random'),
      // vl.strokeWidth().fieldQ('count')
      vl.tooltip().fieldN('numRub')
    )
  
  return vl
    .layer(realData, randomData)
    .width(750)
    .height(400)
    .config({view: {stroke:  "transparent"}})
    .render({renderer: 'svg'})
}