{
// const sortedSellData = aobData.sell.sort((a, b) => b.level - a.level);
const sellPrices = aobData.sell.map(priceData => priceData.price);
const sellSizes = aobData.sell.map(priceData => parseInt(priceData.size));
const buyPrices = aobData.buy.map(priceData => priceData.price);
const buySizes = aobData.buy.map(priceData => parseInt(priceData.size));
const allSizes = [...buySizes, ...sellSizes];
const allPrices = [...sellPrices, ...buyPrices];
const whiteSpaceToChartWidthRatio = (allPrices.length-1)*chartDimensions.barInnerPadding/chartDimensions.temWidth;
// I don't think bandwidth is necessary give the paddingInner
const xScale = d3.scaleBand()
.domain(Array(allPrices.length).fill(0).map((item,index) => item + index))
.range([0, chartDimensions.temWidth])
.paddingInner(whiteSpaceToChartWidthRatio);
const yScale = d3.scaleLinear()
.domain(d3.extent(allSizes, d => d))
.range([8, chartDimensions.height])
const svg = html`<svg width=${chartDimensions.temWidth} height=${chartDimensions.height} style="border: 1px dashed darkorange;
background-color: #242424"></svg>`;
const selection = d3.select(svg)
.selectAll('rect')
.data(allSizes)
.enter()
.append('rect')
.attr('x', (d, i) => xScale(i))
.attr('y', d => chartDimensions.height - yScale(d))
.attr('width', xScale.bandwidth())
.attr('height', d => yScale(d))
.attr('stroke', (_, i) => i > 9 ? '#F76054' : '#3896E3')
.attr('stroke-width', 1)
.attr('fill', (_, i) => i > 9 ? '#F76054' : '#3896E3')
console.log(selection);
return svg;
}
chartDimensions = ({ width: 484, height: 130, expandedWidth: 918, temWidth: 918 - 38 + 12, barWidth: 38, barInnerPadding: 6 })
{
let currentViewBox = '0 0 918 130'
const buttonExpand = html`<button>Expand/Collapse</button>`
const allSizes = [...aobData.sell.map(priceData => parseInt(priceData.size)), ...aobData.sell.map(priceData => parseInt(priceData.size))];
const xScaleLeft = d3.scaleBand()
.domain(aobData.buy.map(priceData => priceData.level))
.range([0, 434])
.paddingInner(0.14);
const xScaleRight = d3.scaleBand()
.domain(aobData.sell.map(priceData => priceData.level))
.range([484, 918])
.paddingInner(0.14);
const yScale = d3.scaleLinear()
.domain(d3.extent(allSizes, d => d))
.range([15, chartDimensions.height])
const svg = html`<svg width=${chartDimensions.expandedWidth} height=${chartDimensions.height} viewBox='${currentViewBox}' style="border:
1px dashed darkolivegreen"></svg>`;
const buySelection = d3.select(svg)
.selectAll('rect.buy')
.data(aobData.buy)
.join('rect')
.attr('x', (d, i) => xScaleLeft(d.level))
.attr('y', d => chartDimensions.height - yScale(d.size))
.attr('width', xScaleLeft.bandwidth())
.attr('height', d => yScale(d.size))
.attr('stroke', '#3896E3')
.attr('stroke-width', 1)
.attr('stroke-dasharray', '15, 2, 4, 2')
.attr('stroke-dashoffset', '-3')
.attr('fill', 'none')
// .attr('fill', '#3896E3')
const sellSelection = d3.select(svg)
.selectAll('rect.sell')
.data(aobData.sell)
.join('rect')
.attr('x', (d, i) => xScaleRight(d.level))
.attr('y', d => chartDimensions.height - yScale(d.size))
.attr('width', xScaleRight.bandwidth())
.attr('height', d => yScale(d.size))
.attr('stroke', '#F76054')
.attr('stroke-width', 1)
.attr('fill', '#F76054')
d3.select(svg).selectAll('rect')
.style('cursor', 'pointer')
.on('mouseenter', (e, d) => d3.select(e.target).attr('fill-opacity', 0.4))
.on('mouseleave', (e, d) => d3.select(e.target).attr('fill-opacity', 1))
.on('click', (e, d) => d3.select(e.target).attr('fill', 'darkolivegreen'))
d3.select(buttonExpand).on('click', ()=>{
currentViewBox = currentViewBox === '0 0 918 130' ? '220 0 478 130' : '0 0 918 130';
console.log({ currentViewBox});
d3.select(svg)
.attr('viewBox', currentViewBox)
.attr('width', currentViewBox === '0 0 918 130' ? '918' : '478')
});
return html`
${svg}
${buttonExpand}
`;
}
{
const data = ['one', 'two', 'three'];
const svg = html`
<svg>
<rect x="0" y="0" width="20" height="70" />
</svg>
`;
const theJoin = d3.select(svg).selectAll('rect').data(data)
console.log(theJoin);
return theJoin;
}
{
return [
...aobData.buy.map(barDatum => ({...barDatum, side: 'buy'})),
...aobData.sell.map(barDatum => ({...barDatum, side: 'sell'}))
]
}
{
const x = d3.scaleLinear()
.domain([10, 130])
.range([0, 960])
.clamp(true)
return x(140)
}
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.
