The workspace is for a data visualization class at the Tokyo Metropolitan University.
Instructor: @sugi2000lab @sugi2000
rawdata = d3.tsv(uri, d3.autoType)
dataset.filter(d => d.person === "Tanaka")
leafPath = d3.select(leaf).select("path")
leafD = leafPath.attr("d")
TanakaChart = (data) => {
const height = (width * 150) / 215;
const margin = { top: 30, right: 30, bottom: 30, left: 60 };
const xScale = d3
.scaleLinear()
.domain([0, 4])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleBand()
.domain([...dataOfDatesTimes.keys()])
.range([margin.top, height - margin.bottom]);
const drinks = d3.group(dataOfPerson, (d) => d.drink);
const color = d3
.scaleOrdinal()
.domain([...drinks.keys()])
.range(d3.schemeCategory10);
const xAxis = d3
.axisBottom()
.scale(xScale)
.ticks(4)
.tickFormat((d) => [0, 6, 12, 18, 24][d])
.tickSize(-(height - margin.top - margin.bottom));
const yAxis = d3
.axisLeft()
.scale(yScale)
.ticks(7)
.tickFormat((d) => d3.timeFormat(`%m/%d`)(d))
.tickSize(-(width - margin.left - margin.right));
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("g")
.attr("class", "yAxis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis)
.selectAll("text")
.remove();
const dayG = svg
.selectAll("g.day")
.data(dataOfDatesTimes)
.join("g")
.attr("class", "day")
.attr("transform", (d) => `translate(0, ${yScale(d[0])})`);
const timeG = dayG
.selectAll("g.time")
.data((d) => d[1])
.join("g")
.attr("class", "time")
.attr("transform", (d) => `translate(${xScale(d[0])}, 0)`);
const circleX = d3.scaleBand().range([10, xScale(1) - xScale(0) - 10]);
svg
.append("line")
.attr("x1", margin.left)
.attr("y1", height / 8)
.attr("x2", width - margin.right)
.attr("y2", height / 8)
.attr("stroke", "brown")
.attr("stroke-width", 3);
const additionalLines = [
{
x1: margin.left,
y1: (height / 8) * 2,
x2: width - margin.right,
y2: (height / 8) * 2,
stroke: "brown",
strokeWidth: 3
},
{
x1: margin.left,
y1: (height / 8) * 3,
x2: width - margin.right,
y2: (height / 8) * 3,
stroke: "brown",
strokeWidth: 3
},
{
x1: margin.left,
y1: (height / 8) * 4.1,
x2: width - margin.right,
y2: (height / 8) * 4.1,
stroke: "brown",
strokeWidth: 3
},
{
x1: margin.left,
y1: (height / 8) * 5.2,
x2: width - margin.right,
y2: (height / 8) * 5.2,
stroke: "brown",
strokeWidth: 3
},
{
x1: margin.left,
y1: (height / 8) * 6.3,
x2: width - margin.right,
y2: (height / 8) * 6.3,
stroke: "brown",
strokeWidth: 3
},
{
x1: margin.left,
y1: (height / 8) * 7.5,
x2: width - margin.right,
y2: (height / 8) * 7.5,
stroke: "brown",
strokeWidth: 3
}
];
additionalLines.forEach((line) => {
svg
.append("line")
.attr("x1", line.x1)
.attr("y1", line.y1)
.attr("x2", line.x2)
.attr("y2", line.y2)
.attr("stroke", line.stroke)
.attr("stroke-width", line.strokeWidth);
});
timeG
.selectAll("path")
.data((d) => d[1])
.join("path")
.attr("transform", (d, i, nodes) => {
circleX.domain(d3.range(nodes.length));
return `translate(${circleX(i) + circleX.bandwidth() / 2}, ${
yScale.bandwidth() / 3
}) scale(0.2) translate(-50,-180)`;
})
.attr("opacity", "0.8")
.attr("fill", (d) => color(d.drink))
.attr("d", leafD);
svg
.selectAll("g.xAxis, g.yAxis")
.selectAll("line, path")
.attr("stroke", "white")
.attr("opacity", 0.5);
svg.selectAll("g.xAxis,g.yAxis").selectAll("text").attr("font-size", 10);
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.
