swizec / moores-law

Visualizing Moore's law compared to actual transistor count like in https://www.youtube.com/watch?v=7uvUiq_jTLM&feature=youtu.be

This project was bootstrapped with Create React App.

Moore's law vs. actual transistor count built with React & D3

A data visualization experiment. Many transitions and animations.

Inspo from: https://www.youtube.com/watch?v=7uvUiq_jTLM&feature=youtu.be

LICENSE

MIT

moores-law's Issues

Transition Could Be Smoother

The transition of the Moore's law bar is still not that smooth, since it's a linear transition in between years.

Mathematically the formula you want for any given point in time is:

const transistors = year => {
  const initTransistors = 1000;
 const initYear = 1970;

  if (year && year >= initYear) {
    return 1000 * 2 ** ((initYear - year) / 2)
  }
}

moores-law/src/App.js

Lines 96 to 110 in 514cd62

	// Simple Moore's Law: double count every 2 years
	// Not mathematically the prettiest, but it works :P
	const mooresLaw = d3.range(1971, 2025).reduce(
	(law, year) => {
	if (year % 2 === 0) {
	const count = law[year - 2] * 2;
	const delta = count - law[year - 2];
	law[year - 1] = law[year - 2] + delta / 2;
	law[year] = count;
	}
	return law;
	},
	{ 1970: 1000 }
	);

So, maybe you want to transition the Moore's law bar from the first year to the final year using an exponential scale?

https://github.com/d3/d3-scale#power-scales