Published
Edited
May 4, 2020
md`# scratch pad`
margin = ({ top: 30, right: 0, bottom: 30, left: 40 })
height = 500
width = 770
md`### d3.scaleSqrt
よくわからないので同じ[0, 1000]の範囲をd3.scaleLienarと比較して実験`
d3 = require("d3@5")
x_range = [0, 10000]
x = d3
.scaleLinear()
.domain(x_range)
.range([margin.left, width - margin.right])
raw_s1 = d3
.scaleSqrt()
.domain(x_range)
.range([0, 1])
raw_s2 = d3
.scaleLinear()
.domain(x_range)
.range([0, 1])
k = 2 // scalePow用の指数
raw_s3 = d3
.scalePow()
.exponent(k)
.domain(x_range)
.range([0, 1])
// これで0 ... 1000に対するそれぞれのscaleXxxxでの変換結果(論理データ)を作成
data = d3.range(x_range[0], x_range[1]).map(i => {
return {
x: i,
y1: raw_s1(i),
y2: raw_s2(i),
y3: raw_s3(i)
};
})
md` d3のデータをd3で可視化しているので分かりづらいが、それぞれのscaleXxxxの結果を scaleLinearでプロットすることで、scaleXxxxの変換の感じが見えるようになるはず`
s1 = d3
.scaleLinear()
.domain(d3.extent(data, d => d.y1))
.range([height - margin.bottom, margin.top])
s2 = d3
.scaleLinear()
.domain(d3.extent(data, d => d.y2))
.range([height - margin.bottom, margin.top])
s3 = d3
.scaleLinear()
.domain(d3.extent(data, d => d.y3))
.range([height - margin.bottom, margin.top])
// s1用の折れ線グラフ
s1_line = d3
.line()
.x(d => x(d.x))
.y(d => s1(d.y1))
// s2用の折れ線グラフ
s2_line = d3
.line()
.x(d => x(d.x))
.y(d => s1(d.y2))
// s3用の折れ線グラフ
s3_line = d3
.line()
.x(d => x(d.x))
.y(d => s1(d.y3))
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// scaleSqrt の変換結果
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", s1_line);
// scaleLinear の変換結果
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", s2_line);
// scalePow の指数 k での変換結果
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", s3_line);
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
