@import url('https://fonts.googleapis.com/css?family=Droid+Serif|Raleway');
h1 { color: black; text-align: center; margin-bottom: 0px; margin-top: 15px; font-family: 'Raleway', sans-serif; }
p { color: black; text-align: center; margin-bottom: 15px; margin-top: 15px; font-family: 'Raleway', sans-serif; }
words {
padding-left: 30px; color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; }
words_summary {
padding-left: 70px; color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; }
words_text {
color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; }
words_text_area {
display:inline-block; color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; padding-left: 100px; }
calcTitle {
text-align: center; font-size: 20px; margin-bottom: 0px; font-family: 'Raleway', serif; }
hr_top {
width: 30%; margin-bottom: 0px; border: none; height: 2px; color: black; background-color: black; }
hr_bottom {
width: 30%; margin-top: 15px; border: none; height: 2px; color: black; background-color: black; }
label, input { display: inline-block; vertical-align: baseline; width: 350px; }
#button { border: 1px solid; border-radius: 10px; margin-top: 20px;
cursor: pointer; outline: none; background-color: white; color: black; font-family: 'Work Sans', sans-serif; border: 1px solid grey; /* Green */ }
#button:hover { background-color: #f6f6f6; border: 1px solid black; }
#words_table { color: black; font-family: Raleway; max-width: 350px; margin: 25px auto; line-height: 1.75; }
summary_table {
color: black; font-family: Raleway; max-width: 550px; margin: 25px auto; line-height: 1.75; padding-left: 20px; }
table { border-collapse: collapse; } th:first-child, td:first-child { border-right: 1px solid silver; text-align: right; }
td { text-align: center; }
thead td { border-top: none; }
th, td { padding: 2px; }
text_area_input {
padding-left: 35%; float: left; }
График ствола и листа отображает данные, разделяя каждое значение в наборе данных на «стебель» и «лист».
Чтобы узнать, как сделать участок стебля и листа своими руками, прочитайте этот мастер-класс .
Чтобы создать график стеблей и листьев для данного набора данных, введите данные, разделенные запятыми, в поле ниже:
//code to generate stem and leaf plot comes from https://www.rosettacode.org/wiki/Stem-and-leaf_plot
function calc() {
//remove current stem and leaf plot var element = document.getElementsByTagName('table')[0]; if(element) {element.parentNode.removeChild(element)}
var data = document.getElementById('input_data').value.match(/\d+/g).map(Number);
function has_property(obj, propname) { return typeof(obj[propname]) === "undefined" ? false : true; }
function compare_numbers(a, b) {return a-b;}
function stemplot(data, target) { var stem_data = {}; var all_stems = []; for (var i = 0; i < data.length; i++) { var stem = Math.floor(data[i] / 10); var leaf = Math.round(data[i] % 10); if (has_property(stem_data, stem)) { stem_data[stem].push(leaf); } else { stem_data[stem] = [leaf]; all_stems.push(stem); } } all_stems.sort(compare_numbers);
var min_stem = all_stems[0]; var max_stem = all_stems[all_stems.length - 1];
var table = document.createElement('table'); for (var stem = min_stem; stem <= max_stem; stem++) { var row = document.createElement('tr'); var label = document.createElement('th'); row.appendChild(label); label.appendChild(document.createTextNode(stem)); if (has_property(stem_data, stem)) { stem_data[stem].sort(compare_numbers); for (var i = 0; i < stem_data[stem].length; i++) { var cell = document.createElement('td'); cell.appendChild(document.createTextNode(stem_data[stem][i])); row.appendChild(cell); } } table.appendChild(row); } target.appendChild(table); }
stemplot(data, document.getElementById('target'));
//insert header in table var the_table = document.getElementsByTagName('table')[0]; var header_insert = the_table.createTHead(); var row_insert = header_insert.insertRow(0); var cell_insert = row_insert.insertCell(0); var cell_insert2 = row_insert.insertCell(1); cell_insert.innerHTML = "Stem"; cell_insert2.innerHTML = "Leaf";
} //end calc function