Interested in data visualization and tools for thought.
height = 500
xScale = d3.scaleLinear().domain([0, 1.0]).range([0, width])
yScale = d3.scaleLinear().domain([0, 1.0]).range([0, height])
rScale = d3.scaleLinear().domain([0, 1.0]).range([10, 40])
viewof nCircles = Inputs.range([10, 1000], {
value: 100,
step: 10,
label: "円の数"
})
{
// まず、入れ物として、SVG要素を作成: `d3.create("svg")`
// そして、属性を指定: attr("アトリビュート名", 値)
const svg = d3.create("svg").attr("width", width).attr("height", height);
for (let i = 0; i < nCircles; i++) {
// ここでは、ランダムなデータを作成しています
// `Math.random()` は、「0以上、1未満」の値を返します
const x = Math.random();
const y = Math.random();
const r = Math.random();
// それぞれのランダムなx, y, rの値を、
// 前述したスケールの関数で「SVG上での位置」と「円の半径」に変換し、
// それをSVG要素に追加しています
svg
.append("circle")
.attr("cx", xScale(x))
.attr("cy", yScale(y))
.attr("r", rScale(r))
.attr("fill", getRandomColor())
.attr("stroke", "hsl(216deg 100% 13%)")
.attr("stroke-width", 2);
}
return svg.node();
}
function getRandomColor() {
// ランダムな色を生成する関数
// HEX値 #00000 ~ #FFFFFF の何か一つを返す
let color = "#";
for (let i = 0; i < 6; i++) {
color += Math.floor(Math.random() * 16).toString(16);
}
return color;
}
population = FileAttachment("c01.csv").csv({ typed: true })
Inputs.table(population)
Inputs.table(japanPopulation)
path = {
const height = 500;
const margin = 80;
// データの各要素をアクセスするためのヘルパー
const xAccessor = (d) => d.year;
const yAccessor = (d) => d.population;
// X軸のスケール
// 軸を表示するために、rangeは[0, width]ではなく、margin分を動かしている
const xScale = d3
.scaleLinear()
.domain(d3.extent(japanPopulation, xAccessor))
.range([margin, width]);
// Y軸のスケール
// rangeは、[0, height]ではなく、逆向きの[height, 0]である点に注意: 原点が左上（左下ではなく）のため
// 軸を表示するために、rangeは[height, 0]ではなく、margin分を動かしている
const yScale = d3
.scaleLinear()
.domain(d3.extent(japanPopulation, yAccessor))
.range([height - margin, 0]);
// データからSVGパスの文字列を生成する関数
const lineGenerator = d3
.line()
.x((d) => xScale(xAccessor(d)))
.y((d) => yScale(yAccessor(d)));
// 描画するためのSVG要素をまず作成
const svg = d3.create("svg").attr("width", width).attr("height", height);
// SVG要素に、path（線）を描画
const line = svg
.append("path")
.attr("d", lineGenerator(japanPopulation))
.attr("fill", "none")
.attr("stroke", "cornflowerblue")
.attr("stroke-width", "3");
// グラフのX軸を作成、描画
const xAxisGenerator = d3.axisBottom().scale(xScale);
const xAxis = svg
.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${height - margin}px)`);
// グラフのY軸を作成、描画
const yAxisGenerator = d3.axisLeft().scale(yScale);
const yAxis = svg
.append("g")
.call(yAxisGenerator)
.style("transform", `translateX(${margin}px)`);
return svg.node();
}
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.
