# Moore's law, linear or log (Chartist example)

> Transistors per processor from 1971 to 2022 on a log Y axis with minor grid lines, and a button that moves the points to a linear scale and back.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import './style.css';
import { autoScaleAxis, lineChart } from 'chartist';
import { liveDomRenderer, smilAnimations } from 'chartist/live';
import { logAxis } from '@chartist-js/essentials';
import { processors } from './processors';

// Moore's law: the transistors on a chip double about every two years. On
// a linear axis that's a flat line and a wall at the end; on a log axis
// with minor grid lines, a straight climb from 2,250 to 114 billion.
const compact = new Intl.NumberFormat('en-US', { notation: 'compact' });
const log = logAxis({ minorTicks: true });
const linear = autoScaleAxis();

const chart = lineChart(
  '#chart',
  {
    series: [processors.map(({ name, x, y }) => ({ x, y, meta: name }))]
  },
  {
    showLine: false,
    // Room for the last X label, which starts at its tick.
    chartPadding: { right: 32 },
    axisX: { type: autoScaleAxis(), onlyInteger: true },
    axisY: {
      type: log,
      offset: 48,
      labelTransform: value => compact.format(Number(value))
    },
    // The points move from one scale to the other.
    renderer: liveDomRenderer({ animations: smilAnimations() })
  }
);

const button = document.querySelector<HTMLButtonElement>('#scale')!;
let onLog = true;
button.addEventListener('click', () => {
  onLog = !onLog;
  chart.setOptions({ axisY: { type: onLog ? log : linear } });
  button.textContent = `Show on a ${onLog ? 'linear' : 'log'} scale`;
});
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart"></div>
    <p class="controls">
      <button type="button" id="scale">Show on a linear scale</button>
    </p>
  </body>
</html>
```

`src/processors.ts`:

```ts
// Transistors per processor, as Wikipedia's "Transistor count" list gives
// them: from Intel's 4004 to Apple's M1 Ultra.
export const processors = [
  { name: 'Intel 4004', x: 1971, y: 2_250 },
  { name: 'Intel 8080', x: 1974, y: 6_000 },
  { name: 'Intel 8086', x: 1978, y: 29_000 },
  { name: 'Intel 80286', x: 1982, y: 134_000 },
  { name: 'Intel 80386', x: 1985, y: 275_000 },
  { name: 'Intel 80486', x: 1989, y: 1_180_235 },
  { name: 'Pentium', x: 1993, y: 3_100_000 },
  { name: 'Pentium II', x: 1997, y: 7_500_000 },
  { name: 'Pentium III', x: 1999, y: 9_500_000 },
  { name: 'Pentium 4', x: 2000, y: 42_000_000 },
  { name: 'Core 2 Duo', x: 2006, y: 291_000_000 },
  { name: 'Core i7', x: 2008, y: 731_000_000 },
  { name: 'Apple A7', x: 2013, y: 1_000_000_000 },
  { name: 'Apple M1', x: 2020, y: 16_000_000_000 },
  { name: 'Apple M1 Ultra', x: 2022, y: 114_000_000_000 }
];
```

`src/style.css`:

```css
#chart {
  height: 50vh;
}

.controls {
  margin: 0.5em 0 0;
}
```