Public
Edited
Feb 12, 2023
{
svg.append("ellipse")
.attr("cx", 370)
.attr("cy", 100)
.attr("rx", 150)
.attr("ry", 100)
.attr("fill", "red")
.attr("fill-opacity", 0.2)
.attr("stroke", "red")
.attr("stroke-width", 5)
.attr("stroke-opacity", "0.5");
svg.append("ellipse")
.attr("cx", 400)
.attr("cy", 150)
.attr("rx", 75)
.attr("ry", 125)
.attr("fill", "yellow")
.attr("fill-opacity", 0.5)
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("stroke-dasharray", "5");
svg.append("ellipse")
.attr("cx", 400)
.attr("cy", 250)
.attr("rx", 150)
.attr("ry", 40)
.attr("fill", "black")
.attr("fill-opacity", 0)
.attr("stroke", "green")
.attr("stroke-width", 20)
.attr("stroke-opacity", "0.2");
}
svg.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 100)
.attr("height", 100)
.attr("stroke", "red")
.attr("stroke-width", 10)
.attr("fill-opacity", 0);
svg.append("rect")
.attr("x", 75)
.attr("y", 75)
.attr("width", 100)
.attr("height", 100)
.attr("rx", 10)
.attr("ry", 10)
.attr("fill", "gray")
.attr("stroke", "black")
.attr("stroke-width", "10")
.attr("stroke-opacity", .7);
svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 100)
.attr("height", 100)
.attr("rx", 10)
.attr("ry", 10)
.attr("fill", "yellow")
.attr("stroke", "blue")
.attr("stroke-width", "10")
.attr("fill-opacity", .6);
svg = d3.select("#chart")
.attr("width", 700)
.attr("height", 300);
<body>
<svg id='chart'>
</svg>
<style>
/* .reds {
fill: red;
}
.semitr {
fill-opacity: 0.5
} */
</style>
</body>
{
svg2.append("text")
.attr("font-size", 36)
.attr("fill", "red")
.attr("x", 0)
.attr("y", 100)
// Adding text
.text("45475767")
.attr("alignment-baseline", "hanging");
// .attr("text-anchor", "middle");
svg2.append("text")
.attr("font-size", 36)
.attr("fill", "red")
.attr("x", 240)
.attr("y", 100)
// Adding text
.text("45475767")
.attr("alignment-baseline", "middle"); // Middle of the black box
svg2.append("text")
.attr("font-size", 36)
.attr("fill", "red")
.attr("x", 480)
.attr("y", 100)
// Adding text
.text("45475767")
}
{
// First
svg2.append("rect")
.attr("x", 0)
.attr("y", 100)
.attr("height", 36)
.attr("width", 200)
// Second
svg2.append("rect")
.attr("x", 240)
.attr("y", 100)
.attr("height", 36)
.attr("width", 200)
// Third
svg2.append("rect")
.attr("x", 480)
.attr("y", 100)
.attr("height", 36)
.attr("width", 200)
}
svg2 =
d3.select("#chart-2")
.attr("width", 700)
.attr("height", 300);
<body>
<svg id='chart-2'>
</svg>
<style>
/* .reds {
fill: red;
}
.semitr {
fill-opacity: 0.5
} */
</style>
</body>
<body>
<svg width='300' height='100'>
<!-- "defs" make things invisible. It's good however for keeping templates -->
<defs>
<g id="coords" style="transform: translate(100px,100px) scale(3) rotate(-90deg)">
<line x1='10' y1='10' x2='200' y2='10' />
</g>
</defs>
<!-- Line with transformations -->
<use xlink:href="#coords" stroke="red"/>
<!-- Line without any transformations -->
<line x1='10' y1='10' x2='200' y2='10' stroke="blue" />
</svg>
</body>
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.
