This is the CSS block to define the styles of your figure
<style type="text/css">
.highlight {
fill: orange;
}
.hollow_circle {
fill: pink;
stroke: red;
stroke-width: 5px;
}
</style>
{
// instead of selecting and appending elements to html defined in another file
// we can directly create div in JS
let div = d3.create("div");
let paragraph_div = div.append("div")
.attr("id", "paragraphs");
let text1 = paragraph_div.append("p")
.classed("description", true)
.attr("id", "name")
.text("This is a paragraph.");
let text2 = paragraph_div.append("p")
.classed("description", true)
.attr("id", "to_be_removed")
.text("Another paragraph.");
let text3 = paragraph_div.append("p")
.classed("description", true)
.text("Yet another paragraph.");
let svg = div.append("svg")
svg.attr('width', 1000)
.attr('height', 300);
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "blue");
svg.append("circle")
.attr("cx", 300)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "green");
svg.append("circle")
.attr("cx", 500)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "red");
// The above code is exactly the same as the html code below:
/*
<div>
<div id="paragraphs">
<p class="description" id="name">This is a paragraph.</p>
<p class="description" id="to_be_removed">Another paragraph.</p>
<p class="description">Yet another paragraph.</p>
</div>
<svg width="1000" height="300">
<circle cx="100" cy="100" r="50" fill="blue"></circle>
<circle cx="300" cy="100" r="50" fill="green"></circle>
<circle cx="500" cy="100" r="50" fill="red"></circle>
</svg>
</div>
*/
//////////////////////////////////
// The code you changed here will reflect to the created div and svg before
// Task 1: Select all circles and change their radius to 30
// I did the task 1 for you to show a caveat
// If you do this like in the tutorial, nothing will happen
d3.selectAll("circle")
.attr('r', 30);
// This is because before this cell block returns, there is no html element for you to select from.
// you will need to change from d3.selectAll to div.selectAll
// div here is the div you created at the beginning of the code let div = d3.create("div");
div.selectAll("circle")
.attr('r', 30);
// you can also do svg.selectAll() as svg is an intermedia node you created before
// That is all, you can follow this and finish all other tasks.
// Task 2: Select the first circle and add a class 'hollow_circle' to it
div.select("circle").classed("hollow_circle",true);
// Task 3: Select the circle with the fill color 'green', change its radius to 70 and add a black stroke with width 5px
div.select("[fill='green']").style("r", 70).style("stroke", "black").style("stroke-width", "5px");
// Task 4: Select the "This is a paragraph" (id: title) and change its text to your name
div.select("[id='name']").text("Archana");
// Task 5: Remove "Another paragraph."
div.select("[id='to_be_removed']").remove();
// Task 6: Select the svg and append another circle to the right
div.select("svg").append("circle").style("cx", 700).style("cy", 100).style("r", 50).style("fill","purple");
//////////////////////////////////
// finally, we need to return div.node() to let Observable show what we created.
return div.node()
}
{
// js block to modify the HTML block
// notice this function will modify all the content in the webpage, even the previous div we created using D3.
// d3.selectAll("circle")
// .attr('r', 10);
}
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.
