Генератор стеблей и листьев

@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

Замечательно! Вы успешно подписались.
Добро пожаловать обратно! Вы успешно вошли
Вы успешно подписались на кодкамп.
Срок действия вашей ссылки истек.
Ура! Проверьте свою электронную почту на наличие волшебной ссылки для входа.
Успех! Ваша платежная информация обновлена.
Ваша платежная информация не была обновлена.