Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
Nov 6, 2020
md`# My first SVG`
{
const width = 400;
const height = 300;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
// 背景
svg
.append('rect')
.attr('width', width)
.attr('height', height)
.attr('fill', '#f0ffff');
// グループ g要素
const g = svg
.append('g')
.attr('fill', 'blue')
.attr('fill-opacity', 0.1)
.attr('stroke-width', 8);
// 円
g.append('circle')
.attr('cx', width * 0.2)
.attr('cy', height * 0.2)
.attr('r', 50)
.attr('stroke', 'red');
g.append('circle')
.attr('cx', width * 0.5)
.attr('cy', height * 0.2)
.attr('r', 50)
.attr('stroke', 'green');
g.append('circle')
.attr('cx', width * 0.8)
.attr('cy', height * 0.2)
.attr('r', 50)
.attr('stroke', 'blue');
g.append('circle')
.attr('cx', width * 0.35)
.attr('cy', height * 0.4)
.attr('r', 50)
.attr('stroke', 'orange');
g.append('circle')
.attr('cx', width * 0.65)
.attr('cy', height * 0.4)
.attr('r', 50)
.attr('stroke', 'brown');
g.append('circle')
.attr('cx', width * 0.5)
.attr('cy', height * 0.6)
.attr('r', 50)
.attr('stroke', 'pink');
return svg.node();
}
{
const width = 100;
const height = 100;
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
svg
.append('circle')
.attr('cx', width / 2)
.attr('cy', height / 2)
.attr('r', 20)
.attr('fill', 'yellow')
.attr('stroke', 'orange')
.attr('stroke-width', 2);
return svg.node();
}
dataset = [5, 25, 45, 65, 85]
{
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)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", d => d / 4)
.attr("stroke-opacity", 0.5);
return svg.node();
}
d3 = require('d3@6')
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.
