The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
scatter_plot = {
// サイズと余白
const width = 500;
const height = 300;
const margin = { top: 30, right: 30, bottom: 30, left: 30 };
// スケール関数（x, y, 色）
const xScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.Movie)])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.Real)])
.range([height - margin.bottom, margin.top]);
const color = d3
.scaleOrdinal()
.domain([...Genre.keys()])
.range(d3.schemeTableau10);
// 軸関数 tickSizeで目盛りの線を反対方向に伸ばしている
const xAxis = d3.axisBottom().scale(xScale).ticks(10);
// .tickSize(-(height - margin.top - margin.bottom));
const yAxis = d3.axisLeft().scale(yScale).ticks(5);
// .tickSize(-(width - margin.left - margin.right));
// SVGの生成
const svg = d3.create("svg").attr("width", width).attr("height", height);
// X,Y軸の生成
svg
.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
svg
.append("g")
.attr("class", "yAxis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
//円
svg
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.Movie))
.attr("cy", (d) => yScale(d.Real))
.attr("r", 5)
.attr("fill", (d) => color(d.Genre))
.append("title")
.text((d) => `${d.Title}`);
// 軸の線を白色に
svg
.selectAll("g.xAxis, g.yAxis")
.selectAll("line, path")
.attr("stroke", "white")
.attr("opacity", 0.5);
return svg.node();
}
rawdata = d3.tsv(url, d3.autoType)
d3.tsv(url)
dataset = d3.tsv(url, d3.autoType)
data2set = d3.tsv(url2)
data3set = d3.tsv(url3)
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.
