D3.js

历史

在D3.js开发之前已经有出现过许多尝试做数据可视化的包，例如Prefuse，Flare和Protovis程序库，他们都可以视为D3.js的前身。然而Prefuse和Flare皆有缺点，皆不能只透过浏览器完成渲染，皆须要透过额外插件来完成。
例如2005年发布的Prefuse是一个数据可视化程序库，但是它需要透过网页的Java插件才能于浏览器中呈现；而Flare是2007年发布的另一个数据可视化工具包，由于其是使用ActionScript编程语言开发，因此也需要额外插件，即Flash插件才能完成渲染。
2009年，史丹佛大学的史丹佛可视化团队（Stanford Visualization Group）的杰佛瑞·赫尔、迈克·保斯托和瓦迪姆·欧格菲兹齐利用开发Prefuse和Flare的经验开始用Javscript开发了可从给定数据产生SVG图形的Protovis程序库。而Protovis程序库在业界和学界皆有一定的知名度。
2011年，史丹佛可视化团队停止开发Protovis，并开始开发新的数据可视化程序库，借由之前开发Protovis的经验，开发出了D3.js程序库，在注重于Web标准的同时提供了更丰富的平台也有了更好的性能。

技术原理

D3.js透过预先创建好迁入于网页中的JavaScript函数来选择网页元素、创建SVG元素、调整CSS来呈现数据，并且也可以设置动画、动态改变对象状态或加入工具提示来完成用户交互功能。使用简单的D3.js函数就能够将大型的数据数据结构与SVG对象进行绑定，并且能生成格式化文本和各种图表。其数据数据结构的格式可以是JSON、CSV（以逗号分隔的数据）或GeoJSON，也可以透过自己写JavaScript函数来读取其他或自定义格式的数据，例如Shapefile。

对象选择

D3.js所使用的对象选择方式是透过使用CSS样式选择器来选择一个或多个或一组文档对象模型对象，然后透过类似jQuery的方式控制所选的对象。例如，选择所有的<p>...</p>网页元素，将之改成方形类别、移动位置、并更换颜色为淡紫色在D3.js中只要使用简单的代码即可完成：
 d3.selectAll("p")                 // 選擇所有<p> 網頁元素
   .style("color", "lavender")     // 將顏色"color" 樣式改成"lavender" 淡紫色(薰衣草色)
   .attr("class", "squares")       // 將 "class" 改成"squares"
   .attr("x", 50);                 // 將屬性值"x" (水平位置) 改為50px

动态改变对象状态

透过D3.js定义的对象成员函数function transition (name)则可以在一定时间内平滑地改变对象的属性或样式的值，例如可以在500毫秒内逐渐将所有的<p>...</p>网页元素渐变为粉红色：
 d3.selectAll("p")             // 選擇所有<p> 網頁元素
   .transition("trans_1")      // 定義一個transition，命名為"trans_1"
     .delay(0)                 // 觸發後延遲0毫秒後開始動畫
     .duration(500)            // 漸變時間500毫秒
     .ease(d3.easeLinear)           // 使用線性漸變，並且....
   .style("color", "pink");    // ...並且最終變為粉紅色

数据绑定

D3.js有提供一高级应用例如设置与对象相关系，或者将加载的数据直接绘成对象。在D3.js中，可以将数据与对象绑定，如此一来，当数据读入之后根据数据产生对应具有相关的属性（形状、颜色或数值等）和行为（动画或事件等）的SVG对象。
// 資料
  var countriesData = [
     { name:"Ireland",  income:53000, life: 78, pop:6378, color: "black"},
     { name:"Norway",   income:73000, life: 87, pop:5084, color: "blue" },
     { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
  ];// 建立svg網頁物件
  var svg = d3.select("#hook").append("svg")
        .attr("width", 120)
        .attr("height", 120)
        .style("background-color", "#D0D0D0");// 從資料建立關聯的svg網頁元素
    svg.selectAll("circle")                  // 建立還不存在的圓形樣板
      .data(countriesData)                   // 綁定資料
    .enter()                                 // 對每個資料......
      .append("circle")                      // 綁定資料列中的......資料到圓形
        .attr("id", function(d) { return d.name })            // 圓形的id為國家名
        .attr("cx", function(d) { return d.income / 1000  })  // 圓形的x坐標位置為收入
        .attr("cy", function(d) { return d.life })            // 圓形的y坐標位置為預期收入
        .attr("r",  function(d) { return d.pop / 1000 *2 })   // 圓形的半徑為國家人口數
        .attr("fill", function(d) { return d.color });        // 給表示不同國家的圓形不同顏色

数据读取

D3.js除了有提供将加载的数据直接绘成对象的功能之外，也支持从文件读取数据并直接生成SVG图像。此应用使得D3.js可以用简单的代码完成与地理信息相关的数据可视化，而新版本的D3.js也改善了地理座标的转换系统，因此能准确地呈现包含地理信息的图表，例如“japan.json”中存了日本的GeoJSON地理信息，则D3.js可以直接并加载并显示日本地图：
d3.json("japan.json", function(topodata) {//載入JSON檔案
var features = topojson.feature(//從GeoJSON中取出日本地形
topodata, 
topodata.objects["japan"]
).features;
var path = d3.geo.path().projection( 
d3.geo.mercator()
.center([138,37])//指定為日本經緯度位置
.scale(6000) //放大至符合圖形大小
);
d3.select("svg")
.selectAll("path")// 建立還不存在的路徑物件樣板
.data(features)// 綁定日本地形資料
.enter()// 對所有的物件.....
.append("path")// 插入路徑物件
.attr("d",path);// 路徑物件的路徑依照日本經緯度位置填入地形資料});
然而许多政府机关提供的文件皆为Shapefile，而由于D3.js也可以透过自己写JavaScript函数或引用他第三方程式库来读取其他例如Shapefile的数据：
//需先引入Shapefile庫shapefile.open("japan.shp")//載入日本的Shapefile檔案
  .then(source => source.read()
    .then(function log(result) {//若Shapefile載入完畢
      if (result.done) return;
      console.log(result.value);//印出載入到的地理資訊
      //下同
    }))
  .catch(error => console.error(error.stack));

根据数据产生节点

当文件顺利读入并与D3.js对象绑定之后，一般D3.js在使用上基本上会明确地用.enter()函数、暗示更新的函数以及.exit()函数来调用数据集中范围内的数据，其中，d3.js没有“update()”函数，需要自行时做对应功能来完成enter、update以及exit流程。接在.enter()函数后方的指令会作用在所有数据上并设置到前一段指令selectAll()选择的网页元素中所有未就绪的网页元素。

其他特色

除了D3.js之外亦有许多可以抓取并处理数据的程序库，例如jQuery，但D3.js与jQuery不同于，D3.js使用了数据驱动化来更有效地处理数据，例如，原先使用循环来处理数据，并且要预先把网页元素产生出来，而D3.js则可以使用select或selectAll来批量完成数据处理，并会会视情况自动生成所需的网页元素，而使得网页有更多的弹性，也能支持能动态地即时地作出反应的交互性功能。

Three.js

D3.js可以与Three.js结合，透过结合了D3.js的数据可视化、图表产生与Three.js的WebGL特性可以实现三维数据可视化、图表的呈现。