ZaynahGiti/dailycssimages-big-o-complexity-chart.markdown

## dailycssimages-big-o-complexity-chart.markdown

      
    Raw
  

              dailycssimages-big-o-complexity-chart.markdown
            
          
    #DailyCSSImages: Big-O complexity Chart

A Pen by ZaynahGiti on CodePen.
License.

  
## index.html

  <body>

<h2 class="title">Big-O Complexity Chart</h2>


        <div>
          <table id="legendList" class="table">
            <tbody>
              <tr>
                <td><code class="red">Horrible</code></td>
                <td><code class="orange">Bad</code></td>
                <td><code class="yellow">Fair</code></td>
                <td><code class="yellow-green">Good</code></td>
                <td><code class="green">Excellent</code></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="chart-area">
          <svg id="chart" width="800" height="500" xmlns="http://www.w3.org/2000/svg">
            <!-- horrible region -->
            <path d="M50 450 L 50 0 L 800 0 L 800 450 Z" fill="#ff8989"></path>
            <!-- bad region -->
            <path d="M50 450 L 800 0 L 800 450 Z" fill="#FFC543"></path>
            <!-- fair region -->
            <path d="M50 450 L 800 450 L 800 330 Z" fill="yellow"></path>
            <!-- good region -->
            <path d="M50 450 L 800 450 L 800 410 Z" fill="#C8EA00"></path>
            <!-- excellent region -->
            <path d="M50 450 L 800 450 L 800 440 Z" fill="#53d000"></path>

            <!-- axes -->
            <path d="M50 0 L 50 450 L 800 450" fill="transparent" stroke="black" stroke-width="2"></path>

            <path d="M50 448 L 800 448" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="700" y="438" fill="black">O(log n), O(1)</text>

            <path d="M50 450 L 800 400" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="760" y="390" fill="black">O(n)</text>

            <path d="M50 450 Q 400 350, 800 150" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="630" y="190" fill="black">O(n log n)</text>

            <path d="M50 450 Q 180 380, 250 0" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="260" y="30" fill="black">O(n^2)</text>

            <path d="M50 450 C 100 430, 120 350, 120 0" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="125" y="20" fill="black">O(2^n)</text>

            <path d="M50 450 C 80 450, 80 350, 80 0" fill="transparent" stroke="black" stroke-width="2"></path>
            <text x="80" y="20" fill="black">O(n!)</text>

            <text x="0" y="0" transform="translate(30 230) rotate(-90)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-size:20px; color: #555; font-style: italic;" fill="black">Operations</text>
            <text x="0" y="0" transform="translate(420 470)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-style: italic;" fill="black">Elements</text>
          </svg>
        </div>
</body>


## style.scss
$body-font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
$titleColor:#000;
$table-font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
$green-bg:#53d000;
$green-border:#286500;
$yellow-green-bg:#C8EA00;
$yellow-green-border:#286500;
$yellow-bg:yellow;
$yellow-border:#6f6e00;
$orange-bg:#FFC543;
$orange-border:#b20000;
$red-border:#b20000;
$red-bg:#ff8989;

body {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  font-family:$body-font-family;

}


h2 {
  font-size: 24px;
  line-height: 24px;
  color: $titleColor;
  margin-top: 30px;

}


#tablesWrapper {
  display: inline-block;
}

table {
  display: inline-block;

}

table code {
  font-size: 12px;
  padding: 3px;
  font-family: $table-font-family;
  display: inline-block;
  border-radius: 2px;
}

