I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
normal_table = {
let div = d3.create('div');
let table = div
.append('table')
.attr('border', '0')
.attr('align', 'center')
.attr('cellspacing', '2')
.attr('cellpadding', 3);
let first_row = table.append('tr');
first_row
.append('th')
.attr('class', 'tex')
.html('Z');
for (let j = 0; j < 0.09999; j = j + 0.01) {
first_row
.append('th')
.attr('col', `${Math.round(100 * j)}`)
.text(d3.format("0.2f")(j));
}
for (let i = 0; i <= 3.4001; i = i + 0.1) {
let row = d3.create('tr');
row
.append('th')
.text(d3.format("0.1f")(i))
.attr('row', `${Math.round(10 * i)}`);
for (let j = 0; j < 0.0999; j = j + 0.01) {
let td = row
.append('td')
.attr('row', `${Math.round(10 * i)}`)
.attr('col', `${Math.round(100 * j)}`)
.attr('title', `Z = ${d3.format('0.2f')(i + j)}`)
.text(normal(i + j));
const tip = tippy(td.node(), {
// Not sure why I can't dynamically set the content of the tip
// content: function() {
// return 'ad';
// },
delay: [50, 0],
duration: [200, 50],
placement: 'top',
arrow: true
});
// Again, not sure why I can't dynamically set the content of the tip
//tip.setContent('ad');
}
table.append(() => row.node());
}
div
.selectAll('td')
.on('mouseover', function() {
let row = d3.select(this).attr('row');
let col = d3.select(this).attr('col');
d3.selectAll(`[row="${row}"]`).attr('bgcolor', '#ddd');
d3.selectAll(`[col="${col}"]`).attr('bgcolor', '#ddd');
})
.on('mouseleave', function() {
let row = d3.select(this).attr('row');
let col = d3.select(this).attr('col');
d3.selectAll(`[row="${row}"]`).attr('bgcolor', '#fff');
d3.selectAll(`[col="${col}"]`).attr('bgcolor', '#fff');
});
return div.node();
// Might typeset with KaTeX another day.
// div.selectAll('.tex').each(function(d) {
// katex.render(d3.select(this).text(), d3.select(this).node());
// });
}
function normal(x) {
return d3.format("0.4f")(
adaptiveSimpson(
t => Math.exp((-t * t) / 2) / Math.sqrt(2 * Math.PI),
0,
x,
1e-120,
8
)
);
}
import { adaptiveSimpson } from '@rreusser/integration'
d3 = require('d3@5')
// katex = require('katex@0.11.1/dist/katex.min.js')
// katex_style = html`<link rel=stylesheet href=${await require.resolve(
// 'katex@0.11.1/dist/katex.css'
// )}>`
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
tippy_style = html`<link rel=stylesheet href=${await require.resolve(
'https://unpkg.com/browse/tippy.js@2.5.4/dist/tippy.css'
)}>`
html`<style>
table {
cursor: default
}`
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.
