2021-001 秒懂三部曲：nextjournal plus amcharts 數據動圖說故事

由於 nextjournal 在撰寫部落格文章時，可混合多種程式設計語言在文章當中，例如 Python Julia JavaScript，這可以讓文章與程式碼片段融合在一起進行分享教學，舉例而言，我們也可以將 JavaScript 為主的 amcharts 網頁互動圖表技術，搭配在技術文章當中，嵌入呈現！圖文並茂的進行「數據動圖說故事」，並且以「秒懂三部曲」心法來安排呈現方式。

001 簡單秒懂：沒有複雜的程式設計架構，初學者也能立刻抓住精髓

002 美學驚嘆：看到時有WOW的感受

003 價值差異：相較於Excel所產生的預設圖表，能夠透過互動探索出價值洞見

from IPython.core.display import display, HTML
display(HTML('''
<h1>Hello, <a href="https://cameo.tw/">卡米爾!</a></h1>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<script>
  /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
// Let's cut a hole in our Pie chart the size of 30% the radius
chart.innerRadius = am4core.percent(30);
// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.slices.template
  // change the cursor on hover to make it apparent the object can be interacted with
  .cursorOverStyle = [
    {
      "property": "cursor",
      "value": "pointer"
    }
  ];
pieSeries.alignLabels = false;
pieSeries.labels.template.bent = true;
pieSeries.labels.template.radius = 3;
pieSeries.labels.template.padding(0,0,0,0);
pieSeries.ticks.template.disabled = true;
// Create a base filter effect (as if it's not there) for the hover to return to
var shadow = pieSeries.slices.template.filters.push(new am4core.DropShadowFilter);
shadow.opacity = 0;
// Create hover state
var hoverState = pieSeries.slices.template.states.getKey("hover"); // normally we have to create the hover state, in this case it already exists
// Slightly shift the shadow and make it more prominent on hover
var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
hoverShadow.opacity = 0.7;
hoverShadow.blur = 5;
// Add a legend
chart.legend = new am4charts.Legend();
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
},{
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}];
</script>
<style>
  body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>
'''))
0.4s
Python
→
Runtimes (1)