Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
dataset = d3.csvParse(csvString, d3.autoType) // 文字列から読み込む
dataset_url = d3.csv('https://gist.githubusercontent.com/sugi2000/343afa68f35d6fd1e06f7c6d6275d108/raw/3144930d635d40263974f75fec92384d743fb490/demo.csv', d3.autoType) // URLから読み込む
svg_demo1 = {
const height = 400
const svg = DOM.svg(width, height) // widthは定義しなくてもwindowの幅に応じて設定されている
const padding = 40
// x座標用のスケール関数
const x = d3.scaleLinear()
.domain(d3.extent(dataset, function(d) { return d.date })) // d3.extentは配列の[最小値・最大値]の配列を返すメソッド
.range([padding, width - padding])
// y座標用のスケール関数
const y = d3.scaleLinear()
.domain(d3.extent(dataset, function(d) { return d.time })) // d3.extentは配列の[最小値・最大値]の配列を返すメソッド
.range([padding, height - padding])
// fill用のスケール関数
const color = d3.scaleOrdinal()
.domain(['皿', '丼', '汁椀', 'カップ'])
.range(['blue', 'red', 'green', 'orange'])
d3.select(svg).selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', function(d) { return x(d.date) + d3.randomUniform(-15, 15)() })
.attr('cy', function(d) { return y(d.time) + d3.randomUniform(-15, 15)() })
.attr('r', 10)
.attr('fill', function(d) { return color(d.item) })
.attr('opacity', 0.5)
.attr('stroke', '#fff')
return svg
}
svg_demo2 = {
const height = 400
const svg = DOM.svg(width, height) // widthは定義しなくてもwindowの幅に応じて設定されている
const padding = 40
// x座標用のスケール関数
const x = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.date))
.range([padding, width - padding])
// y座標用のスケール関数
const y = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.time))
.range([padding, height - padding])
// fill用のスケール関数
const color = d3.scaleOrdinal()
.domain(['皿', '丼', '汁椀', 'カップ'])
.range(['blue', 'red', 'green', 'orange'])
const dataset_cup = dataset.filter(function(d) { return d.item === 'カップ'})
const dataset_notcup = dataset.filter(function(d) { return d.item !== 'カップ'})
d3.select(svg).selectAll('circle')
.data(dataset_notcup)
.enter()
.append('circle')
.attr('cx', function(d) { return x(d.date) + d3.randomUniform(-15, 15)() })
.attr('cy', function(d) { return y(d.time) + d3.randomUniform(-15, 15)() })
.attr('r', 10)
.attr('fill', function(d) { return color(d.item) })
.attr('opacity', 0.5)
.attr('stroke', '#fff')
d3.select(svg).selectAll('rect')
.data(dataset_cup)
.enter()
.append('rect')
.attr('x', function(d) { return x(d.date) - 10 + d3.randomUniform(-15, 15)() })
.attr('y', function(d) { return y(d.time) - 10 + d3.randomUniform(-15, 15)() })
.attr('width', 20)
.attr('height', 20)
.attr('fill', function(d) { return color(d.item) })
.attr('opacity', 0.5)
.attr('stroke', '#fff')
return svg
}
csvString = demoCSV
import {demoCSV} from '@sugi2000/everyday-tableware-demo-data'
html`<style>
pre {background-color: #f8f8fa;}
</style>`
d3 = require('d3')
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.
