Public
Edited
Aug 29, 2023
addSteps = (binary1, binary2) => {
var scrollable = d3.create("div")
.style("overflow-x", "scroll")
var invalid
if (invalid = (invalidate(binary1) | invalidate(binary2))) {
scrollable
.append("p")
.style("color", "#b3261e")
.text(`"${invalid[0]}" não é um número válido: "${invalid[1]}" não existe na base 2`)
return scrollable.node()
}
var [sum, carries] = add(binary1, binary2);
var table = d3.create("table")
table.append("tr")
.selectAll(`.td`)
.data(carries)
.enter()
.append("td")
.style("text-align", "left")
.html(d => d != 0 ? d : "")
table.append("tr")
.selectAll(`.td`)
.data(binary1)
.enter()
.append("td")
.style("border-top", "1px solid white")
.html(d => d)
table.append("tr")
.selectAll(`.td`)
.data(binary2)
.enter()
.append("td")
.style("border-top", "1px solid white")
.html(d => d)
table.append("tr")
.selectAll(`.td`)
.data(sum)
.enter()
.append("td")
.style("border-top", "1px solid black")
.html(d => d)
var result = scrollable
.append("p")
.style("text-align", "center")
result
.append("span")
.text(`${binary1} + ${binary2} = ${sum.join("")}`)
scrollable.append(() => table.node())
return scrollable.node()
}
html`
<style type="text/css">
td, th {
width: 300px;
text-align: center;
}
</style>
`
abs = (binary) => isNegative(binary) ? twoComplement(binary) : binary
twoComplement = (binary) => add([...binary].map((digit) => digit == "0" ? 1 : "0").join(""), fit("1", binary.length)).join("")
isNegative = (binary) => binary.startsWith("1")
fit = (binary, width) => binary.slice(-width, binary.length).padStart(width, "0")
add = (binary1, binary2) => {
binary1 = [...binary1];
binary2 = [...fit(binary2, binary1.length)];
var sum = [], carry = 0, carries = [carry], digit;
for (var i = binary1.length - 1; i >= 0; i--) {
digit = +binary1[i] + +binary2[i] + carry;
if (digit > 1) {
digit -= 2;
carry = 1;
} else {
carry = 0;
}
sum.unshift(digit);
carries.unshift(carry);
}
carries = carries.slice(-binary1.length, carries.length);
return [sum, carries];
}
invalidate = (binary) => {
for (var i in binary) {
var digit = binary[i]
if (isNaN(digit) || digit > 1) return [binary, digit]
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
