One, foreword

During the three years of university, I learned a lot of things, but the only thing I kept doing was visual development. It was very important to have a responsible instructor. Since I will be a senior in college, I may not continue to learn in this field, so I will sum up my previous experience in the competition and make a note, and I will forget that there are materials to consult later.

The so-called visualization is to show a large amount of data in the form of charts, analyze the rules, and get some analysis results, which is the so-called visual analysis.

Visualizations are mostly based on JavaScript, and whatever the twist, it just feels like learning JavaScript. So want to learn visualization, front-end knowledge is very important, at least the most basic grammar to be able to play, or there is no way to go. Because in the visual process is equivalent to doing web pages, constantly beautify, so that your system makes others look comfortable, beautiful and simple.

Second, the use of echarts.js library

1. Reference

Echarts is a visual analysis library developed by Baidu, which is based on JavaScript and maintained by Baidu.

The official website is Echarts and the GitHub address is Echarts GitHub.

The way to make simple page references to echarts is to reference the echarts.js library with a script tag, and then initialize it in your code. The echarts.js library can be downloaded from the download page on the official website. At the bottom of the page, click download source code. Alternatively, download the GitHub source, the echarts.js library, under the dist folder. There are two ways to get the latest version of Echarts.

2. Develop documentation

Click on the tutorial in the documentation on the official website to learn about Echarts and draw a simple graphic to get started.

Click on configuration items, which is a description of all drawing operations for the rest of the development. And the API section is where you can look if you’re developing a graph that involves click events and everything else.

We can not type out each graph by ourselves, we can borrow the echarts official website code template (official website -> instance -> official example), and then select the graph you want to click in, you can copy the code to run.

If these code panels do not look good or do not meet their needs, you can click on the community ->Gallery, which is some graphics developed by users, more beautiful, can be used to do their own template.

3. Examples

Illustrate the use of Echarts by drawing a simple diagram. Using Echarts is simple and consists of the following steps.

