plotGrid("VOLCANIC_ROCK_VOUCHER_9500")
plotGrid("VOLCANIC_ROCK_VOUCHER_9750")
plotGrid("VOLCANIC_ROCK_VOUCHER_10000")
plotGrid("VOLCANIC_ROCK_VOUCHER_10250")
plotGrid("VOLCANIC_ROCK_VOUCHER_10500")
logFileText = chosenLogFile?.text() || sampleLogFileText
chunks = {
const chunks = logFileText.split("\n\n\n\n");
const sandbox = chunks[0].split("Sandbox logs:\n")[1];
const activities = chunks[1].split("Activities log:\n")[1];
const trades = JSON.parse(chunks[2].split("\nTrade History:\n")[1]);
return {
sandbox,
activities,
trades
};
}
logger = JSON.parse(`[${chunks.sandbox.replaceAll("}\n{", "},{")}]`).map(
(d) => ({
...d
})
)
prices = d3.csvParse(chunks.activities.replace(/;/g, ","), d3.autoType)
trades = chunks.trades
tradesAndPrices = trades.map((trade) => {
const price = prices.find(
(price) =>
trade.timestamp === price.timestamp && trade.symbol === price.product
);
return {
...trade,
...price
};
})
tidyPrices = prices.flatMap(
({
timestamp,
product,
bid_price_1,
bid_volume_1,
bid_price_2,
bid_volume_2,
bid_price_3,
bid_volume_3,
ask_price_1,
ask_volume_1,
ask_price_2,
ask_volume_2,
ask_price_3,
ask_volume_3,
mid_price
}) => [
{
type: "bid_3",
timestamp,
product,
price: bid_price_3,
volume: bid_volume_3,
mid_price
},
{
type: "bid_2",
timestamp,
product,
price: bid_price_2,
volume: bid_volume_2,
mid_price
},
{
type: "bid_1",
timestamp,
product,
price: bid_price_1,
volume: bid_volume_1,
mid_price
},
{
type: "ask_1",
timestamp,
product,
price: ask_price_1,
volume: -ask_volume_1,
mid_price
},
{
type: "ask_2",
timestamp,
product,
price: ask_price_2,
volume: -ask_volume_2,
mid_price
},
{
type: "ask_3",
timestamp,
product,
price: ask_price_3,
volume: -ask_volume_3,
mid_price
}
]
)
tidyTraderTrades = tradesAndPrices.flatMap((d) => [
{
...d,
trader: d.buyer,
position: d.quantity,
delta: -(d.quantity * d.price)
},
{
...d,
trader: d.seller,
position: -d.quantity,
delta: d.quantity * d.price
}
])
traders = new Set(["SUBMISSION", ...tidyTraderTrades.map((d) => d.trader)])
timestampRange = settle(viewof unsettledTimestampRange)
isWithinTimestampRange = (d) =>
timestampRange[0] <= d.timestamp && d.timestamp <= timestampRange[1]
plotPricesAndVolume = (product) => {
const scopedPrices = prices.filter(
(d) => d.product == product && isWithinTimestampRange(d)
);
const scopedTrades = trades.filter(
(d) => d.symbol == product && isWithinTimestampRange(d)
);
const scopedTidyPrices = tidyPrices.filter(
(d) => d.product == product && isWithinTimestampRange(d)
);
return Plot.plot({
title: `${product} price and order depth`,
width,
height: 300,
caption:
"Hover for tooltip. Trades fill color indicates buyer, stroke color indicates seller.",
y: {
label: "price"
},
color: {
label: "volume",
legend: true,
scheme: "BuRd"
},
symbol: {
domain: ["volume", "SUBMISSION buy", "SUBMISSION sell", "Other trades"],
legend: true
},
marks: [
Plot.lineY(scopedPrices, {
x: "timestamp",
y: "bid_price_1",
z: null,
tip: true,
stroke: "bid_volume_1"
}),
Plot.lineY(scopedPrices, {
x: "timestamp",
y: "ask_price_1",
z: null,
tip: true,
stroke: (d) => -d.ask_volume_1
}),
Plot.dot(scopedTidyPrices, {
x: "timestamp",
y: "price",
fill: "volume",
symbol: (d) => "volume"
}),
obviousTrades
? Plot.ruleX(scopedTrades, {
x: "timestamp",
stroke: (d) => traderColorScale.apply(d.seller),
filter: (d) =>
d.buyer === "SUBMISSION" || d.seller === "SUBMISSION",
tip: true,
channels: {
buyer: "buyer",
seller: "seller",
quantity: "quantity"
}
})
: undefined,
showTrades != "None"
? Plot.dot(scopedTrades, {
x: "timestamp",
y: "price",
stroke: (d) => traderColorScale.apply(d.seller),
fill: (d) => traderColorScale.apply(d.buyer),
symbol: (d) =>
d.buyer === "SUBMISSION"
? "SUBMISSION buy"
: d.seller === "SUBMISSION"
? "SUBMISSION sell"
: "Other trades",
filter: (d) =>
showTrades === "Just SUBMISSION"
? d.buyer === "SUBMISSION" || d.seller === "SUBMISSION"
: true,
tip: true,
channels: {
buyer: "buyer",
seller: "seller",
quantity: "quantity"
}
})
: undefined,
Plot.lineY(
scopedPrices,
Plot.windowY({
x: "timestamp",
y: "mid_price",
k: kMovingAverage,
reduce: "mean"
})
)
]
});
}
listTrades = (product) => {
const scopedTrades = trades.filter(
(d) => d.symbol == product && isWithinTimestampRange(d)
);
return Inputs.table(scopedTrades, {
columns: ["timestamp", "buyer", "seller", "price", "quantity"],
height: 200
});
}
plotGlobalPnl = () => {
const scopedPrices = prices.filter((d) => isWithinTimestampRange(d));
return Plot.plot({
title: "Product profit and loss",
color: {
legend: true
},
width,
marks: [
Plot.ruleY([0]),
Plot.lineY(scopedPrices, {
x: "timestamp",
y: "profit_and_loss",
stroke: "product",
curve: "step-after",
tip: true
})
]
});
}
globalPnl = plotGlobalPnl()
plotPnl = (product, { scale } = { scale: true }) => {
const scopedPrices = prices.filter(
(d) => d.product == product && isWithinTimestampRange(d)
);
return Plot.plot({
title: `${product} profit and loss`,
color: globalPnl.scale("color"),
width: scale ? width : undefined,
marks: [
Plot.ruleY([0]),
Plot.lineY(scopedPrices, {
x: "timestamp",
y: "profit_and_loss",
stroke: "product",
curve: "step-after",
tip: true,
})
]
});
}
plotRootedMidVolume = (product, { scale } = { scale: true }) => {
const scopedPrices = tidyPrices.filter(
(d) => d.product == product && isWithinTimestampRange(d)
);
const scopedTrades = tidyTraderTrades.filter(
(d) => d.symbol === product && isWithinTimestampRange(d)
);
return Plot.plot({
title: `${product} volume around mid price`,
width: scale ? width : undefined,
symbol: {
domain: ["volume", "SUBMISSION buy", "SUBMISSION sell", "Other trades"],
legend: true
},
fx: {
domain: ["ask_3", "ask_2", "ask_1", "bid_1", "bid_2", "bid_3", "trades"]
},
y: {
label: "price - mid_price"
},
color: {
label: "volume",
legend: true,
scheme: "BuRd"
},
marks: [
Plot.ruleY([0]),
Plot.dot(
scopedPrices.filter((d) => d.price - d.mid_price > -100),
{
x: "timestamp",
y: (d) => d.price - d.mid_price,
tip: true,
fill: "volume",
fx: "type"
}
),
showTrades != "None"
? Plot.dot(scopedTrades, {
x: "timestamp",
y: (d) => d.price - d.mid_price,
stroke: (d) => traderColorScale.apply(d.seller),
fill: (d) => traderColorScale.apply(d.buyer),
symbol: (d) =>
d.buyer === "SUBMISSION"
? "SUBMISSION buy"
: d.seller === "SUBMISSION"
? "SUBMISSION sell"
: "Other trades",
filter: (d) =>
showTrades === "Just SUBMISSION"
? d.buyer === "SUBMISSION" || d.seller === "SUBMISSION"
: true,
tip: true,
fx: (d) => "trades",
channels: {
buyer: "buyer",
seller: "seller",
quantity: "quantity"
}
})
: undefined
]
});
}
traderColorScale = Plot.scale({
color: { domain: traders }
})
plotPositionCumSum = (symbol, { scale } = { scale: true }) => {
const scopedTrades = tidyTraderTrades.filter((d) =>
isWithinTimestampRange(d)
);
return Plot.plot({
title: `${symbol} position per trader`,
width: scale ? width : undefined,
color: {
...traderColorScale,
legend: true
},
fx: {
domain: [...traders]
},
marks: [
Plot.frame(),
Plot.ruleY([0]),
Plot.lineY(
scopedTrades.filter((d) => d.symbol === symbol),
Plot.mapY("cumsum", {
stroke: "trader",
x: "timestamp",
y: "position",
// stroke: "green",
curve: "step-after",
tip: true
// fill: "quantity",
})
)
]
});
}
plotTrades = (product) => {
const scopedTrades = tidyTraderTrades.filter(
(d) => d.symbol === product && isWithinTimestampRange(d)
);
return Plot.plot({
title: `${product} inter-trader trade matrix`,
color: {
scheme: "Plasma"
},
marginLeft: 100,
marks: [
Plot.frame(),
Plot.cell(
scopedTrades,
Plot.group(
{ fill: "sum" },
{
y: "buyer",
x: "seller",
fill: "quantity",
tip: true
}
)
),
Plot.text(
scopedTrades,
Plot.group(
{ text: "sum" },
{
y: "buyer",
x: "seller",
text: "quantity",
fill: "black"
}
)
)
]
});
}
observableFrameworkThemeAirStyle // need to evaluate to apply the CSS rules
function plotGrid(product) {
const prices = plotPricesAndVolume(product);
const position = plotPositionCumSum(product, { scale: false });
const rooted = plotRootedMidVolume(product, { scale: false });
const pnl = plotPnl(product, { scale: false });
const tradesList = listTrades(product);
const tradesPlot = plotTrades(product);
return htl.html`
<div class="grid grid-cols-2">
<div class="card grid-colspan-2">${prices}</div>
<div class="card">${rooted}</div>
<div class="card">${position}</div>
<div class="card">${tradesPlot}${tradesList}</div>
<div class="card">${pnl}</div>
</div>
<hr />`;
}
logger
Type SQL, then Shift-Enter. Ctrl-space for more options.
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.
