-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathbasic.html
24 lines (24 loc) · 12.5 KB
/
basic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h1>Hello World</h1>
<p>I'm <strong>testing</strong>!</p>
<h2>Test</h2>
<pre><code>console.log('inline code');
</code></pre>
<pre><code class="language-js">console.log('language javascript')
</code></pre>
<div id="chart"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="500"><defs><style type="text/css"><![CDATA[
.bar { fill: steelblue; }
.bar:hover { fill: brown; }
]]></style></defs><g transform="translate(20, 20)"><rect class="bar" x="11.358024691357969" width="102.22222222222223" y="172.5" height="287.5"></rect><rect class="bar" x="124.93827160493822" width="102.22222222222223" y="230" height="230"></rect><rect class="bar" x="238.51851851851848" width="102.22222222222223" y="57.5" height="402.5"></rect><rect class="bar" x="352.09876543209873" width="102.22222222222223" y="345" height="115"></rect><rect class="bar" x="465.679012345679" width="102.22222222222223" y="230" height="230"></rect><rect class="bar" x="579.2592592592592" width="102.22222222222223" y="0" height="460"></rect><rect class="bar" x="692.8395061728395" width="102.22222222222223" y="287.5" height="172.5"></rect><rect class="bar" x="806.4197530864197" width="102.22222222222223" y="115" height="345"></rect><g transform="translate(0,460)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H920.5V6"></path><g class="tick" opacity="1" transform="translate(62.46913580246908,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">0</text></g><g class="tick" opacity="1" transform="translate(176.04938271604934,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">1</text></g><g class="tick" opacity="1" transform="translate(289.62962962962956,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">2</text></g><g class="tick" opacity="1" transform="translate(403.2098765432098,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">3</text></g><g class="tick" opacity="1" transform="translate(516.7901234567901,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">4</text></g><g class="tick" opacity="1" transform="translate(630.3703703703703,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">5</text></g><g class="tick" opacity="1" transform="translate(743.9506172839506,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">6</text></g><g class="tick" opacity="1" transform="translate(857.5308641975308,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">7</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,460.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,460)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,402.5)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">1</text></g><g class="tick" opacity="1" transform="translate(0,345)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">2</text></g><g class="tick" opacity="1" transform="translate(0,287.5)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">3</text></g><g class="tick" opacity="1" transform="translate(0,230)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">4</text></g><g class="tick" opacity="1" transform="translate(0,172.5)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">5</text></g><g class="tick" opacity="1" transform="translate(0,115)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">6</text></g><g class="tick" opacity="1" transform="translate(0,57.5)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">7</text></g><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">8</text></g></g></g></svg></div><div id="chart"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="500"><g transform="translate(30, 20)"><g><g transform="translate(0, 460)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H910.5V6"></path><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text></g><g class="tick" opacity="1" transform="translate(65,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">0.5</text></g><g class="tick" opacity="1" transform="translate(130,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">1.0</text></g><g class="tick" opacity="1" transform="translate(195,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">1.5</text></g><g class="tick" opacity="1" transform="translate(260,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">2.0</text></g><g class="tick" opacity="1" transform="translate(325,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">2.5</text></g><g class="tick" opacity="1" transform="translate(390,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">3.0</text></g><g class="tick" opacity="1" transform="translate(455,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">3.5</text></g><g class="tick" opacity="1" transform="translate(520,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">4.0</text></g><g class="tick" opacity="1" transform="translate(585,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">4.5</text></g><g class="tick" opacity="1" transform="translate(650,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">5.0</text></g><g class="tick" opacity="1" transform="translate(715,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">5.5</text></g><g class="tick" opacity="1" transform="translate(780,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">6.0</text></g><g class="tick" opacity="1" transform="translate(845,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">6.5</text></g><g class="tick" opacity="1" transform="translate(910,0)"><line stroke="#000" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" y="9" x="0.5" dy="0.71em">7.0</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,460.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,460)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">2.0</text></g><g class="tick" opacity="1" transform="translate(0,422)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">2.5</text></g><g class="tick" opacity="1" transform="translate(0,383)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">3.0</text></g><g class="tick" opacity="1" transform="translate(0,345)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">3.5</text></g><g class="tick" opacity="1" transform="translate(0,307)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">4.0</text></g><g class="tick" opacity="1" transform="translate(0,268)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">4.5</text></g><g class="tick" opacity="1" transform="translate(0,230)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">5.0</text></g><g class="tick" opacity="1" transform="translate(0,192)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">5.5</text></g><g class="tick" opacity="1" transform="translate(0,153)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">6.0</text></g><g class="tick" opacity="1" transform="translate(0,115)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">6.5</text></g><g class="tick" opacity="1" transform="translate(0,77)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">7.0</text></g><g class="tick" opacity="1" transform="translate(0,38)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">7.5</text></g><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="#000" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" x="-9" y="0.5" dy="0.32em">8.0</text></g></g><path fill="none" stroke="steelblue" stroke-width="1.5" d="M0,230L21.666666666666668,242.83333333333334C43.333333333333336,255.66666666666666,86.66666666666667,281.3333333333333,130,255.83333333333334C173.33333333333334,230.33333333333334,216.66666666666666,153.66666666666666,260,179.16666666666666C303.3333333333333,204.66666666666666,346.6666666666667,332.3333333333333,390,370.6666666666667C433.3333333333333,409,476.6666666666667,358,520,281.3333333333333C563.3333333333334,204.66666666666666,606.6666666666666,102.33333333333333,650,115C693.3333333333334,127.66666666666667,736.6666666666666,255.33333333333334,780,280.8333333333333C823.3333333333334,306.3333333333333,866.6666666666666,229.66666666666666,888.3333333333334,191.33333333333334L910,153"></path></g></g></svg></div><div id="chart"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><defs><style type="text/css"><![CDATA[
.arc text { font: 10px sans-serif; text-anchor: middle; }
.arc path { stroke: #fff; }
]]></style></defs><g transform="translate(200, 200)"><g class="arc"><path d="M1.0409497792752502e-14,-170A170,170,0,0,1,122.60441604844846,-117.76314009663191L0,0Z" style="fill: #393b79;"></path><text transform="translate(54.875325380410516,-128.7971221122354)" dy=".35em">0</text></g><g class="arc"><path d="M122.60441604844846,-117.76314009663191A170,170,0,0,1,168.76050859666918,-20.491235643404938L0,0Z" style="fill: #5254a3;"></path><text transform="translate(126.48306084545351,-60.01695859642761)" dy=".35em">1</text></g><g class="arc"><path d="M168.76050859666918,-20.491235643404938A170,170,0,0,1,90.85919044172621,143.6823145424451L0,0Z" style="fill: #6b6ecf;"></path><text transform="translate(126.48306084545354,60.01695859642755)" dy=".35em">2</text></g><g class="arc"><path d="M90.85919044172621,143.6823145424451A170,170,0,0,1,40.683662928884864,165.06010896242884L0,0Z" style="fill: #9c9ede;"></path><text transform="translate(54.875325380410516,128.7971221122354)" dy=".35em">3</text></g><g class="arc"><path d="M40.683662928884864,165.06010896242884A170,170,0,0,1,-66.63432367621274,156.39650542200013L0,0Z" style="fill: #637939;"></path><text transform="translate(-11.265319620341565,139.5460231387894)" dy=".35em">4</text></g><g class="arc"><path d="M-66.63432367621274,156.39650542200013A170,170,0,0,1,-168.76050859666918,-20.491235643404806L0,0Z" style="fill: #8ca252;"></path><text transform="translate(-121.24355652982139,70.00000000000004)" dy=".35em">5</text></g><g class="arc"><path d="M-168.76050859666918,-20.491235643404806A170,170,0,0,1,-139.90725720192168,-96.57100694429634L0,0Z" style="fill: #b5cf6b;"></path><text transform="translate(-130.9022739759581,-49.64468418595487)" dy=".35em">6</text></g><g class="arc"><path d="M-139.90725720192168,-96.57100694429634A170,170,0,0,1,-1.8221882472727878e-13,-170L0,0Z" style="fill: #cedb9c;"></path><text transform="translate(-65.06124408612779,-123.96384359144928)" dy=".35em">7</text></g></g></svg></div>layout: no_layout
data: [
{ key: 0, value: 5 },
{ key: 1, value: 4 },
{ key: 2, value: 7 },
{ key: 3, value: 2 },
{ key: 4, value: 4 },
{ key: 5, value: 8 },
{ key: 6, value: 3 },
{ key: 7, value: 6 }
]