svg_demo2 = {
const height = 400
const svg = DOM.svg(width, height)
const padding = 40
const x = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.date))
.range([padding, width - padding])
const y = d3.scaleLinear()
.domain(d3.extent(dataset, d => d.time))
.range([padding, height - padding])
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
}