d3 = require('d3');
html`
<svg height="120" width="120">
<rect id="rect-1" x="10" y="10" width="100" height="100"></rect>
</svg>
`
viewof settingStyle = {
let rectangleSelection = d3.select('#rect-1');
rectangleSelection.style('fill', 'firebrick');
rectangleSelection.style('stroke', 'black');
rectangleSelection.style('stroke-width', 4);
}
html`
<svg height="120" width="120">
<rect id="rect-2" x="10" y="10" width="100" height="100"></rect>
</svg>
`
viewof settingStyleWithChaining = {
let rectangleSelection = d3.select('#rect-2')
.style('fill', 'firebrick')
.style('stroke', 'black')
.style('stroke-width', 4);
}
html`
<svg height="200" width="200" id='rectangle-list-container'>
<rect x="10" y="10" width="100" height="100"></rect>
<rect x="30" y="30" width="100" height="100"></rect>
<rect x="50" y="50" width="100" height="100"></rect>
<rect x="70" y="70" width="100" height="100"></rect>
</svg>
`
viewof settingStyleForMultipleElements = {
let containerSelection = d3.select('#rectangle-list-container');
let rectangleListSelection = containerSelection.selectAll('rect')
.style('fill', 'firebrick')
.style('stroke', 'black')
.style('stroke-width', 4);
}
initialCircleSizes = [
{radius: 18, borderWidth: 4},
{radius: 22, borderWidth: 2},
{radius: 16, borderWidth: 6},
{radius: 29, borderWidth: 7},
{radius: 35, borderWidth: 1}
];
function drawCircles(containerId, dataArray)
{
// First select the container
let svg = d3.select(containerId);
// Get your selection object (circles), and bind it to the data
let circles = svg.selectAll('circle')
.data(dataArray);
// UPDATE the elements that already exists
circles.attr('fill', 'wheat');
// add new elements for data points that are ENTERing
let circleEnter = circles.enter()
.append('circle')
.attr('stroke', 'black');
// remove the elements that have EXITed from the dataset
circles.exit().remove();
// MERGE the new and existing data
circles = circleEnter.merge(circles);
// set style and position for both the new and existing elements
circles.attr('cx', (d, i) => i*100+50)
.attr('cy', 100)
.attr('stroke', 'firebrick')
.attr('stroke-width', d => d.borderWidth)
.attr('r', d => d.radius);
}
viewof EnterExitMergeInitialLoad = {
let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy
drawCircles('#circle-list-container-1', circleSizes);
return md`**Initial Load **`}
viewof EnterExitMergeAdded = {
let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy
drawCircles('#circle-list-container-2', circleSizes);
circleSizes.push({radius: 12, borderWidth: 4});
circleSizes.push({radius: 22, borderWidth: 2});
circleSizes.push({radius: 19, borderWidth: 6});
drawCircles('#circle-list-container-2', circleSizes);
return md`**Data Added **`}
html`
<svg height="200" width="800" id='circle-list-container-2'>
</svg>
`
viewof EnterExitMergeRemoved = {
let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy
drawCircles('#circle-list-container-3', circleSizes);
circleSizes.splice(2, 1); // removes 1 element at index 3
drawCircles('#circle-list-container-3', circleSizes);
return md`**Data Removed**`}
html`
<svg height="200" width="800" id='circle-list-container-3'>
</svg>
`
viewof EnterExitMergeJoin = {
let drawCirclesWithJoin = (containerId, dataArray) =>
{
let svg = d3.select(containerId);
let circles = svg.selectAll('circle').data(dataArray); // Update
circles.join(
enter =>
{
enter.append('circle')
.attr('cx', (d, i) => i*100+50)
.attr('cy', 100)
.attr('stroke', 'firebrick')
.attr('stroke-width', d => d.borderWidth)
.attr('r', d => d.radius);
},
update =>
{
update.attr('fill','wheat');
},
exit => exit.remove()
);
}
let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy
drawCirclesWithJoin('#circle-list-container-4', circleSizes);
circleSizes.push({radius: 12, borderWidth: 4});
circleSizes.push({radius: 22, borderWidth: 2});
circleSizes.push({radius: 19, borderWidth: 6});
drawCirclesWithJoin('#circle-list-container-4', circleSizes);
return md`**Recreating using Join**`}
html`
<svg height="200" width="800" id='circle-list-container-4'>
</svg>
`
viewof EnterExitMergeJoinSimple = {
let drawCirclesWithJoinSimple = (containerId, dataArray) =>
{
let svg = d3.select(containerId);
let circles = svg.selectAll('circle')
.data(dataArray)
.join('circle')
.attr('cx', (d, i) => i*100+50)
.attr('cy', 100)
.attr('stroke', 'firebrick')
.attr('stroke-width', d => d.borderWidth)
.attr('r', d => d.radius)
.attr('fill', 'wheat');
}
let circleSizes = JSON.parse(JSON.stringify(initialCircleSizes)); // deep copy
drawCirclesWithJoinSimple('#circle-list-container-5', circleSizes);
circleSizes.push({radius: 12, borderWidth: 4});
circleSizes.push({radius: 22, borderWidth: 2});
circleSizes.push({radius: 19, borderWidth: 6});
drawCirclesWithJoinSimple('#circle-list-container-5', circleSizes);
return md`**Simplified join scenario**`}
html`
<svg height="200" width="800" id='circle-list-container-5'>
</svg>
`
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 calculateFileSize(fileObject)
{
if (fileObject.type === "file")
{
// termination condition
return fileObject.size;
}
else
{
let fileSize = 0;
for (let child of fileObject.children)
{
// recursive call
fileSize += calculateFileSize(child);
}
return fileSize;
}
}
calculateFileSize(rootNode);
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.
