Creative Technologist, Data Visualizer and HCI researcher.
d3 = require("d3@5")
{
// svg variables
let width = 300;
let height = 300;
//create SVG artboard
let svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
// create 4 SVG sub artboard
let lowerLeftGroup = svg.append('g').attr("transform","translate(0 " + height/2 + ") scale(.5)")
let lowerRightGroup = svg.append('g').attr("transform"," translate(" + width/2 + " " + height/2 + ") scale(.5)" )
let upperLeftGroup = svg.append('g').attr("transform","scale(.5)")
let upperRightGroup = svg.append('g').attr("transform","translate(" + width/2 + ") scale(.5)")
// create random color
let randomColors = [];
for (let i = 0 ; i < 35 ; i++) {
let randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
// draw a circle at lower right
lowerRightGroup.append('circle')
.attr('cx',width)
.attr('cy',height)
.attr('r', i * 10)
.style('fill', 'none')
.style('stroke', randomColor)
.style('stroke-width', 10)
// draw a circle at lower left
lowerLeftGroup.append('circle')
.attr('cx',width/2)
.attr('cy',height/2)
.attr('r', i * 10)
.style('fill', 'none')
.style('stroke', randomColor)
.style('stroke-width', 10)
// draw a circle at upper left
upperLeftGroup.append('rect')
.attr('x',0)
.attr('y',0)
.attr('width', width - i* 20)
.attr('height', height - i * 20)
.style('fill', randomColor)
// draw a circle at upper right
upperRightGroup.append('rect')
.attr('x',-i*20)
.attr('y',i*20)
.attr('width', width - i*20)
.attr('height', height - i*20)
.attr('fill','cyan')
.style('fill', randomColor)
}
//show visualization in Observable
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.
