@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