data = d3.csvParse(await FileAttachment("category-brands.csv").text(), d3.autoType)
chart = {
replay;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);
yield svg.node();
for (const keyframe of keyframes) {
const transition = svg.transition()
.duration(duration)
.ease(d3.easeLinear);
// Extract the top bar’s value.
x.domain([0, keyframe[1][0].value]);
updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);
invalidation.then(() => svg.interrupt());
await transition.end();
}
}
duration = 250
data
d3.group(data, d => d.name)//D3也可以像数据库一样group数据
data.filter(d => d.name === "Heineken")
n = 12
names = new Set(data.map(d => d.name))
data.map(d=>d.name+'!')
datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))//+号可以把日期对象转换成number类型 由于日期对象哪怕看上去是一样的实际也是不相等的所以先转换成数字进行map集合然后再通过下面的Date函数转换回来
//https://github.com/d3/d3-array/blob/master/README.md#rollup
//d3.rollup(iterable, reduce, ...keys) 第一个是数据，第二个是值，后面的参数都是键
.map(([date1, data]) => [new Date(date1), data])
.sort(([a], [b]) => d3.ascending(a, b))
d3.rollup(data, d=>d.length,d=>+d.date) //以下直到rank函数都是自己测试rollup的用法
d3.rollup(data,d=>d[0].value,d=>+d.date)
d3.rollup(data,d=>d,d=>+d.date,d=>d.name) // 先按日期作为键，再按公司名作为键，值为数组
d3.rollup(data,([d])=>d,d=>+d.date,d=>d.name) //先按日期作为键，再按公司名作为键，值为对象
d3.rollup(data,d=>d[0].value,d=>+d.date,d=>d.name) // 先按日期作为键，再按公司名作为键,值为数组里的对象的value的值
d3.rollup(data,([d])=>d.value,d=>+d.date,d=>d.name) //先按日期作为键，再按公司名作为键，值为对象的value的值
Array.from(d3.rollup(data,([d])=>d,d=>+d.date,d=>d.name)) //先按日期作为键，再按公司名作为键，值为对象)
new Date(978307200000)
function rank(value) {
const data = Array.from(names, name => ({name, value: value(name)}));
data.sort((a, b) => d3.descending(a.value, b.value));
for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);
return data;
}
rank(name => datevalues[0][1].get(name))//get是根据键来取集合的值 函数参数返回2000年品牌的价值
k = 10
d3.pairs(datevalues)
keyframes = {
const keyframes = [];
let ka, a, kb, b;
for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {
for (let i = 0; i < k; ++i) {
const t = i / k;
keyframes.push([
new Date(ka * (1 - t) + kb * t),
rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)
]);
}
}
keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);
return keyframes;
}
keyframes
nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)
keyframes.flatMap(([, data]) => data)//flatMap全部放到一个集合
prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))
nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a]))
next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))
function bars(svg) {
let bar = svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("rect");//初始化 闭包
return function([date, data], transition){ let new_bar = bar //返回更新条形图的函数 date，data，transition都是参数 第一个参数是动画帧，返回每帧前十二名
.data(data.slice(0, n), d => d.name)//第一个参数是绑定的数据，第二个参数指定d.name属性作为键进行绑定（被绑定数据还是d只是不再是由默认的索引作为键）https://blog.csdn.net/lzhlzz/article/details/42808243
.join(
enter => enter.append("rect")
.attr("fill", color)
.attr("height", y.bandwidth())//高度
.attr("x", x(0))//左上角X值
.attr("y", d => y((prev.get(d) || d).rank))//左上角Y值 //从前一个值过渡到现在的值
.attr("width", d => x((prev.get(d) || d).value) - x(0)),
update => update,
exit => exit.transition(transition).remove()
.attr("y", d => y((next.get(d) || d).rank))//从现在的值过渡到下一个值
.attr("width", d => x((next.get(d) || d).value) - x(0))
)
.call(bar1 => bar1.transition(transition)//每次join操作都会调用这个函数
.attr("y", d => y(d.rank))
.attr("width", d => x(d.value) - x(0)));
bar = new_bar;
}
}
function labels(svg) {
let label = svg.append("g")
.style("font", "bold 12px var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.selectAll("text");
return ([date, data], transition) => label = label
.data(data.slice(0, n), d => d.name)
.join(
enter => enter.append("text")
.attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`)
.attr("y", y.bandwidth() / 2)
.attr("x", -6)
.attr("dy", "-0.25em")
.text(d => d.name)
.call(text => text.append("tspan")
.attr("fill-opacity", 0.7)
.attr("font-weight", "normal")
.attr("x", -6)
.attr("dy", "1.15em")),
update => update,
exit => exit.transition(transition).remove()
.attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`)
.call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value)))
)
.call(bar => bar.transition(transition)
.attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`)
.call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value))))
}
function textTween(a, b) {
const i = d3.interpolateNumber(a, b);
return function(t) {
this.textContent = formatNumber(i(t));
};
}
formatNumber = d3.format(",d")
function axis(svg) {
const g = svg.append("g")
.attr("transform", `translate(0,${margin.top})`);
const axis = d3.axisTop(x)
.ticks(width / 160)
.tickSizeOuter(0)
.tickSizeInner(-barSize * (n + y.padding()));
return (_, transition) => {
g.transition(transition).call(axis);
g.select(".tick:first-of-type text").remove();
g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "white");
g.select(".domain").remove();
};
}
function ticker(svg) {
const now = svg.append("text")
.style("font", `bold ${barSize}px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr("x", width - 6)
.attr("y", margin.top + barSize * (n - 0.45))
.attr("dy", "0.32em")
.text(formatDate(keyframes[0][0]));
return ([date], transition) => {
transition.end().then(() => now.text(formatDate(date)));
};
}
formatDate = d3.utcFormat("%Y")
color = {
const scale = d3.scaleOrdinal(d3.schemeTableau10);
if (data.some(d => d.category !== undefined)) {
const categoryByName = new Map(data.map(d => [d.name, d.category]))
scale.domain(Array.from(categoryByName.values()));
return d => scale(categoryByName.get(d.name));
}
return d => scale(d.name);
}
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
y = d3.scaleBand() //将一段长度（值域）平均分为若干段（定义域）每段宽度相同，宽度值由y.bandwidth()返回
.domain(d3.range(n + 1))
.rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
.padding(0.1)
height = margin.top + barSize * n + margin.bottom
barSize = 48
margin = ({top: 16, right: 6, bottom: 6, left: 0})
d3 = require("d3@5", "d3-array@2")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.