Public
Edited
Feb 8
Fork of D3 Select
Insert cell
htl.html`
<style type="text/css">
.highlight {
fill: orange;
}
.hollow_circle {
fill: pink;
stroke: red;
stroke-width: 5px;
}
</style>
<h1 id="title">D3 Select Exercise</h1>

<div id="paragraphs">
<p class="description">This is a paragraph.</p>
<p class="description">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>
`

Insert cell
{
// The code you changed here will reflect to the html above
// Task 1: Select all circles and change their radius to 30

// Task 2: Select the first circle and add a class 'hollow_circle' to it

// Task 3: Select the circle with the fill color 'green', change its radius to 70 and add a black stroke with width 5px

// Task 4: Select the h1 element (id: title) and change its text to your name

// Task 5: Remove "Another paragraph."

// Task 6: Select the svg and append another circle to the right

// Extra Task: if you finish the tasks and want to try something more
// the following data function will bind data array to all circles
// then, attribute funciton can take a function as input just as map() function in JS
// try use the data array to change the size of the circles
let data = [12, 50, 42]
d3.selectAll("circle")
.data(data)
}
Insert cell
Insert cell
htl.html`
<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>

<script>
var selection_1 = d3.selectAll("circle");
selection_1.attr("r", "30");
</script>
`
Insert cell
Insert cell
htl.html`
<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>

<script>
var selection_3= d3.select("circle")
selection_3.classed("hollow_circle", true);
</script>
`
Insert cell
Insert cell
htl.html`
<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>
<script>
var selection_3 = d3.selectAll("circle")
selection_3.style("fill", "green")
selection_3.style("stroke", "black")
selection_3.attr("r", 70)
selection_3.style("stroke-width", "5px");
</script>
`
Insert cell
Insert cell
Insert cell
Insert cell
htl.html`
<div id="paragraphs">
<p class="description">This is a paragraph.</p>
<p class="description">Another paragraph.</p>
<p class="description">Yet another paragraph.</p>
</div>

<script>
var selection_5 = d3.select("paragraph")
selection_5.remove();
</script>
`
Insert cell
Insert cell
htl.html`
<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>
<script>
var newcircle = d3.select("svg");
svg.append("circle")
.attr("cx", 700)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "purple");
</script>
`
Insert cell
Insert cell
htl.html`
<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>
<script>
let data = [12, 50, 42];
let svg = d3.select("svg");
let circles = svg.selectAll("circle")
.data(data);
circles.enter()
.append("circle")
.attr("cx", (d, i) => (i + 1) * 100)
.attr("cy", 50)
.attr("r", d => d / 2)
.attr("fill", "purple");
</script>
`
Insert cell
Insert cell
htl.html`

<svg width="500" height="100">
<circle cx="50" cy="50" r="10" fill="blue"></circle>
<circle cx="150" cy="50" r="10" fill="green"></circle>
<circle cx="250" cy="50" r="10" fill="red"></circle>
</svg>
<script>
data = [20, 40, 60];
d3.selectAll("circle")
.data(data)
.attr("r", d => d);
</script>
`
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