KaoChaDian
- Open source licenses
- Component library size
- Develop and maintain community status
- Browser compatibility
- function
D3
Open source licenses
free
Component library size
243 KB d3js.org/d3.v5.min.j…
Develop and maintain community status
- watch:4090
- star:86313
- fork:21083
- issues:4 open,1998 closed
Browser compatibility
D3 5+ supports the latest browsers like Chrome, Edge, Firefox and Safari. Versions D3, 4 and earlier support versions of IE 9 and above.
function
D3 is relatively low-level, with simple code, long learning period, customizable, and many free selection sets. SVG operation, Dom operation, data processing, data binding, and fetch can be used to obtain data conveniently.
echarts
Open source licenses
free
Component library size
471 KB cdn.bootcss.com/echarts/4.2…
Develop and maintain community status
- watch:1969
- star:35598
- fork:10724
- issues:2776 open,7756 closed
Browser compatibility
Compatible with IE7, good compatibility.
function
Fast delivery, high packaging, non-customizable, less space for developers to control design, more than Highcharts chart types. Canvas and SVG can be manipulated.
Highcharts
Open source licenses
Non-commercial free
Component library size
233 KB cdn.highcharts.com.cn/highcharts/…
Develop and maintain community status
- watch:359
- star:8871
- fork:2323
- issues:1293 open,8395 closed
Browser compatibility
Supports iPhone, iPad and IE6 and above
function
Operation SVG, high encapsulation, official documents more concise than Echarts to understand, I think the appearance level is higher than ECharts, the type of graph is less than Echarts.
three.js
Open source licenses
free
Component library size
504 KB cdn.bootcss.com/three.js/r8…
Develop and maintain community status
- watch:2456
- star:53467
- fork:20199
- issues:598 open,8378 closed
Browser compatibility
Internet Explorer and Safari are not compatible
function
3D effect, poor performance.
For 🌰
Let’s do a detailed comparison of pie charts in 2D. Without saying anything else, cui hua first on the code.
D3 pie chart
// https://observablehq.com/@d3/pie-chart@347
export default function define(runtime, observer) {
const main = runtime.module();
main.variable(observer()).define(["md"."d3"."data"].function(md,d3,data){return(
md`# Pie Chart
This chart shows the estimated population by age in the United States as of 2015. The total estimated population is ${d3.sum(data, d => d.value).toLocaleString()}. Compare to a [donut chart](/@d3/donut-chart).
Data: [American Community Survey](https://www.census.gov/data.html)`
)});
main.variable(observer("chart")).define("chart"["pie"."data"."d3"."width"."height"."color"."arc"."arcLabel"].function(pie,data,d3,width,height,color,arc,arcLabel)
{
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("stroke"."white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family"."sans-serif")
.attr("font-size", 12)
.attr("text-anchor"."middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y"."-0.4em")
.attr("font-weight"."bold").text(d => d.data.name).call(text => text.filter(d => (d.endangle-d.startangle) > 0.25).appEnd ().text(d => d.data.name).call(text => text.filter(d => (d.endangle-d.startangle) > 0.25).appEnd ("tspan")
.attr("x", 0)
.attr("y"."0.7 em")
.attr("fill-opacity", 0.7). The text (d = > d.d. Ata value. ToLocaleString ()));returnsvg.node(); }); main.variable(observer("data")).define("data"["d3"].function(d3){return(
d3.csv("https://gist.githubusercontent.com/mbostock/a3541c73fdccd432acc8b11bf9f02641/raw/2bd0fce0bf34b020e93c5f6527b5a9d08c33ff 06/population-by-age.csv", d3.autoType)
)});
main.variable(observer("color")).define("color"["d3"."data"].function(d3,data){returnD3.scaleordinal ().domain(data.map(d => d.name)).range(d3.quantize(t => d3.interpolatespectral (t * 0.8 + 0.1), data.length).reverse()) )}); main.variable(observer("height")).define("height"["width"].function(width){return(
Math.min(width, 500)
)});
main.variable(observer("arc")).define("arc"["d3"."width"."height"].function(d3,width,height){return(
d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
)});
main.variable(observer("arcLabel")).define("arcLabel"["width"."height"."d3"].function(width,height,d3) {const radius = math.min (width,height) / 2 * 0.8;returnd3.arc().innerRadius(radius).outerRadius(radius); }); main.variable(observer("pie")).define("pie"["d3"].function(d3){return(
d3.pie()
.sort(null)
.value(d => d.value)
)});
main.variable(observer("d3")).define("d3"["require"].function(require){return(
require("d3@5"))});return main;
}
Copy the code- The 👆 code alone is not enough; native development with D3 also requires an HTTP-server service. Local files cannot be read directly due to browser security restrictions.
- As you can see several times in the above code, D3 uses the selectAll function to manipulate the DOM. Although manipulating the DOM is quite flexible, a large number of DOM operations can cause performance degradation.
- According to the code of D3 pie chart, it can be inferred that it must take some time and cost to make good use of D3. Because D3 is more complex compared to Echarts and HighCharts. Echarts and HighCharts are relatively simple, with cases almost ready to pick up. Even the HighCharts charts are clearly annotated like handwriting. I have read a sentence that I can learn D3 well and even write an Echarts /HighCharts by hand. Although an exaggeration, the learning cost of D3 is significantly higher than the other two tools.
- One feature of D3 is echarts and HighCharts. D3 Two or more charts of different types. Users can interact with one of the charts and change the other charts smoothly.
Echarts pie chart
option = {
title : {
text: 'Source of user visits to a site',
subtext: 'Pure fiction',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Direct access'.'Email marketing'.'Affiliate advertising'.'Video advertising'.'Search engines']
},
series : [
{
name: 'Access source'.type: 'pie',
radius : '55%',
center: ['50%'.'60%'],
data:[
{value:335, name:'Direct access'},
{value:310, name:'Email marketing'},
{value:234, name:'Affiliate advertising'},
{value:135, name:'Video advertising'},
{value:1548, name:'Search engines'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]};Copy the code- Echarts pie chart is much simpler than D3 ！！！！ Have, pick up can use!!
- Echarts can develop local files directly, without the need for service development.
- As an open source project of Baidu, Echarts is supported by a strong technical team. Looking through the reviews of Echarts on the Web in recent years, I found that echarts has been closing the gap with other visualization frameworks at a rapid rate. – As can be seen from the 👆 code, Echarts is too packaged to be customizable and can’t be drawn like D3.
- Echarts has much better browser compatibility than D3.
HighCharts pie chart
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
animation: {
duration: 2000
},
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%'.'50%']
}
},
tooltip: {
valueSuffix: The '%'
},
series: [{
name: 'Inner',
data: browserData,
size: '40%'
}, {
name: 'Outer',
data: versionsData,
size: '80%',
innerSize: '60%'}}]);Copy the code- Is the code style of HighCharts similar to that of Echarts? They are all ready to use.
- HighCharts allows direct native file development without the need for service development.
- Personally, I think the appearance level of HighCharts is higher than that of Echarts, and the Chinese documents are clearer and easier to understand.
- HighCharts also packages too high.
- HighCharts has fewer types of charts than Echarts. HighCharts has 15 categories while Echarts has 21 categories.
- HighCharts is the only commercially available visualization tool of the three.
conclusion
| Visualization tool | Learning costs | How easy is it | Whether open source | compatibility | Local development environment | Graph type restriction |
|---|---|---|---|---|---|---|
| D3 | high | difficult | Open source | Poor Internet Explorer Compatibility | The HTTP-server service is required | Draw whatever you want to draw |
| echarts | low | easy | Open source | Good compatibility | Node services are not required | Can draw 21 kinds of packaged charts |
| HighCharts | low | easy | Business charge | Good compatibility | Node services are not required | You can draw 15 types of packaged charts |