Public
Edited
Oct 4, 2022
<style>
rect {
fill: lightgray;
stroke: darkgray;
stroke-width: 2px
}
text{
alignment-baseline:hanging;
}
.red-rect{
width: 50px;
height:200px;
fill:red;
float:left;
}
</style>
<svg height="300" width="800" id="example-1">
<rect x="500" y="10" width="50" height="20"></rect>
<text x='500' y='10'> Rect1 </text>
<line x1 = '150' y1='40' x2= '100' y2='120' stroke='black'></line>
<rect x="150" y="40" width="100" height="10"></rect>
<text x='150' y='40'> Rect2 </text>
<rect x="100" y="120" width="430" height="120"></rect>
<text x='100' y='120'> Rect3 </text>
<g>
<circle cx='0' cy='0' r='10'></circle>
<rect x='50' y='0' width='50' height='15'></rect>
<text x='50' y='0'>Rect4</text>
</g>
</svg>
d3.select('#example-1').select('rect').classed('red-rect',true);
d3.select('#example-1').selectAll('rect').classed('red-rect',true);
d3.select('#example-1').select('g').attr('transform','translate(0,100)');
<svg height="300" width="800" id='example-2'></svg>
d3.select('#example-2')
.append('line')
.attr('x1',65).attr('y1',65).attr('x2',30).attr('y2',30).attr('stroke','black')
viewof Example2 = {
const circleSelection = d3.select('#example-2').selectAll('circle')
if (circleSelection.size() === 0){
d3.select('#example-2').append('circle').attr('cx',50).attr('cy',50).attr('r',30)
} else {
console.log(circleSelection.size())
}
}
dataArrayExample = [{ color: 'blue', value: 5 }, { color: 'red', value: 8 }]
// let circleSelection = d3.selectAll('circle')
// .data(dataArrayExample)
// const newElements = circleSelection.enter()
// .append('circle');
// circleSelection.exit().remove();
// circleSelection = circleSelection.merge(newElements);
// then style it like: circleSelection.attr(......)
<svg height="300" width="800" id='example-3'></svg>
circleSelection = d3.select('#example-3')
.selectAll('circle')
.data(dataArrayExample)
.join('circle')
circleSelection.attr('cx', (a,b)=>{console.log(b); return b*150+50})
.attr('cy', 150)
.attr('r',d=>d.value*10)
.attr('fill',d=>d.color)
<svg height="300" width="800" id='example-4'>
<circle cx='100' cy='200' r='50' fill='lightgray'></circle>
</svg>
d3.select('#example-4')
.selectAll('circle')
.data(dataArrayExample)
.join(
enter=>enter.append('circle')
.attr('cx', (d,i)=>i*150+50)
.attr('cy', 150)
.attr('r',d=>d.value*10)
.attr('fill',d=>d.color),
update=>update.attr('stroke','black').attr('fill','none'),
exit=>exit.remove()
)
function countdown(value, keeper) {
keeper.push(value);
if (value <= 0) { //base case or termination condition
return keeper;
} else {
return countdown(value - 1, keeper);//function calls itself
}
};
countdown(10,[])
function fib(n, sequence) {
const length = sequence.length;
if (length === n){
return sequence;
}
if (length === 0 || length === 1){
sequence.push(length)
} else{
sequence.push(sequence[sequence.length-1] + sequence[sequence.length - 2])
}
fib(n, sequence);
}
{
const arr = []
fib(15, arr)
return arr;
}
The third iteration, we have length equal to 2, so we are going into the else statement, pushing to sequence the sum of previous two elements, 0 and 1, adding 1 to the array, then call fib(10, [0, 1, 1])
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.
