Research on visualization tools

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