angleChart = {
const realData = vl.markLine()
.data(dataForAngleBetweenRubiscosAndItsNeighbors)
.transform(
vl.groupby(['reg'])
.density('angle')
.bandwidth(5)
.cumulative(false)
.groupby(['reg','innerConcentration', 'numRubInner', 'numRub', 'volume']),
)
.encode(
vl.x({
axis:{
grid: false,
labelFontSize: 15,
titleFontSize: 15,
tickCount: 3
}
}).fieldQ('value').title('Angle between a referece RuBisCO and its nearest neighbors (deg)'),
vl.y({
axis:{
grid: false,
labelFontSize: 15,
titleFontSize: 15,
tickCount: 5
}
}).fieldQ('density'),
vl.color().fieldQ('innerConcentration').title([`Inner Rubisco Concentration (µM)`]).scale({scheme: 'viridis', domain: [200, 600]}).sort('descending').legend({orient: 'bottom', titleLimit: 300, width: 400, titleFontSize: 15, labelFontSize: 15, tickCount: 5}),
vl.tooltip([
{ field: 'reg', title: 'reg' },
{ field: 'innerConcentration', title: 'RuBisCO concentration (µM)', format: ".0f"}
])
)
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'),
vl.y({axis:{grid: false}}).fieldQ('density'), // .scale({type: 'log'}),
vl.color({legend: {title: 'hello'}}).value('darkred').title('random'),
vl.tooltip().fieldN('numRub')
)
return vl
.layer(realData, randomData)
.width(750)
.height(400)
.config({view: {stroke: "transparent"}})
.render({renderer: 'svg'})
}
rubDiamInNm = rubiscoDiameter * pixelSize
70*pixelSize
avogradoNumber = 6.02214076 * 1E23
1E2
md`# Scratch`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
