Published
Edited
Jun 18, 2020
radius = 12
area = Math.PI * Math.pow(radius, 2);
visualChannels.length
{
let a = [1,2,3]
let b = [4,6,6]
return a.concat(b)
}
apple = ({
name: 1,
age: 2
})
apple.age
{
let fruit = {
apple: 1,
banana: 2
}
return fruit.banana
}
convert = (num)=>{
return num.value
}
function convert2(num){
return num.value;
}
{
let a = {
value: 1
}
return convert2(a)
}
function getDataFromServer(num, callback) {
setTimeout(function(){
return callback(num);
}, 0)
}
mutable num = 2
getDataFromServer(2, function (num){
mutable num = 3
})
d3 = require('d3@5')
mutable i = null;
a = {
while(true) yield Promises.delay(1000, mutable i += 1);
}
html`
<svg width="120" height="120">
<line x1=10 y1 = 50 x2=100 y2=100 stroke="black">
</svg>
`
linearScale = d3.scaleLinear().range([0,100]).domain([0, 40])
[10, 20, 30, 50].map(item => linearScale(item))
{
const height = 60;
const svg = d3.select(DOM.svg(width, height));
const margin = {left: 30, top: 10, right: 10, bottom: 30};
const xScale = d3.scaleLinear()
.range([margin.left, width-margin.right])
.domain([0, 40])
svg.append('g').call(d3.axisBottom(xScale))
return svg.node()
}
{
const height = 600;
const svg = d3.select(DOM.svg(60, height));
const margin = {left: 30, top: 10, right: 10, bottom: 30}
const yScale = d3.scaleLinear()
.range([height-margin.bottom, margin.top])
.domain([0, 40])
svg.append('g').call(d3.axisLeft(yScale)).attr('transform', `translate(${margin.left}, 0)`);
return svg.node()
}
{
const height = 60
const svg = d3.select(DOM.svg(width, height))
const margin = {left: 30, top: 10, right: 10, bottom: 20 }
const xScale = d3.scaleLinear()
.range([margin.left, width-margin.right])
.domain([0, 40])
svg.append('g')
.call(d3.axisBottom(xScale))
.attr('transform', `translate(0, ${height-margin.bottom})`)
svg.selectAll('circle')
.data([10, 20, 30, 40])
.enter()
.append('circle')
.attr('cx', d => xScale(d))
.attr('cy', 20)
.attr('r', 10)
.attr('fill', 'SteelBlue')
return svg.node()
}
{
const height = 600
const svg = d3.select(DOM.svg(width, height))
const margin = {left: 30, top: 10, right: 10, bottom: 20 }
const yScale = d3.scaleLinear()
.range([height-margin.bottom, margin.top])
.domain([0, 40])
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left}, 0)`)
svg.selectAll('circle')
.data([10, 20, 30, 40])
.enter()
.append('circle')
.attr('cy', d => yScale(d))
.attr('cx', 50)
.attr('r', 10)
.attr('fill', 'SteelBlue')
return svg.node()
}
exponentialData = {
let exponentialData = []
for(let i=0; i<= 4; i++){
exponentialData.push({
x: i,
y: 5*Math.pow(2, i)
})
}
yield exponentialData
}
d3.extent(exponentialData.map(data => data.x))
d3.extent(exponentialData.map(data => data.y))
{
const height = 600
const svg = d3.select(DOM.svg(width, height))
const margin = {left: 30, top: 10, right: 10, bottom:20 }
const xScale = d3.scaleLinear()
.range([margin.left, width-margin.right])
.domain(d3.extent(exponentialData.map(data => data.x)))
const yScale = d3.scaleLinear()
.range([height-margin.bottom, margin.top])
.domain(d3.extent(exponentialData.map(data => data.y)))
svg.append('g')
.call(d3.axisBottom(xScale))
.attr('transform',`translate(0, ${height-margin.bottom})`)
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left},0)`)
svg.selectAll('circle')
.data(exponentialData)
.enter()
.append('circle')
.attr('cx', d=>xScale(d.x))
.attr('cy', d=>yScale(d.y))
.attr('r', 10)
.attr('fill', 'SteelBlue')
return svg.node()
}
{const line = d3.line()
.x(d => d.x)
.y(d => d.y)
return line([{x:3,y:4}])
}
lineData = [[1,2]]
{
let lineGenerator = d3.line()
return lineGenerator(lineData);
}
d3.line().x(d=>d[0]).y(d=>d[1])(lineData)
{
const exponentialData = []
for(let i=0; i<= 4; i++){
exponentialData.push({
x: i,
y: Math.pow(2, i)
})
}
const height = 400
const svg = d3.select(DOM.svg(width, height))
const margin = {left: 30, top: 10, right: 10, bottom:20}
const xScale = d3.scaleLinear()
.range([margin.left, width-margin.right])
.domain(d3.extent(exponentialData.map(item=>item.x)))
const yScale = d3.scaleLinear()
.range([height-margin.bottom, margin.top])
.domain(d3.extent(exponentialData.map(item=>item.y)))
const line = d3.line()
.x(d=>xScale(d.x))
.y(d=>yScale(d.y))
svg.append('g')
.call(d3.axisBottom(xScale))
.attr('transform', `translate(0, ${height-margin.bottom})`)
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left}, 0)`)
svg.append('g')
.selectAll('path')
.data([exponentialData])
.enter()
.append('path')
.attr('d', d=>line(d))
.attr('fill', 'none')
.attr('stroke', 'SteelBlue')
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.
