Public
Edited
Sep 29, 2023
chrt.Chrt()
.size(width, 300)
.margins({left: 100})
.add(
chrt.points()
.data(pr.filter(d => d.ASN === '2516' || d.ASN === '16509'), d => ({
x: d['WP PR Value'],
y: d['Num Transit'],
}))
.fill(d => {
if(d.Date === '2023-06-01') {
return '#000'
}
return d.ASN === '16509' ? 'yellow' : 'red'
})
)
.add(chrt.yAxis())
.add(chrt.xAxis())
.node()
asn = '1299'
{
const index = 0;
const maxRank = 100;
const attributes = stable13445;
const pops = pops13445;
const chart = chrt.Chrt()
.size(width, 700)
.margins({left: 20, bottom: 40})
.padding({left: 20, bottom: 5, right: 20})
.x({scale:'time'})
.y({domain:[30,1]})
.add(
chrt.horizontalGrid(30).color('#ddd')
)
Object.values(pops).slice(0, 50).forEach((pop, asnIndex) => {
//if(asnIndex >= index && asnIndex < index + 5) {
chart.add(
chrt.line()
.data(pop.data.filter(d => d.rank<= maxRank && new Date(d.Date) >= new Date(2023,8,1)), d => ({
x: new Date(d.Date),
y: d.rank,
}))
.class(pop.location)
//.stroke((asnIndex >= index && asnIndex < index + 5) ? asnColor[asnIndex % 5] : '#aaa')
.stroke(attributes[pop.location]?.color ?? '#aaa')
.strokeWidth(attributes[pop.location]?.thickness ?? 1)
.strokeOpacity(attributes[pop.location]?.opacity ?? 0.25)
)
//}
chart.add(
chrt.points()
.data(pop.data.filter(d => d.rank<= 30 && new Date(d.Date) >= new Date(2023,8,1)), d => ({
x: new Date(d.Date),
y: d.rank,
}))
.fill(attributes[pop.location]?.color ?? '#aaa')
// .fill((asnIndex >= index && asnIndex < index + 5) ? asnColor[asnIndex % 5] : '#aaa')
.size({field: 'Num Traces', range: [0,20]})
// .strokeWidth(attributes[asn.asn]?.thickness ?? 1)
.fillOpacity(attributes[pop.location]?.opacity ?? 0.25)
//.fillOpacity((asnIndex >= index && asnIndex < index + 5) ? 0.9 : 0.25)
)
})
chart.add(
chrt.yAxis(30).hideTicks().hideAxis()
).add(
chrt.xAxis()
.interval('bidiurnal')
.format(d => new Date(d).toLocaleDateString('en-us', { day:'numeric', month:"numeric"})).hideTicks().hideAxis()
)
return chart.node()
}
sortedAsn = Object.values(all).map(d => ({
...d,
mean: d3.mean(d.data.filter(p => new Date(p.Date) >= new Date(2023,8,1)), value => value['WP PR Rank'])
})).sort((a,b) => a.mean - b.mean)
all = pr.reduce((acc,d) => {
acc[d.ASN] = acc[d.ASN] ?? {
asn: d.ASN,
data: [],
}
acc[d.ASN].data.push(d);
return acc;
}, {})
amz = FileAttachment("path_loc_amzn_us_by_region@1.json").json()
asnColor = ['#FF9900', '#8dd3c7','#bebada','#fb8072','#80b1d3']
chrt=require('chrt@latest')
<style>
svg {
overflow: hidden;
}
svg text {
font-family: sans-serif;
font-size: 16px;
}
</style>
import {colors} from "1a7f59530538751b"
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.
