Skip to content

Commit

Permalink
New computer progress
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewlucasgs committed Jul 6, 2022
1 parent 9669521 commit d999db0
Show file tree
Hide file tree
Showing 19 changed files with 466 additions and 229 deletions.
97 changes: 85 additions & 12 deletions components/Chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ if (typeof Highcharts === "object") {
HighchartsExporting(Highcharts);
}

export default function Chart({ dataset, xAxis, yAxis }) {
export default function Chart({ dataset, xAxis, yAxis, downloadCSV }) {
const linearRegressionLine = (x, y) => {
const xs = [];
const ys = [];
Expand All @@ -30,10 +30,15 @@ export default function Chart({ dataset, xAxis, yAxis }) {
const x2 = Math.max.apply(null, xs);
const y1 = slope * x1 + intercept;
const y2 = slope * x2 + intercept;
return [
[x1, y1],
[x2, y2],
];
return {
slope,
intercept,
r2,
points: [
[x1, y1],
[x2, y2],
],
};
};
const scatterData = dataset.map((model) => {
return {
Expand All @@ -60,9 +65,15 @@ export default function Chart({ dataset, xAxis, yAxis }) {
return Math.log10(1 / (1 - model[yAxis.column] / 100));
});
const lr = linearRegressionLine(x, y);
return lr;
console.log(lr);
return lr.points;
};
const chartOptions = {
chart: {
spacingBottom:25,
spacingTop:50,
height: (8 / 16 * 100) + '%' // 16:9 ratio
},
title: {
text: null,
},
Expand All @@ -73,29 +84,65 @@ export default function Chart({ dataset, xAxis, yAxis }) {
title: {
enabled: true,
text: xAxis.name,
margin: 5,
style: {
fontSize: 22,
},
},
minPadding: 0.05,
maxPadding: 0.05,
allowDecimals: xAxis.column !== "year",
minPadding: xAxis.column === "year" ? 0.099 : 0.102,
maxPadding: 0.06,

allowDecimals: false,
labels: {
style: {
fontSize: 25,
},
useHTML: true,
formatter: function () {
if (xAxis.column === "year") {
return `<span>${this.value}</span>`;
return `<span class="text-lg">${this.value}</span>`;
}
return `10<sup>${this.value.toFixed(1)}</sup>`;
return `<span class="text-lg">10<sup>${this.value}</sup></span>`;
},
},
},
credits: {
enabled: true,
style: {
margin: 10,
},
position: {
align: "center",
y: 0,
},
text:
'<a target="_blank" href="https://arxiv.org/abs/2007.05558">' +
"Ⓒ The Computational Limits of Deep Learning, N.C. THOMPSON, K. GREENEWALD, K. LEE, G.F. MANSO</a>" +
'<a target="_blank" href="https://dblp.uni-trier.de/rec/journals/corr/abs-2007-05558.html?view=bibtex">' +
" [CITE]</a>",
},
yAxis: {
title: {
text: yAxis.name,
margin: 30,
style: {
fontSize: 22,
},
},
// allowDecimals: false,
maxPadding: 0,
// showLastLabel: false,

labels: {
y:-3,
x:0,
align:'left',
formatter: function () {
let label = (1 - 10 ** -this.value) * 100;
label = Math.round(label * 100) / 100;
return `${this.value ? label.toFixed(1) : 0}%`;
return `<span class=" text-lg">${
this.value ? label.toFixed(0) : 0
}%</span>`;
},
},
},
Expand Down Expand Up @@ -176,6 +223,32 @@ export default function Chart({ dataset, xAxis, yAxis }) {
enableMouseTracking: false,
},
],
exporting: {
menuItemDefinitions: {
// Custom definition
label: {
onclick: function () {
downloadCSV();
},
text: "Download data (CSV)",
},
},
buttons: {
contextButton: {
menuItems: [
"viewFullscreen",
"printChart",
"separator",
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"downloadSVG",
"separator",
"label",
],
},
},
},
};
return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}
7 changes: 3 additions & 4 deletions components/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,17 @@ function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}

export default function Navbar() {
export default function Navbar({transparent}) {
return (
<footer className=" bg-black/50">
<footer className={transparent ? " bg-black/50" : "bg-black border-t-2 border-t-[#AA3248]"}>
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center pb-2">
<div className="relative h-14 w-48">
<div className="relative h-12 m-2 w-48">
<Image src="/futuretech.svg" alt="future tech" layout="fill" />
</div>
<p className="text-gray-100 text-sm">© 2022 Computer Progress</p>
</div>
</div>

</footer>
);
}
112 changes: 65 additions & 47 deletions components/Header.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DocumentTextIcon, NewspaperIcon, PaperClipIcon, UserGroupIcon } from "@heroicons/react/outline";
import Link from "next/link";
import { useRouter } from "next/router";
function classNames(...classes) {
Expand Down Expand Up @@ -39,56 +40,71 @@ export default function Header({ benchmarks }) {
</p>
<ul className="flex flex-row justify-start flex-wrap gap-x-16 gap-y-4">
<li className="flex items-center text-sm text-gray-600 gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
<a
href="https://arxiv.org/abs/2007.05558"
target="_blank"
rel="noreferrer"
className="hover:underline flex items-center text-sm text-gray-600 gap-1"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
Paper
<DocumentTextIcon className="w-5 h-5"/> Paper
</a>
</li>
<li className="flex items-center text-sm text-gray-600 gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
Authors: Kristjan Greenewald, Keeheon Lee, and Gabriel Manso

<UserGroupIcon className="w-5 h-5"/> Kristjan Greenewald, Keeheon Lee, and Gabriel
Manso
</li>
<li className="flex items-center text-sm text-gray-600 gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
<li className="flex items-center text-sm text-gray-600 gap-1 flex-wrap">
<NewspaperIcon className="w-5 h-5"/>
<a
href="https://www.wired.com/story/prepare-artificial-intelligence-produce-less-wizardry/"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
Wired
</a>,
<a
href="https://venturebeat.com/2020/07/15/mit-researchers-warn-that-deep-learning-is-approaching-computational-limits/"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
VentureBeat
</a>,
<a
href="https://www.discovermagazine.com/technology/the-computational-limits-of-deep-learning-are-closer-than-you-think"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
Discover
</a>,
<a
href="https://thenextweb.com/neural/2020/07/17/ai-researchers-say-weve-squeezed-nearly-as-much-out-of-modern-computers-as-we-can/"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
The Next Web
</a>,
<a
href="https://interestingengineering.com/deep-learning-reaching-computational-limits-warns-new-mit-study"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
Interesting Engineering
</a>,
<a
href="https://content.techgig.com/mit-researchers-warn-that-deep-learning-is-reaching-its-computational-limit/articleshow/77033239.cms"
target="_blank"
rel="noreferrer"
className="hover:underline"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
/>
</svg>{" "}
Wired, VentureBeat, Discover, The Next Web, Interesting
Engineering, Tech Gig
Tech Gig
</a>

</li>
</ul>
</div>
Expand All @@ -104,11 +120,13 @@ export default function Header({ benchmarks }) {
<li
className={classNames(
item.range == router.query.slug ? "font-bold" : "",
"text-[#AA3248] mt-1"
"text-[#AA3248] mt-1 hover:underline"
)}
key={item.range}
>
<Link href={'/benchmarks/' + item.range}>{item.dataset}</Link>
<Link href={"/benchmarks/" + item.range}>
{item.dataset}
</Link>
</li>
))}
</ul>
Expand Down
Loading

0 comments on commit d999db0

Please sign in to comment.