東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Published
Edited
Nov 9, 2021
import { names, getData } from "@sugi2000lab/import-csv"
import { select } from "@jashkenas/inputs"
data = getData(name)
dates = d3.group(data, d => d.date.getDate())
[...dates.keys()]
dataset = d3.csv(url, d3.autoType)
_heart = svg`<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
<path d="M94.5,29.4c0,12.4-7.8,25-23.3,37.9c-10.8,8.9-24.2,17.2-40.1,24.8c0.6-3.1,0.9-6,0.9-8.8c0-7.2-2.3-13.7-6.8-19.6
c-4.3-4.7-8.5-9.4-12.8-14.1c-4.6-5.7-6.8-12-6.8-18.8c0-6.7,2.3-12.2,6.8-16.5s10.1-6.5,16.9-6.5c4.6,0,8.9,1.2,12.8,3.6
c4.3,2.6,7,6.1,8.2,10.3C54.8,12.5,61.8,7.9,71,7.9c6.2,0,11.6,2,16.2,6C92.1,18.1,94.5,23.3,94.5,29.4z"/>
</g>
</svg>`
heart = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M94.5 29.4c0 12.4-7.8 25-23.3 37.9C60.4 76.2 47 84.5 31.1 92.1c.6-3.1.9-6 .9-8.8 0-7.2-2.3-13.7-6.8-19.6-4.3-4.7-8.5-9.4-12.8-14.1-4.6-5.7-6.8-12-6.8-18.8 0-6.7 2.3-12.2 6.8-16.5s10.1-6.5 16.9-6.5c4.6 0 8.9 1.2 12.8 3.6 4.3 2.6 7 6.1 8.2 10.3C54.8 12.5 61.8 7.9 71 7.9c6.2 0 11.6 2 16.2 6 4.9 4.2 7.3 9.4 7.3 15.5z"/></svg>`
heartPath = d3.select(heart).select('path')
inlineImage = (url, size = 0.4) => {
return `<img class="resize" src=${url} onload="this.width*=${size};">`;
}
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.
