Published
Edited
Dec 6, 2019
svg_demo1 = {
const height = 400
const svg = DOM.svg(width, height) // widthは定義しなくてもwindowの幅に応じて設定されている
const padding = 40
//横線
d3.select(svg).append('line')
.attr("x1", width-50)
.attr("y1", height/2)
.attr("x2", 50)
.attr("y2", height/2)
.attr("line-width", 20)
.attr("stroke", "teal")
.attr("opacity", 0.2);
//縦線
d3.select(svg).append('line')
.attr("x1", width/2)
.attr("y1", height-20)
.attr("x2", width/2)
.attr("y2", 20)
.attr("line-width", 20)
.attr("stroke", "orange")
.attr("opacity", 0.2);
// postion用のスケール関数
function posX(time){
console.log(width)
if(time == '昼') return d3.randomUniform(padding, width/2)()
else if(time == '夜') return d3.randomUniform(width/2, width - padding)()
}
function posY(lid){
if(lid === 'なし') return d3.randomUniform(height*2/3, height - padding)()
else if(lid === 'あり') return d3.randomUniform(padding, height/3)()
}
// scale用のスケール関数
const scale = d3.scaleLinear()
.domain(d3.extent(dataset, function(d) { return d.count }))
.range([20, 30])
// fill用のスケール関数
const color = d3.scaleOrdinal()
.domain(['外', '家'])
.range(['teal', 'orange'])
// opacity用のスケール関数
const opacity = d3.scaleLinear()
.domain(d3.extent(dataset, function(d) { return d.count }))// d3.extentは配列の[最小値・最大値]の配列を返すメソッド
.range([0.2, 0.45])//.rangeはextantの値を範囲に対応させる
// shape用のスケール関数
const shape = d3.scaleOrdinal()
.domain(['皿', 'カトラリー'])
.range(['rect', 'circle'])
d3.select(svg).selectAll("rect")
.data(dataset.filter(function(d) { return d.category === 'カトラリー' }))
.enter()
.append('rect')
.attr('x', function(d){return posX(d.time)})
.attr('y', function(d){return posY(d.lid)})
.attr('width', function(d){return scale(d.count)})
.attr('height', function(d){return scale(d.count)/3})
.attr('fill', function(d){return color(d.place)})
.attr('opacity', function(d){return opacity(d.count)})
d3.select(svg).selectAll('circle')
.data(dataset.filter(function(d) { return d.category === '皿' }))
.enter()
.append('circle')
.attr('cx', function(d){return posX(d.time)})
.attr('cy', function(d){return posY(d.lid)})
.attr('r', function(d){return scale(d.count)/3})
.attr('fill', function(d) { return color(d.place) })
.attr('opacity', function(d) { return opacity(d.count) })
return 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.
