東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Published
Edited
Nov 6, 2020
{
const svg = d3
.create('svg')
.attr('width', 50)
.attr('height', 50);
svg
.append('circle')
.attr('cx', 25)
.attr('cy', 25)
.attr('r', 20)
.attr('fill', 'yellow')
.attr('stroke', 'orange')
.attr('stroke-width', 2);
return svg.node();
}
{
const width = 50;
const height = 50;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
svg
.append('circle')
.attr('cx', width / 2) // 変数widthを利用して座標をもとめる
.attr('cy', height / 2) // 変数heightを利用して座標をもとめる
.attr('r', 20)
.attr('fill', 'yellow')
.attr('stroke', 'orange')
.attr('stroke-width', 2);
return svg.node();
}
chart = {
const width = 400;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
const rects = svg
.selectAll('rect')
.data(dataset)
.join('rect');
rects
.attr('x', (d, i) => i * 50)
.attr('y', 0)
.attr('width', 40)
.attr('height', d => d);
return svg.node();
}
dataset = [5, 25, 45, 65, 85]
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.