Import Echarts, create a div to draw graphics, initialize echarts instances, add elements to Options, and put options into div.

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <! Echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <! -- Prepare a Dom with size (width and height) for ECharts
    <div id="main" style="width: 600px; height:400px;"></div>
    <script type="text/javascript">
        // Initializes the echarts instance based on the prepared DOM
        var myChart = echarts.init(document.getElementById('main'));

        // Specify the chart configuration items and data
        var option = {
            title: {
                text: 'Getting started with ECharts'
            },
            tooltip: {},
            legend: {
                data: ['sales']},xAxis: {
                data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
            series: [{
                name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};// Display the chart using the configuration items and data you just specified.
        myChart.setOption(option);
    </script>
</body>
</html>
Copy the code

4. Use summaries

Home-made goods, Chinese information, baidu a check, a lot of resources. High integration, easy to use, easy to start, good visual effect.

3. Use of d3. js library

1. Reference

D3, like Echarts, is a visual graphics library, also based on JavaScript, which was developed abroad.

The official address is D3 and the GitHub address is D3 GitHub.

Good use of echarts, through the script reference, download the address of the website homepage scroll down a few can be obtained. At present, D3 has been upgraded to V5. During development, V4 and V5 are used as far as possible. There is not much difference between them, but there is still a big difference between V3, which requires a lot of code changes.

2. Data index

The Chinese API documentation, the instance library, the difference between V3 and V4, this is the official reference for D3. General learning D3 through these to learn, not knowledge points to see the development of the document, you want to do a graphic can go to instance library card source code, and then change. V4 and V5 are recommended, and V3 is not recommended.

Also D3 is drawn in SVG, while Echarts is drawn in Canvas. SVG still needs to be understood in order to better learn D3. Can learn the knowledge of SVG in SVG | MDN.

3. Examples

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="test-svg">
		</div>
	</body>
	<script src="https://d3js.org/d3.v5.js"></script>
	<script>
		window.onload = function() {
			// Raw data
			var datax = ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun'];
			var datay = [120.200.150.80.70.110.130];
			// Width, height and border
			var width = 800,
				height = 400,
				padding = {
					top: 10.right: 40.bottom: 40.left: 40
				};
			// Create an SVG box
			var svg = d3.select("#test-svg")
				.append('svg')
				.attr('width', width + 'px')
				.attr('height', height + 'px');
				
			/ / the x axis
			var xScale = d3.scaleOrdinal()
				.domain(datax)
				.range([100.200.300.400.500.600.700]);
			var xAxis = d3.axisBottom()
				.scale(xScale);
			svg.append('g')
				.call(xAxis)
				.attr("transform"."translate(0," + (height - padding.bottom) + ")")
				.selectAll("text")
				.attr("dx"."50px");
				
			/ / y
			var yScale = d3.scaleLinear()
				.domain([0, d3.max(datay)])
				.range([height - padding.bottom, padding.top]);
			var yAxis = d3.axisLeft()
				.scale(yScale)
				.ticks(10);
			svg.append('g')
				.call(yAxis)
				.attr("transform"."translate(" + 100 + ", 0)");
			
			var bar = svg.selectAll(".bar")
				.data(datay)
				.enter().append("g")
				.attr("class"."bar")
				.attr("transform".function(d, i) {
					return "translate(" + xScale(i * 100) + "," + yScale(d) + ")";
				});
			// Create rectangle
			bar.append("rect")
				.attr("x".1)
				.attr("width".100)
				.attr("height".function(d) {
					return height - yScale(d) - padding.bottom;
				})
				.attr("stroke"."White");
			// Add text
			bar.append("text")
				.attr("dy".".75em")
				.attr("y".6)
				.attr("x".50)
				.attr("text-anchor"."middle")
				.attr("font-size"."8px")
				.attr("fill"."White")
				.text(function(d) {
					return d;
				});
		}
	</script>

</html>
Copy the code

The above example is a column chart made with V5. The syntax of D3 is different from that of Echarts. It mainly uses attr in JavaScript to change some attribute content to achieve the effect of drawing.

4. Use summaries

D3 is developed abroad, data compared with Echarts will be less, more difficult to get started, requires a thick code base to make comparable graphics and Echarts. General words to make the graph are more rigid, flexibility and beautification line is not.

4. Differences between Echarts and D3

Let’s start by talking about the use of these two visualization libraries. As a visual library in China, ECharts is used by more and more teams in the challenge. D3 was the champion for several times before the challenge. With the continuous enrichment and development of Echarts, it became the visual library with the most teams in the challenge in 2018.

The difference between Echarts and D3 is that when building a house, you need Windows. You can choose Echarts custom aluminum Windows, or you can choose D3 window tools to create personalized Windows. Echarts also has advantages in document integrity, community activity, Chinese culture, and learning difficulty. The main advantage of D3 is the flexibility to create unique interactive charts. It is clear that Echarts, as the representative of the visual chart suite, makes it easier and more efficient to build systems and achieve above average results in the limited time of the challenge. Custom visualizations are great, but if you don’t have enough time to polish them, they’re not as good as visualizations. At present, most of the teams are college students and teachers, who have done their best to present and interpret data in their limited time. Few can customize novel and efficient visualizations. So for the mastery of technology, to early layout, early investment, in order to avoid the “time to hate less” situation. Of course, I am still very optimistic about Echarts domestic boutique open source software, if Echarts can continue to develop in customizability, will greatly reduce the learning difficulty, improve the development efficiency.

You can refer to the original address.

Is an introduction to the two visualization repositories. My impression of using these two libraries is that I recommend using Echarts for competitions and D3 and Echarts for daily learning. We have a very short time in the competition. Generally, it takes a long time to make a graph with D3, and the information is less, and then the graph is very rigid, and the interaction is very poor, unless we learn very six, or we can not achieve the effect of Echarts.

Echarts packaging at the event, we just use, don’t need to care about him is how to realize, only such a short time, because we match every day could not study how to implement this function, we should put our emphasis on above analysis and the interactions between individual components, rather than to the graphics spent two or three days, it’s not worth it.

So I suggest that if we join this challenge in the future, we use Echarts as much as possible so that we can have more time for analysis. According to the previous title of the competition, the focus is on data processing and analysis, visual display is not the first, can not spend a lot of time in debugging visual code debugging.

In fact, Echarts is also open source, but the package is better. Although D3 focuses on our own design, I think we currently do not have the ability to learn the underlying principles, as long as we can use it. It doesn’t matter whether a cat is black or white as long as it catches mice. So as long as we can win the prize, then which tool is the best. D3 entry is difficult, and there are few examples, not too good for beginners.

Although I recommend Echarts above, not because it is easy, but based on the actual situation, in a short period of time to complete the game will definitely choose Echarts, normal learning both.

5. Development tools

1.VScode

The first choice for web programming must be vscode, known as the first editor in the universe. But it is really easy to use, compact and simple, start speed, you can configure a variety of plug-ins according to the need, or very fragrant.

In addition, we can also use the domestic tool HBuilder X, which is also a good web editor. The main reason is that he is friendly to VUE, and we are more comfortable developing projects with Vue later.

Webstorm is one of the members of JetBrains and the same company as PyCharm. My concept of JetBrains is cumbersome and not as good as the first two tools in terms of startup and operation. But a feature would be very powerful, after all professional.

2.Google Chrome

The front-end display environment is all on top of the browser. Chrome is now the most popular browser, and it will be easier to use than other browsers. If you don’t like Google, there are other browsers to choose from. I recommend Firefox, Auburn, and The Edge browser for Windows, which all have their own kernel, and the 360 and other browsers on the market all use these kernel, and they are too much advertising, which is uncomfortable to use.

As far as possible, do not choose to use IE browser development, poor compatibility, if the development of IE above, with other browsers will not open, this is the problem of compatibility.

That’s why I’ve always recommended using Google Chrome, which is a must-have tool for front-end developers.

3.Pycharm

How can visualization work with data without Python? Visual data cannot be drawn directly from the original data, so it must be processed according to its own ideas. Python is indispensable for data processing. The most powerful tool to use Python is PyCharm, which is cumbersome, but the hints of VScode really make me uncomfortable. After a long search, I couldn’t figure out what the problem was, so I gave up writing Python with the first editor in the universe and solved the problem with PyCharm.

In addition, JetBrains whole family barrel is charged, then we thought to crack, everyone support intellectual property is not good, ha ha ha, really not good, I also used crack. If you are a student, you can use your edu email address to authenticate yourself on JetBrains, which is free of charge. Give yourself a certification tutorial, and after you’ve been authenticated you can activate pyCharm for free. The term of use is one year, after a year can continue to go to the certification, so that you can use the legitimate tool.

Vi. Environment construction

1.Node.js

The Nodejs framework is based on the V8 engine and is currently the fastest Javascript engine available. Chrome is based on V8 and can open 20-30 web pages at once without a problem. Nodejs-standard Web development framework Express helps us build web sites quickly, more efficiently and with a lower learning curve than PHP. Great for small sites, personalized sites.

Node.js is a javascript runtime environment. It allows javascript to develop back-end programs that do almost everything other backend languages do, putting it on par with PHP, Java, Python,.NET, Ruby, and other backend languages.

Introduce his role through the blog. The vUE used later is developed based on the Node environment, so this environment must be configured. Specific installation steps I will not write, look at the installation of other big guy tutorial, will be more clear than I speak. According to the blog, configuring Node takes a long time to go to the next step.

2.vue.js

Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

Vue framework was developed by Chinese yuxi You. There are many Chinese materials and many domestic user groups. You can find these materials in any search on Baidu.

We can write echarts and D3 directly in JavaScript when we learn visualization. For beginners, we can learn framework later. However, when doing competitions or developing a visual analysis system, it is recommended to use VUE to write, which can not only modular development of the system, but also conducive to the improvement of system performance.

I remember I participated in a competition before. Because there was no framework, all the codes were put in an HTML file, which resulted in slow operation and poor system experience. So in the ordinary time can understand the use of vUE framework.

Since there are many tutorials for Vue on the web, I won’t cover them. Just post on vue’s official website and GitHub.

​