Bar Chart Race」动态可视化

 

Bar Chart Race」可以实现动态可视化的python包。安装后可以快速实现动态图

的制作,几行代码就搞定!

安装提示:

    使用pip install是0.1版本的,建议安装0.2,可以在github下载安装最新的。

展示

【还是使用我上次爬的冠状病毒数据:

 

    嫌爬数据麻烦可以自行到github上面下载,地址:

 

    https://github.com/CSSEGISandData/COVID-19

   】

 

下面一起来看看动态图的制作吧:

 

动图效果如下:

 

 

 

修改排序方式,对比上面动图

 

 

 

动态柱状图

 

  • 4
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bar Chart Race 是一种流行的数据可视化方式,它可以动态展示各项数据之间的变化趋势。在 d3.js 中创建 Bar Chart Race 非常简单,下面是一个基本的代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bar Chart Race</title> <script src="https://d3js.org/d3.v5.min.js"></script> <style> .bar { fill: steelblue; } </style> </head> <body> <svg width="960" height="500"></svg> <script> // 数据 var data = [ {name: "A", value: 10}, {name: "B", value: 20}, {name: "C", value: 30} ]; // 设置 SVG 容器 var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 定义 x 和 y 的比例尺 var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), y = d3.scaleLinear().rangeRound([height, 0]); // 设置 x 和 y 的域 x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.value; })]); // 绘制 x 轴 g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // 绘制 y 轴 g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(10, "%")) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Value"); // 绘制柱状图 var bars = g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.name); }) .attr("y", function(d) { return y(d.value); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.value); }); // 更新柱状图 function update() { // 排序数据 data.sort(function(a, b) { return d3.descending(a.value, b.value); }); // 更新 x 和 y 的域 x.domain(data.map(function(d) { return d.name; })); y.domain([0, d3.max(data, function(d) { return d.value; })]); // 更新 x 轴和 y 轴 svg.select(".axis--x") .transition() .duration(1000) .call(d3.axisBottom(x)); svg.select(".axis--y") .transition() .duration(1000) .call(d3.axisLeft(y).ticks(10, "%")); // 更新柱状图的位置和高度 bars.data(data, function(d) { return d.name; }) .transition() .duration(1000) .attr("x", function(d) { return x(d.name); }) .attr("y", function(d) { return y(d.value); }) .attr("height", function(d) { return height - y(d.value); }); } // 定时更新柱状图 d3.interval(function() { update(); }, 2000); </script> </body> </html> ``` 在这个例子中,我们定义了一个包含三个数据项的数组,并将其绑定到一个柱状图上。在 `update` 函数中,我们对数据进行排序,并更新 x 和 y 的域。然后,我们使用 `transition` 方法来平滑地更新柱状图的位置和高度。 最后,我们使用 `d3.interval` 方法来定时更新柱状图,从而实现 Bar Chart Race 的效果。你可以根据自己的需要修改代码来适应不同的数据和样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值