md`# exercise`
d3 = require("d3@6")
d3.range(9)
{
var color = "blue";
color = "black"; // reassign
var color = "pink"; // redeclare
return color
}
{
let color = "blue";
color = "black";
// let color = "pink";
return color
}
{
const color = "blue";
// color = "black";
// const color = "pink";
return color
}
{
const listOfComputerComp = ['apple', 'dell'];
listOfComputerComp.push('compaq');
// listOfComputerComp = [1, 1];
// listOfComputerComp.pop();
return listOfComputerComp;
}
jsFile = {
//Global Scope
let milkyWay = 'I am globally scoped, so you can access me anywhere!';
{ //Block Scope
var earth = 'Earth';
const sun = 'Sun';
let house = 'My house';
}
//UNCOMMENT THESE ONE AT A TIME TO SEE WHAT HAPPENS (REMEMBER TO RECOMMENT THE LINE YOU UNCOMMENTED ALREADY)
return earth;
// return milkyWay
// return house;
// return sun;
}
html`
<div style="width: 900">
<svg id="demo" width="500" height="100" style="background-color: skyblue; display: block; margin: auto">
<rect x="200" y="30" width="100" height="70" style="fill: red"></rect>
</svg>
</div>
`
dataset = [1,2,3,4,5,6]
colors = ["red", "orange", "green", "blue"];
scaleBandColor = {
const svg = d3.create("svg").attr("width", 580).attr("height", 100).style("background-color", "lightblue")
let colors = ["red", "orange", "green", "blue"];
let xScale = d3.scaleBand()
.domain(colors)
.range([25, 555])
.paddingInner([.5]);
let xAxis = d3.axisBottom(xScale)
svg.append("g")
.attr("transform", "translate(0, 70)")
.call(xAxis);
svg.selectAll("rect")
.data(colors)
.join("rect")
.attr("x", d => xScale(d))
.attr("y", 40)
.attr("width", d => xScale.bandwidth())
.attr("height", 30)
.attr("fill", d => d)
return svg.node()
}
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.
