Original text: medium.com/@enjalot/th…
Source code address: github.com/ssthouse/d3…
If this article helped you, give it a like: Tada:
Github address: github.com/ssthouse/d3…
The scenery on my journey to d3.js is beautiful, magnificent and sometimes even rugged. You might be intimidated by the long list of functions in the D3. js documentation (D3’s API), or exhausted by dozens of tutorials. There are over 20,000 examples you can use to learn: 20,000+ D3 examples, but you don’t know which ones are really helpful for you to learn D3.js.
If you just want a quick bar chart or graph, this article is probably not for you. There are plenty of charting libraries to help you do this. If you prefer to read books, this book might be a good starting point for Interactive Data Visualization for the Web. Elijah Meeks’ D3.js in Action can help you better understand the D3 API.
The purpose of this article is to prepare you mentally for learning D3 and to provide some directions for the rest of your study. In addition to learning about THE D3 API itself, the concepts of HTML, SVG, CSS, Javascript and data visualization of web standards are all required to be learned. Chances are you already know some of the above, and this article is designed to give you a good starting point to continue learning.
r2d3.us visual introduction to machine learningSet a high starting point
Before we dive into data visualization and code tricks, let’s take a look at some of the things that make learning interesting. There are many amazing example, might as well have a look, and points in and set yourself a learning objective: New York Times article, r2d3, distill. Pub, datasketch | es, polygraph, ncase.
Don’t just look, set a bigger goal for yourself. What I learned from this article is that the best way to learn is to set yourself a task that you want to accomplish and try your best to accomplish it: interviewing some of the top data visualization practitioners using d3.js .
Graphical presentation
D3 does not introduce a new form of visual presentation. Unlike Processing, Raphael, or Protovis, the D3 graphics vocabulary comes directly from the Web standards: : HTML, SVG, and CSS-d3js.org
Learning D3 to write charts is like learning French to write nutrition labels. To be fair,@syntagmaticIt’s a really good oneNutrition labels
A diagram is simply a rectangle with some shape inside it. D3 provides a way for you to manipulate ICONS or your own custom graphics to express the data you want to display. It allows you to easily add visual interactions to your graphics and define how your graphics will behave. What you learn in D3 is a visual representation that you don’t get in other libraries.
If you want to learn about the guidelines that people follow for the different kinds of markup and graphic symbols they use, you can refer to this book: Grammar of Graphics.
But don’t worry, you can create countless creative pieces using just circles and rectangles. Start with simple things, show something on the screen first, and refine it later.
On the Web presentation
SVG Beyond Mere ShapesIs a great demonstration of graphical manipulation of web standards
One of the reasons we chose D3 is that you can easily share your work with anyone with a browser. This means you need to have a basic understanding of HTML5. Before you start learning the D3 API, you should already have a basic knowledge of SVG, HMTL and CSS. If you have time, you might want to check out this article on Canvas (if the data you are presenting is very large). Learn some Canvas. I recommend you to read this article too, it can help you to use Canvas and D3 well. This is a great Intermediate tutorial.
For SVG, I recommend checking out this short and interesting introduction to SVG Primer from Scott Murray. Use the tools: BlockBuilder to quickly start your coding without spending time configuring your development environment. You can also check out the MDN reference Site for SVG. After you have mastered the basics of SVG, you can revisit this article to give you a deeper understanding of SVG beyond mere Shapes from Nadieh Bremer.
blockbuilder.orgLet you quickly start playing web graphics standards!
You don’t even have to use SVG to render graphics, sometimes just div is enough to get the look you want. Of course, this requires you to have a good grasp of CSS: CSS Positioning. You can even mix HTML, SVG, and Canvas to achieve the desired effect!
Start learning d3.js
d3js.org
You’ve probably seen the D3 API documentation showing stacks of Function: D3’s API, but luckily D3 has now been broken down into modules, so let’s pick out some of the most commonly used ones.
d3-scale
colorsIs a very common use of scale
Scales was a very basic tool in D3. You can get an idea of it here: Introducing D3-Scale from D3 author Mike Bostock. No matter what kind of data visualization you do, you’re most likely going to use one or more scales.
d3-shape
streamgraph
SVG’s path is very verbose (see this thorough overview), so D3-Shape provides some very easy ways to create and manipulate an SVG path. You can check Mike’s Introducing D3-Shape to see what it can do and get started. D3-shape also helps you draw all kinds of graphics on Canvas, you can add SVG’s path to Canvas with just one line of code!
d3-selection
the General Update Pattern
The most difficult part to understand in D3 is probably the selection model. Similarly, take a look at D3 author’s article to give you a better understanding of the selection model in D3: General Update Pattern. It took me months banging my head on tables to finally understand the Selection model, but don’t be afraid! You don’t need to know all of Selection’s apis to complete a D3 game. When you’re ready to learn, you can start with this article: D3-Selections README. Also, be sure to check out this article, which is great for understanding selection model Thinking in Joins.
d3-collection
D3-nest makes it easy for youLump together similar data
Manipulating data is a very important step in data visualization. Sometimes this is even the most difficult (if your data set isn’t perfect, or if you don’t have a good understanding of it). Although there are many tools available to help with data processing, I recommend looking at D3 Collection D3-Collection, especially this module: Nest Function.
d3-hierarchy
Treemap
Following on from the above discussion of data manipulation. In many data visualizations, it is critical to present the data according to its structure. There are a number of tools you can find here, Function, that can help you to perform this kind of data processing easily: D3-hierarchy draws data in a tree structure.
d3-zoom
zooming is fun!
Scaling is a very common data visualization interaction. Mike, author of D3, gives a series of examples to show how scaling can be incorporated into your data visualization. You can also look at drag d3-drag, which is very similar to zoom
d3-force
sparse matrices
One of the most amazing features in D3 is the D3 Force Layout. It’s easy to get started, but hard to really master. For details, see d3-force.
Search!
One final tip: You can search for any API Function at this site: BlockBuilder’s Search. You can even limit your search scope to version D3!
look at all those blocks!
D3 community
Blockiverse
Connect with like-minded people! You can join our Slack Channel: d3.js Slack Channel. Or find your nearest D3 offline event: www.meetup.com/topics/d3-j…) If you are crazy about D3, come to SF’s annual fall reunion! annual d3.unconf!
My understanding of the D3 community and the difficulties of learning D3
Thank you very muchErik HazzardHelp me edit and polish this article. Thank youKai ChangThanks more for your help to the D3 community for the suggestions put forward in this article. Thanks to Slack Channel # teat-d3 in thed3js Slack, especiallySebastian 和 JohnThanks, of course, to the author of D3Mike BostockCreating a playground for all of us to play in!
Want to learn more about D3.js?
Here is my D3.js, Github address for data visualization, welcome to Start & fork :tada:
D3-blog
If you like it, check out the link below:)
Making the home page
Zhihu column
The Denver nuggets
Welcome to follow my official account:
