Public
Edited
Jan 26, 2023
6 forks
2 stars
<p class='name'>John</p>
<p class='city'>New York</p>
<p class='name'>Mary</p>
<p class='city'>Rio de Janeiro</p>
<p class='name'>Peter</p>
<p id='serial-number'>Serial Number: 0123345</p>
<style>
/* .name{
background-color: green;
}
*/
.city{
background-color: red;
}
#serial-number{
border-style: solid;
border-color: purple;
}
</style>
<div id='testid'>
<p>Child 1</p>
<p>Child 2</p>
<p>Child 3</p>
</div>
{
const divreference = document.querySelector('#testid')
return divreference;
// return divreference.children[1].innerText;
}
{
const p = document.createElement('p');
p.textContent = 'INFOVIS123';
return p;
}
{
const div = document.createElement("div");
div.id = 'abc';
return div;
}
{
const div = document.querySelector('#abc');
div.style.height = '100px';
div.style.width = '100px';
div.style.backgroundColor = "red";
// div.style.borderRadius = '100%';
return 'div updated :)'
}
{
const width = 400;
const height = 200;
// element parameters
const radius = 20;
const svg = DOM.svg(width, height);
for (let id = 0; id < 20; id ++) {
const circle = DOM.element("svg:circle");
circle.setAttribute('cx', Math.random() * (width - 2 * radius) + radius);
circle.setAttribute('cy', Math.random() * (height - 2 * radius) + radius);
circle.setAttribute('r', radius * ( 0.5 * Math.random() + 0.5) );
circle.setAttribute('fill', 'blue');
circle.setAttribute('stroke', '#555');
svg.appendChild(circle);
}
return svg;
}
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.
