{
const container = d3.select(
html`
<div class = "container">
<div id="first" class = "cell">
</div>
<div>
${slider}
</div>
<div id="second" class = "cell">
</div>
<div>
${slider2}
</div>
</div>
`
)
container.select("#first")
.append("svg")
.append("circle")
.attr("r",30)
.attr("fill","white")
.attr("stroke","black")
.attr("cx",s)
.attr("cy",150)
container.select("#second")
.append("svg")
.append("g").attr("transform",`translate(400,150)`)
.append("g").attr("transform",`rotate(${s2})`)
.append("rect")
.attr("width",80)
.attr("height",80)
.attr("fill","white")
.attr("stroke","black")
.attr("x",-40)
.attr("y",-40)
return container.node()
}
html`
<style>
.container{
background-color: white;
height: 100%;
padding: 20px;
}
.cell{
height: 300px;
width: 800px;
border: 3px black solid;
}
#first{
background-color: pink;
margin-bottom: 10px;
}
#second{
background-color: skyblue;
margin-top: 10px;
margin-bottom: 10px;
}
.cell svg{
width: 100%;
height: 100%;
}
</style>
`
slider = Range([0,800],{step:1})
s = Generators.input(slider)
slider2 = Range([0,360],{step:1})
s2 = Generators.input(slider2)
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.
