Public
Edited
Jan 2, 2024
Insert cell
Insert cell
wdWrapper(
{
head: { text: "Demonstration of Different Arc Shapes in WaveDrom 3.3.0", },
config: { skin: 'default', hscale: 1, marks: false, hbounds: [0,14.5], fit2pane: true},
signal: [
{node: 'V............<.>.\xd5'},
{name: 'CLK-NA', phase: 0.35,
wave: '0101010101010101',
node: '.a.bc..de..f..g'.toUpperCase() },
{},
{name: 'DATA-NA',
wave: '===============',
node: '..\xc0\xc1.\xc2..\xc3\xc4..\xc5\xc6'
},
{},
{node: 'W............<.>.\xd6'},
{name: 'CLK-SA', phase: 0.35,
wave: '0101010101010101',
node: '.h.ij..kl..m..n'.toUpperCase()
},
{},
{name: 'DATA-SA',
wave: '===============',
node: '..\xc7\xc8.\xc9..\xca\xcb..\xcc\xcd'//.toLowerCase()
},
{},
{node: 'X............<.>.\xd8'},
{name: 'CLK-DA', phase: 0.35,
wave: '0101010101010101',
node: '.o.pq..rs..t..u'.toUpperCase()
},
{},
{name: 'DATA-DA',
wave: '===============',
node: '..\xce\xcf.\xd0..\xd1\xd2..\xd3\xd4'//.toLowerCase()
},
{},
],
edge:[
'A~\xc0 tilde', 'B-\xc1 hyphen', 'C-~\xc2 hyphen-tilde', 'D~-\xc3 tilde-hyphen',
'E-|\xc4 hyphen-pipe', 'F|-\xc5 pipe-hyphen', 'G-|-\xc6 hyphen-pipe-hyphen',
'H~>\xc7 T>', 'I->\xc8 H>', 'J-~>\xc9 HT>', 'K~->\xca TH>',
'L-|>\xcb HP>', 'M|->\xcc PH>', 'N-|->\xcd HPH>',
'O<~>\xce <T>', 'P<->\xcf <H>', 'Q<-~>\xd0 <HT>',
'R<~->\xd1 <TH>', 'S<-|>\xd2 <HP>', 'T<|->\xd3 <PH>', 'U<-|->\xd4 <HPH>',
'V+\xd5 No-Arrow Arcs',
'W+\xd6 Single-Arrow Arcs',
'X+\xd8 Dual-Arrow Arcs',
],
}
, 2)
Insert cell
wdWrapper( {config: {marks:false},signal: [{name:'Evaluating WaveDrom 24.01'}]}, 0)
Insert cell
wdWrapper = (() => {
wavedrom.waveSkin = window.WaveSkin ;
return (obj,i) => {
const actSVG = wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin));
const parser = new DOMParser();
const actSVGForImg = parser.parseFromString(actSVG,'image/svg+xml').firstChild;
let ser = new XMLSerializer();
let imgt = document.createElement('img');
const svgAsImgString = encodeURIComponent(ser.serializeToString(actSVGForImg));
imgt.src = `data:image/svg+xml;utf8,${svgAsImgString}` ;
imgt.style = 'width:100%;height:100%;' ;
return imgt ;
}
})();
Insert cell
wd = (() => {
wavedrom.waveSkin = window.WaveSkin ;
return (obj,i) => html`${wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin))}`
})();
Insert cell
wavedrom = (await require(await FileAttachment("wavedrom@1.unpkg.min.js").url()));
Insert cell
(await require(await FileAttachment("professional.js").url())).catch ( () => {} );
Insert cell
(await require(await FileAttachment("default.js").url())).catch ( () => {} );
Insert cell

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.
Learn more