frontend + d3
Published
Edited
Nov 25, 2019
2 stars
settings = ({
maxTry: 1000,
repetition: 100
})
getAverage = (func, ...args) =>
Array.from({ length: settings.repetition })
.map(() => func(...args))
.reduce((ac, cv) => ac + cv, 0) / settings.repetition
jCreationTest = data => {
const jCreateStart = window.performance.now();
const svg = $('svg');
const nodes = data.map(() => svg.append($('rect').addClass('test')));
const jCreateEnd = window.performance.now();
return jCreateEnd - jCreateStart;
}
dCreationTest = data => {
const dCreateStart = window.performance.now();
const d3svg = d3.create('svg');
const nodes = d3svg.selectAll('.test').data(data).enter().append('rect');
const dCreateEnd = window.performance.now();
return dCreateEnd - dCreateStart;
}
jUpdateTest = data => {
const svg = $('svg');
const nodes = data.map((_, i) => $('rect').addClass('test'));
const jStart = window.performance.now();
nodes.forEach((n, i) => n.attr('width', nodes[i]));
const jEnd = window.performance.now();
return jEnd - jStart;
}
dUpdateTest = data => {
const d3svg = d3.create('svg');
const nodes = d3svg.selectAll('.test').data(data);
nodes
.enter()
.append('rect')
.classed('test', true);
const newData = data.map(i => i * 2);
const dStart = window.performance.now();
nodes.data(newData).attr('width', d => d);
const dEnd = window.performance.now();
return dEnd - dStart;
}
{
// object creation
const testData = Array.from({ length: settings.maxTry }).map((_, i) => i);
// jQuery
const jCreationResult = getAverage(jCreationTest, testData);
const jUpdateResult = getAverage(jUpdateTest, testData);
// d3
const dCreationResult = getAverage(dCreationTest, testData);
const dUpdateResult = getAverage(dUpdateTest, testData);
return html`
<div>
<h2>test result</h2>
<table>
<thead>
<tr>
<th>test type</th>
<th>jQuery(ms)</th>
<th>d3(ms)</th>
</tr>
</thead>
<tbody>
<tr>
<td>object creation</td>
<td>${jCreationResult}</td>
<td>${dCreationResult}</td>
</tr>
<tr>
<td>object update</td>
<td>${jUpdateResult}</td>
<td>${dUpdateResult}</td>
</tr>
</tbody>
</table>
</div>
`;
}
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.