table th {
  font-weight: bold;
  border-radius: 2px;
  padding: 3px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  background-image: linear-gradient(top,#fff,#f2f2f2);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));
  background-image: -webkit-linear-gradient(top,#fff,#f2f2f2);
  background-image: -o-linear-gradient(top,#fff,#f2f2f2);
  background-image: linear-gradient(to bottom,#fff,#f2f2f2);
  background-repeat: repeat-x;
  font-weight: normal;
  text-align: left;
}

table tr td {
  white-space: nowrap;
}

table tr td:first-child {
  text-align: left;
}

#legend tr td:first-child {
  text-align: center;
}


.green {
  border: 1px solid $green-border;
  color: black;
  background-color: $green-bg;
}

.yellow-green {
  border: 1px solid $yellow-green-border;
  color: black;
  background-color: $yellow-green-bg;
}

.yellow {
  border: 1px solid $yellow-border;
  color: black;
  background-color: $yellow-bg;
}

.orange {
  border: 1px solid $orange-border;
  color: black;
  background-color: $orange-bg;
}

.red {
  border: 1px solid $red-border;
  color: black;
  background-color: $red-bg;
}


.title {
  display: inline-block;
  width: 800px;
  text-align: center;
  margin-left: 300px;
}

#legendList {
  margin-left: 560px;
}

.chart-area{
  margin-left:20%;
}


#chart {
  margin-top: 0;
  max-width: 800px;
}

	<body>

	<h2 class="title">Big-O Complexity Chart</h2>


	<div>
	<table id="legendList" class="table">
	<tbody>
	<tr>
	<td><code class="red">Horrible</code></td>
	<td><code class="orange">Bad</code></td>
	<td><code class="yellow">Fair</code></td>
	<td><code class="yellow-green">Good</code></td>
	<td><code class="green">Excellent</code></td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="chart-area">
	<svg id="chart" width="800" height="500" xmlns="http://www.w3.org/2000/svg">
	<!-- horrible region -->
	<path d="M50 450 L 50 0 L 800 0 L 800 450 Z" fill="#ff8989"></path>
	<!-- bad region -->
	<path d="M50 450 L 800 0 L 800 450 Z" fill="#FFC543"></path>
	<!-- fair region -->
	<path d="M50 450 L 800 450 L 800 330 Z" fill="yellow"></path>
	<!-- good region -->
	<path d="M50 450 L 800 450 L 800 410 Z" fill="#C8EA00"></path>
	<!-- excellent region -->
	<path d="M50 450 L 800 450 L 800 440 Z" fill="#53d000"></path>

	<!-- axes -->
	<path d="M50 0 L 50 450 L 800 450" fill="transparent" stroke="black" stroke-width="2"></path>

	<path d="M50 448 L 800 448" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="700" y="438" fill="black">O(log n), O(1)</text>

	<path d="M50 450 L 800 400" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="760" y="390" fill="black">O(n)</text>

	<path d="M50 450 Q 400 350, 800 150" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="630" y="190" fill="black">O(n log n)</text>

	<path d="M50 450 Q 180 380, 250 0" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="260" y="30" fill="black">O(n^2)</text>

	<path d="M50 450 C 100 430, 120 350, 120 0" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="125" y="20" fill="black">O(2^n)</text>

	<path d="M50 450 C 80 450, 80 350, 80 0" fill="transparent" stroke="black" stroke-width="2"></path>
	<text x="80" y="20" fill="black">O(n!)</text>

	<text x="0" y="0" transform="translate(30 230) rotate(-90)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-size:20px; color: #555; font-style: italic;" fill="black">Operations</text>
	<text x="0" y="0" transform="translate(420 470)" style="dominant-baseline: middle; text-anchor: middle; font-size:20px; color: #555; font-style: italic;" fill="black">Elements</text>
	</svg>
	</div>
	</body>
	$body-font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	$titleColor:#000;
	$table-font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
	$green-bg:#53d000;
	$green-border:#286500;
	$yellow-green-bg:#C8EA00;
	$yellow-green-border:#286500;
	$yellow-bg:yellow;
	$yellow-border:#6f6e00;
	$orange-bg:#FFC543;
	$orange-border:#b20000;
	$red-border:#b20000;
	$red-bg:#ff8989;

	body {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	font-family:$body-font-family;

	}



	h2 {
	font-size: 24px;
	line-height: 24px;
	color: $titleColor;
	margin-top: 30px;

	}


	#tablesWrapper {
	display: inline-block;
	}

	table {
	display: inline-block;

	}

	table code {
	font-size: 12px;
	padding: 3px;
	font-family: $table-font-family;
	display: inline-block;
	border-radius: 2px;
	}

	table th {
	font-weight: bold;
	border-radius: 2px;
	padding: 3px;
	border: 1px solid #ddd;
	background-color: #fafafa;
	background-image: linear-gradient(top,#fff,#f2f2f2);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));
	background-image: -webkit-linear-gradient(top,#fff,#f2f2f2);
	background-image: -o-linear-gradient(top,#fff,#f2f2f2);
	background-image: linear-gradient(to bottom,#fff,#f2f2f2);
	background-repeat: repeat-x;
	font-weight: normal;
	text-align: left;
	}

	table tr td {
	white-space: nowrap;
	}

	table tr td:first-child {
	text-align: left;
	}

	#legend tr td:first-child {
	text-align: center;
	}



	.green {
	border: 1px solid $green-border;
	color: black;
	background-color: $green-bg;
	}

	.yellow-green {
	border: 1px solid $yellow-green-border;
	color: black;
	background-color: $yellow-green-bg;
	}

	.yellow {
	border: 1px solid $yellow-border;
	color: black;
	background-color: $yellow-bg;
	}

	.orange {
	border: 1px solid $orange-border;
	color: black;
	background-color: $orange-bg;
	}

	.red {
	border: 1px solid $red-border;
	color: black;
	background-color: $red-bg;
	}



	.title {
	display: inline-block;
	width: 800px;
	text-align: center;
	margin-left: 300px;
	}

	#legendList {
	margin-left: 560px;
	}

	.chart-area{
	margin-left:20%;
	}



	#chart {
	margin-top: 0;
	max-width: 800px;
	}