chart: Rename to crunchbase_ui and add masthead

2026-05-04 03:11:52 -05:00 · 2015-11-23 15:37:17 -08:00
parent 58709e858f
commit 36f6e0572a
18 changed files with 84 additions and 14 deletions
@@ -1,9 +0,0 @@
-<!doctype html>
-<link href="nv.d3.css" rel="stylesheet">
-<link href="style.css" rel="stylesheet">
-<script src="out.js"></script>
-<body>
-
-<div id="app" style="width: 600px"></div>
-
-</body>
@@ -0,0 +1,31 @@
+<!doctype html>
+<head>
+<title>noms.io &#10143; nerdosphere</title>
+<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
+<link href="nv.d3.css" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+<script src="out.js"></script>
+</head>
+
+<body>
+
+<div id="masthead">
+<h1><span class="thin">noms.io <span style="position:relative; top:0.05em;">&#8594;</span> </span>nerdosphere</h1>
+</div>
+
+<div id="app"></div>
+
+<h2 style="margin-top:0">About this dataset</h2>
+
+<p>The nerdosphere dataset is imported montly from the <a href="http://data.crunchbase.com/v3/page/crunchbase-data-exports">CrunchBase Excel Data Export</a>, which is in turned based on crowdsourced data from <a href="http://www.crunchbase.com/">CrunchBase</a>.
+
+<p>This graph shows the distribution of venture capital funding rounds by funding series. The x-axis is round size by decile, and the y-axis is the average round size within that decile.
+
+<h2>Get the data</h2>
+
+<pre>go get https://github.com/attic-labs/noms/...
+go install $GOROOT/src/github.com/attic-labs/noms/clients/shove
+./shove -source-h="https://ds.noms.io" -source-ds="nerdosphere" -sink-ldb="/tmp/nerdosphere" -sink-ds="nerdosphere"</pre>
+
+</body>
@@ -49,7 +49,6 @@ class Main extends React.Component<DefaultProps, Props, State> {

  render() : React.Element {
    return <div className='app'>
-      <h2 className='app-title'>Amount Raised</h2>
      <div>
        <StackedBarChart className='app-chart' data={this._filteredData()}/>
        <div className='app-controls'>
@@ -1,3 +1,54 @@
+body {
+  background: #eaeaea;
+  color: black;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;
+  margin: 2em;
+}
+
+#masthead {
+  margin-left:-0.2em;
+  margin-top: -0.5em;
+  padding: 1em 100px;
+  background-image: url(cookie.png);
+  background-position: center left;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-bottom: 1px solid #aaa;
+}
+
+h1 {
+  font-weight: 400;
+  font-size: 1.25em;
+  display: inline;
+  margin: 0;
+}
+
+h1>.thin {
+  font-weight: 300;
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 1.35em;
+  margin-top: 1.5em;
+}
+
+pre {
+  border: 1px solid #aaa;
+  padding: 0.5em;
+  line-height: 1.7em;
+  background: #dedede;
+}
+
+a {
+  color: #FF4515;
+}
+
+a:visited {
+  color: #cc2505;
+}
+
 .selection-list {
  font: normal 12px Arial;
  margin-top: 10px;
@@ -46,10 +97,7 @@
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
-}
-
-.app-title {
-  margin: 5px 0 -10px 60px;;
+  margin-top: 1em;
 }

 .app > div > svg {
@@ -61,6 +109,7 @@
  display: flex;
  flex-direction: column;
  padding-top: 15px;
+  margin-right: 1.5em;
 }

 .app > div {