Data visualization

dabblet.css

/* Data visualization */

main {
	transform: rotate(-90deg);
	!transform: rotate(-45deg); /* remove the ! to tilt years */
	transform-origin: 00% 0%;
	margin-left: 0%;
	margin-top: 15em;
}

dl {white-space: pre;
	padding: 2em;
	background: linear-gradient( to bottom,black,black) 2em 0px / 2px 100% no-repeat;
}

dd {
	transform: rotate(45deg) translate(-2em, -1em);
	transform-origin: 0 0;
	margin-top: 0em;
	line-height: 1.5;
}

dt {
	position:relative;
	display: inline-block;
	font-family: sans-serif;
	transform: rotate(90deg);
	transform-origin: 0 0;
	padding-top: 12px;
}

dt::before {
	content: "";
	top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0 0 0 2px inset;
	background: white;
}

[data-years="2"] { margin-top: 2em; }
[data-years="3"] { margin-top: 3em; }
[data-years="4"] { margin-top: 4em; }
[data-years="5"] { margin-top: 5em; }
[data-years="6"] { margin-top: 6em; }
[data-years="7"] { margin-top: 7em; }

dabblet.html

<main>
<dl class="timeline">
<dt>1969</dt><dd>UNICS</dd>
<dt data-years="2">1971</dt><dd>UNIX Time-Sharing System</dd>
<dt data-years="7">1978</dt><dd>BSD</dd>
<dt data-years="2">1980</dt><dd>XENIX OS</dd>
<dt>1981</dt><dd>UNIX System III</dd>
<dt>1982</dt><dd>SunOS</dd>
<dt>1983</dt><dd>UNIX System V</dd>
<dt data-years="3">1986</dt><dd>GNU (Trix)</dd><dd>HP-UX</dd>
<dt>1987</dt><dd>Minix</dd>
<dt data-years="2">1989</dt><dd>NeXTSTEP</dd><dd>SCO UNIX</dd>
<dt>1990</dt><dd>Solaris</dd>
<dt>1991</dt><dd>Linux</dd>
<dt data-years="2">1993</dt><dd>FreeBSD</dd>
<dt data-years="2">1995</dt><dd>OpenBSD</dd>
<dt data-years="4">1999</dt><dd>Mac OS X</dd>
</dl>
</main>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}