The avatar for @fmiranda
Fabio Miranda
Published
Intro to Observable and D3
Edited
Sep 22, 2022
Fork of Introduction to Web (HTML, CSS, JS)
2 stars
Insert cell
# Introduction to Web (HTML, CSS, JS)

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
div = {
const div = DOM.element("div");
div.id = 'rectangle';
div.style.height = '100px';
div.style.width = '150px';
div.style.backgroundColor = "red";
return div;
}
Insert cell
Insert cell
{
div.style.height = '100px';
div.style.width = '150px';
div.style.backgroundColor = "green";

return 'div updated :)'
}
Insert cell
Insert cell
Insert cell
{
const width = 400;
const height = 200;
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', 'red');
circle.setAttribute('stroke', '#555');

svg.appendChild(circle);
}

return svg;
}
Insert cell
Insert cell
{
const dom = d3.hierarchy({
name: "html",
children: [
{
name: "head",
children: [
{name: "meta"},
{name: "title"}
]
},
{
name: "body",
children: [
{
name: "svg",
children: [
{name: "circle"},
{name: "..."},
{name: "circle"}
]
}
]
}
]
});
return graph(dom, {label: d => d.data.name})
}
Insert cell
Insert cell
Insert cell
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