This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact
1. The first is the difference in the technology stack.
Web development mainly uses HTML to describe structure, CSS to describe presentation, and JavaScript to describe behavior. Visualization, on the other hand, is less about HTML and CSS and more about dealing with Canvas, SVG, WebGL and other graphical apis of the browser. This is because Web development is about rendering blocky content, so HTML is a more appropriate technology. Visual development needs to present a wide variety of shapes and structures, so shape-rich SVG and lower-level Canvas2D and WebGL are more suitable technologies.
2. Second, Web development focuses on processing ordinary text and multimedia information.
Rendering plain, easy-to-read text and multimedia content, while visual development focuses on processing structured data and rendering a variety of relatively complex charts and graphic elements. They have different information characteristics and requirements for graphic rendering, so there are also big differences in detail processing.
It’s a little abstract. Let me give you an example. When we use an off-the-shelf icon library like ECharts to develop diagrams, we often encounter situations where product needs are not well met. For example, if you want to change the default layout of a chart from absolute to something else, change the style of the axis indicator to dotted lines, change the color scheme to linear gradients, or change the click range of a point on the map. While some problems can be solved by modifying the parameter configuration (each ECharts diagram can have dozens of different configuration items), some problems can be solved by modifying the library’s source code. As a result, off-the-shelf charting libraries such as ECharts, while powerful and complex in configuration, are still not as flexible as CSS in terms of style details.
In addition, visualization needs to deal with more visual details, especially when the data to be presented is more detailed, it may need to accurately present the size, distance, Angle, height, light, shadow and so on. The processing of these details requires us to have more precise control over graphic drawing. Therefore, we need to master the theoretical knowledge of graphics in depth, understand and familiar with professional graphics library and drawing tools. In short, the front end of Web development is still primarily concerned with content and style, rendering and rendering of graphics is done by the bottom layer of the browser, and the visual front end may have to go deep into the bottom rendering layer to really control the rendering of graphics and the presentation of details.
3. Front-end development students want to learn visualization, the threshold is not high, there are three main reasons:
First, visualization, like a Web front end, is ultimately rendered as an image on the browser, so there are many common methodologies. For example, they both involve the DOM, handle browser events, use the same color representation, use the same resource request method, and so on.
Second, both use JavaScript, and both are browser-side JavaScript. So, in terms of JavaScript usage, there’s not a lot of difference. However, visual applications are more complex than traditional Web applications in terms of data and graphic elements rendered, so they rely more on JavaScript.
Third, there are many mature tools in the Web front-end domain, including reactive frameworks (e.g., Vue, React, Angular), Design systems (e.g., Ant Design, ElementUI), function libraries (e.g., Underscore, Lodash), and so on. Like the Web front end, the visualization world has rich JavaScript tools and a vibrant ecosystem, often “out of the box” tools that can help with visual development.
Therefore, as long as we are good at using these mature visualization tools, we can accomplish the task at hand efficiently. Therefore, these tools are very important for the learning and application of visualization. So let me take you through some of the tools that are commonly used in visualization.
Tools in the field of visualization The field of visualization has evolved over the years with a wealth of tools. We can roughly divide these tools into four categories: chart libraries that specialize in presenting various types of charts; Professional processing of maps, geographical location visualization of the geographic database; Professional rendering library for visual rendering; And a data-driven framework for processing data.
4. Here are some important libraries:
The first is the chart library. Visualization applications usually require drawing a large number of charts, such as bar charts, line charts, pie charts, and some simple plane maps, etc. The chart library helps us plot them quickly. There are many excellent open source chart libraries in the community, such as ECharts, or similar ones such as ChartList, chart.js, etc., which belong to chart libraries.
If we want to draw more complex maps, such as three-dimensional models of traffic routes and buildings of a city, or three-dimensional architectural models of a park, etc., we may rely on professional GIS map libraries. There are quite a few mature GIS libraries in the community, such as Mapbox, Leaflet, deck.gl, CesiumJS and so on.
If you want to draw other more flexible graphics, images, or physical models, some of the diagram libraries we use may not be able to do that. At this point, we can use a more general render library such as ThreesJS, SpriteJS (in fact, the graph library or GIS map library itself is based on these render libraries). We can choose from generic graphics libraries, such as SpriteJS for 2D rendering, ThreeJS, BabylonJS, SpriteJS3D extensions for 3D rendering, and so on.
In addition to these libraries, there is a special class of libraries, such as d3.js, which belong to the data-driven framework. So what is a data-driven framework? This is a special kind of library that focuses more on the organization of data and leaves the rendering of data to a lower-level graphics system (DOM, SVG, Canvas) or a general-purpose graphics library (SpriteJS, ThreeJS).
D3.js, like the chart library, can perform all kinds of chart presentations in visualization projects, but there are differences between them. Now, LET me talk about their strengths and weaknesses.
Most chart libraries, such as ECharts, provide encapsulated chart types that can be used by simply configuring the parameters. But because of this, the form a chart can take is also fixed by the preset chart types and encapsulated parameters. If we want to do something very personal visually, it’s relatively difficult to do it with a chart library. D3.js, on the other hand, is more flexible and easy to expand because it only focuses on the organization of data and leaves the specific rendering to the bottom layer. But relatively, unlike other chart libraries, have a complete package, the threshold of use is relatively high.
D3.js is a very important library in the field of visualization. The specific operation mechanism of d3.js is quite complicated. We will explain it in detail in the data section.
5. Summary of main points
In this lesson, we focus on the differences and similarities between Web front-end and visualization.
There are two main differences. The first is the difference in the technology stack. Web development mainly uses HTML and CSS, while visualization involves less HTML and CSS. It deals more with Canvas, SVG, WebGL and other graphical apis of the browser. Second, Web development focuses on the processing of plain text and multimedia information, rendering plain, easy to read the text and multimedia content, while the visual development focuses on dealing with structured data, sometimes need to deep layer rendering engine, to control the details, the browser apply colours to a drawing gives a variety of relatively complex diagrams and graphic elements.
However, if you’ve been doing front-end development, it’s not that hard to learn visualization because there are many common methodologies and they all rely on JavaScript. There are also many mature tools and libraries available for visualization.