Public
Edited
Sep 5, 2023
1 star
{
const svg = html`<svg viewBox="0 0 ${width} ${height}"></svg>`;
const selSvg = d3.select(svg);
// D3 code goes here
selSvg.append("circle").attr("r", 30).attr("fill", "steelblue");
return svg;
}
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// D3 code goes here
selSvg
.append("circle")
.attr("r", 50) // set radius to 50
.attr("cx", width / 2) // center the circle horizontally
.attr("cy", height / 2) // center the circle vertically
.attr("fill", "steelblue"); // fill color
return selSvg.node();
}
height = width * 0.6
d3 = require("d3-selection@2")
{
const target = html`<div class='tableauPlaceholder' id='viz1693872917179' style='position: relative'><noscript><a href='#'><img alt='Customer ' src='https://public.tableau.com/static/images/W2/W209-2023-Fall-Sec5-Charlton-HW3/Customer/1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='W209-2023-Fall-Sec5-Charlton-HW3/Customer' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/W2/W209-2023-Fall-Sec5-Charlton-HW3/Customer/1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en-US' /><param name='filter' value='publish=yes' /></object></div>`;
// Return the div first so the following code can find it
yield target;
var divElement = document.getElementById("viz1693872917179");
var vizElement = divElement.getElementsByTagName("object")[0];
if (divElement.offsetWidth > 800) {
vizElement.style.width = "100%";
vizElement.style.height = divElement.offsetWidth * 0.75 + "px";
} else if (divElement.offsetWidth > 500) {
vizElement.style.width = "100%";
vizElement.style.height = divElement.offsetWidth * 0.75 + "px";
} else {
vizElement.style.width = "100%";
vizElement.style.height = "727px";
}
var scriptElement = document.createElement("script");
scriptElement.src = "https://public.tableau.com/javascripts/api/viz_v1.js";
vizElement.parentNode.insertBefore(scriptElement, vizElement);
yield target;
}
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.
