Published
Edited
Feb 20, 2019
Insert cell
Insert cell
Insert cell
Insert cell
html`
<div>
<p> 5</p>
<p>20</p>
<p>10</p>
<p>25</p>
<p>15</p>
</div>
`
Insert cell
Insert cell
html`
<div>
<p> ${ data[0] }</p>
<p> ${ data[1] }</p>
<p> ${ data[2] }</p>
<p> ${ data[3] }</p>
<p> ${ data[4] }</p>
</div>
`
Insert cell
Insert cell
{
const div = document.createElement("div")
for(let i=0; i < data.length; i++){
let p = document.createElement("p")
p.innerText = data[i]
div.appendChild(p);
}
return div
}
Insert cell
Insert cell
{
const div = d3.create("div")

div.selectAll("p")
.data(data)
.enter()
.append("p")
.text(d => d)
return div.node()
}
Insert cell
Insert cell
html`
<div>
<div style="width: 50px; height: 30px; background-color: brown; margin: 5px"></div>
<div style="width: 200px; height: 30px; background-color: brown; margin: 5px"></div>
<div style="width: 100px; height: 30px; background-color: brown; margin: 5px"></div>
<div style="width: 250px; height: 30px; background-color: brown; margin: 5px"></div>
<div style="width: 150px; height: 30px; background-color: brown; margin: 5px"></div>
</div>
`
Insert cell
Insert cell
html`<svg width="200" height="200" fill="blue" >
<rect x="0" y="0" width="50" height="30"></rect>
<rect x="0" y="40" width="200" height="30"></rect>
<rect x="0" y="80" width="100" height="30"></rect>
<rect x="0" y="120" width="250" height="30"></rect>
<rect x="0" y="160" width="150" height="30"></rect>
</svg>`
Insert cell
Insert cell
{
const namespace = "http://www.w3.org/2000/svg"
const svg = document.createElementNS(namespace, "svg")
svg.setAttributeNS(null, "width", 200);
svg.setAttributeNS(null, "height", 200);
svg.setAttributeNS(null, "fill", "blue");
for(let i=0; i < data.length; i++){
let rect = document.createElementNS(namespace, "rect")
rect.setAttributeNS(null, "height", 30);
rect.setAttributeNS(null, "width", 10 * data[i]);
rect.setAttributeNS(null, "x", 0);
rect.setAttributeNS(null, "y", 40 * i);
svg.appendChild(rect)
}
return svg
}

Insert cell
Insert cell
{
const namespace = "http://www.w3.org/2000/svg"
// const svg = document.createElementNS(namespace, "svg")
// Replaced by
const svg = d3.create("svg")
// svg.setAttributeNS(null, "width", 200);
// svg.setAttributeNS(null, "height", 200);
// svg.setAttributeNS(null, "fill", "blue");
svg.attr("width", 200)
svg.attr("height", 200)
svg.attr("fill", 200)
for(let i=0; i < data.length; i++){
let rect = document.createElementNS(namespace, "rect")
rect.setAttributeNS(null, "height", 30);
rect.setAttributeNS(null, "width", 10 * data[i]);
rect.setAttributeNS(null, "x", 0);
rect.setAttributeNS(null, "y", 40 * i);
svg.appendChild(rect)
}
svg.selectAll("rect")
.data(data)
.enter()
.
return svg
}
Insert cell

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.
Learn more