東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
svg`<svg width="200" height="100"></svg>`
svg`<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100"></rect>
</svg>`
svg`<svg width="200" height="100">
<circle cx="100" cy="50" r="50"></circle>
</svg>`
svg`<svg width="200" height="100">
<ellipse cx="100" cy="50" rx="100" ry="50"></ellipse>
</svg>`
svg`<svg width="200" height="100">
<line x1="0" y1="0" x2="200" y2="100" stroke="black"></line>
</svg>`
svg`<svg width="200" height="100">
<text x="100" y="50">超簡単 yey!</text>
<circle cx="100" cy="50" r="3" fill="gray"></circle>
<text x="56" y="59" fill="gray" style="font: 10px sans-serif;">(100, 50)</text>
</svg>`
svg`<svg width="200" height="100">
<text x="50" y="50" font-family="sans-serif" font-size="25" fill="orange">超簡単 yey!</text>
</svg>`
svg`<svg width="200" height="100">
<text x="50" y="100" font-family="sans-serif" font-size="25" fill="orange">超簡単 yey!</text>
</svg>`
svg`<svg width="50" height="50">
<path d="M13.075 3.925A3.157 3.157 0 0 0 10.842 3c-.838 0-1.641.478-2.233 1.07L8 4.68l-.609-.61c-1.233-1.233-3.233-1.378-4.466-.145a3.158 3.158 0 0 0 0 4.467L3.534 9 8 13.788 12.466 9l.609-.608a3.157 3.157 0 0 0 0-4.467z"></path>
</svg>`
svg`<svg width="50" height="50">
<circle cx="25" cy="25" r="20" fill="yellow" stroke="orange" stroke-width="2"></circle>
</svg>`
svg`<svg width="500" height="50">
<rect x="0" y="0" width="30" height="30" fill="green"></rect>
<rect x="20" y="5" width="30" height="30" fill="lightgreen"></rect>
<rect x="40" y="10" width="30" height="30" fill="yellow"></rect>
<rect x="60" y="15" width="30" height="30" fill="orange"></rect>
<rect x="80" y="20" width="30" height="30" fill="red"></rect>
</svg>`
svg`<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"></circle>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"></circle>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"></circle>
</svg>`
svg`<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"></circle>
</svg>`
svg`<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"></circle>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"></circle>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"></circle>
</svg>`
svg`<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"></circle>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"></circle>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"></circle>
</svg>`
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.
