networkx 持久化_如何使用NetworkX和D3可视化全球出口网络

networkx 持久化

by Patrick Ferris

帕特里克·费里斯(Patrick Ferris)

如何使用NetworkX和D3可视化全球出口网络 (How to visualise the Global Exporting Network using NetworkX and D3)

Data-Driven Documents (D3) is a JavaScript library for building powerful graphics to communicate information in datasets. It is also fair to say that for many, myself included, it has a non-standard approach to building the graphics. Often the learning curve can feel steep.

数据驱动文档(D3)是一个JavaScript库，用于构建功能强大的图形以传达数据集中的信息。 可以公平地说，对于包括我在内的许多人来说，它采用非标准的方法来制作图形。 通常，学习曲线会感觉陡峭。

In this post we’ll look at using NetworkX — a Python library for exploring graph structures — to do some of the initial data processing for us. Then we’ll add the artistic finishing touches in JavaScript with D3. The full code can be found on my GitHub and an interactive version can be found here.

在本文中，我们将研究如何使用NetworkX(一个用于研究图形结构的Python库)为我们执行一些初始数据处理。 然后，我们将使用D3在JavaScript中添加艺术效果。 完整的代码可以在我的GitHub上找到，而交互式版本可以在这里找到。

数据 (The data)

I remember when I was first introduced to the CIA World Factbook, and I loved it. It holds a treasure trove of information about all of the countries in the world. It is just screaming for visualisations of the data to be made. On top of this, it has been converted to different formats on GitHub and — most importantly for us — to JSON.

我记得当我第一次被介绍给CIA World Factbook时 ，我喜欢它。 它拥有有关世界所有国家的信息宝库。 只是要可视化要制作的数据而已。 最重要的是，它已在GitHub上转换为不同的格式，并且对我们来说最重要的是转换为JSON。

The data is given per country using their two character ISO encoding. We’ll need the continent each country is in to access the data. First we’ll create that dictionary:

数据是使用两个字符的ISO编码按国家/地区给出的。 我们将需要每个国家/地区所在的大陆来访问数据。 首先，我们将创建该字典：

The dictionary makes things a lot simpler when we want to access the URL for each country’s data.

当我们想访问每个国家/地区的数据的URL时，字典使事情变得简单得多。

The next step is to define a simple Country class to hold the data. While we’re at it, it would improve the visualisation if we could use actual country names — not their two character code — so we can find that information and store it for later use.

下一步是定义一个简单的Country类来保存数据。 在此过程中，如果我们可以使用实际的国家名称(而不是两个字符的代码)，则可以改善可视化，因此我们可以找到该信息并将其存储以备后用。

And now we’re finally ready to add the exporter information — this method isn’t perfect but it gets a majority of the information.

现在，我们终于准备好添加导出器信息了-这种方法虽然不完美，但可以获取大部分信息。

Don’t worry too much about the split() functions on the exporting partners. That’s just cleaning up some of the data so we only get the names and the percentages we want. Check out the GitHub page to see the extra names I had to add for the graph construction to work.

不必太担心出口伙伴上的split()函数。 那只是清除一些数据，所以我们只得到想要的名称和百分比。 查看GitHub页面，查看我必须添加的其他名称，以便图结构正常工作。

网络X (NetworkX)

NetworkX is a fairly sophisticated Python library for constructing, analysing, and — to a certain extent — exporting graph data structures. It is also really simple to use.

NetworkX是一个相当复杂的Python库，用于构造，分析和(在一定程度上)导出图形数据结构。 使用起来也很简单。

Now that we have the data we want stored in our Country objects, the code for creating our directed graph is very simple.

现在我们已经将数据存储在Country对象中，用于创建有向图的代码非常简单。

We can also add attributes to our nodes like the degree of the node and the name (not the ISO code). Once we have our data structure we can export it to a JSON format and dump it in a file ready to be used with D3.

我们还可以向节点添加属性，例如节点的程度和名称(不是ISO代码)。 有了数据结构后，我们可以将其导出为JSON格式并将其转储到准备与D3一起使用的文件中。

D3有什么不同？ (What’s different about D3?)

From the outset, Mike Bostock (the founder of D3) wanted to create a “reusable chart.” In his post on the subject, he highlights the key goals and missions for the D3 project. These can help us understand the syntactic structure it has.

从一开始，D3的创始人Mike Bostock就想创建一个“可重复使用的图表”。 在他的岗位上的问题，他强调了在D3项目的主要目标和任务。 这些可以帮助我们理解其语法结构。

The first, and most important, take-away is that charts should be implementable “as closures with getter-setter methods.” If you’re new to programming you may be confused as to what a closure is. Don’t worry! The big concept associated with closures is lexical scoping, which sounds a lot scarier than it really is. The basic idea behind it all is nested functions and how the inner function has access to the outer function’s variables.

首先也是最重要的一点是，图表应“可作为使用getter-setter方法的闭包”来实现。 如果您不熟悉编程，可能会对什么是闭包感到困惑。 不用担心 与闭包相关的大概念是词法作用域，这听起来比实际要可怕得多。 所有这些背后的基本思想是嵌套函数以及内部函数如何访问外部函数的变量。

Take a look at EXAMPLE 1 in the code below. Here we simply return the inner function, which has access to the arguments passed to the outer function. The variable we declare, closureOne , is a function and when we execute it with closureOne() we console.log(config.name) .

在下面的代码中查看EXAMPLE 1 。 在这里，我们简单地返回内部函数，该函数可以访问传递给外部函数的参数。 我们声明的变量closureOne是一个函数，当我们使用closureOne()执行它时，我们会closureOne() console.log(config.name) 。

In EXAMPLE 2, we declare variables within the scope of the outer function allowing the inner my function to have access to it. In the fullName function associated with the my function — a method — we can either set or get the nameOfPerson depending on it any arguments are passed. Notice how the developer does not have access to the variable nameOfPerson . The developer is forced to use our defined methods to update and access it, providing a level of security to our function.

在EXAMPLE 2 ，我们在外部函数范围内声明变量，从而允许内部my函数可以访问它。 在fullName与相关联的功能my功能-的方法-我们可以设置或获取nameOfPerson依赖于它的任何参数被传递。 注意，开发人员如何无法访问变量nameOfPerson 。 开发人员被迫使用我们定义的方法来更新和访问它，从而为我们的功能提供一定程度的安全性。

This method of using closures is how D3 is coded. Take a look at the line function to see this in action. This video may also shed some light on the topic.

这种使用闭包的方法就是D3编码的方式。 看一下line函数，看看它的作用。 该视频还可以使您对该主题有所了解。

在D3中编程 (Programming in D3)

Thankfully you don’t need to be a master of closures and D3 to create a visualisation. In fact, so long as you can copy and paste, you can usually get something running in no time at all thanks to Mike Bostock’s Blocks. This site has many open-source examples of building data visualisations in D3. You can use the code to create your own with your data.

值得庆幸的是，您无需成为闭包和D3的大师即可创建可视化效果。 实际上，只要您可以复制和粘贴，由于Mike Bostock的Blocks ，您通常可以立即使所有内容立即运行。 该站点提供了许多D3中可视化建筑数据的开源示例。 您可以使用代码创建自己的数据。

To create the network for this tutorial, I used this example. To get it running on screen, all I had to change was the name of the .csv file.

为了创建本教程的网络，我使用了这个示例 。 为了使其在屏幕上运行，我要做的就是更改.csv文件的名称。

Let’s look at some of the key lines of code making this visualisation work, and also the parts I’ve added to hopefully improve it further.

让我们看一下使该可视化工作的一些关键代码行 ，以及我为希望进一步改进而添加的部分。

Just before we dive in, Andrew Dunkman wrote a great article helping explain D3 selection which I recommend reading.

就在我们潜水之前，安德鲁·邓克曼(Andrew Dunkman)写了一篇很棒的文章，帮助解释D3选择 ，我建议阅读。

To see the functions we’re calling like dragstarted , scaledSize , or mouseOut , be sure to look at the full code here. As an example, let’s see what’s happening when we click on a node.

要查看我们正在调用的dragstarted ，例如dragstarted ， scaledSize或mouseOut ，请确保在此处查看完整的代码。 例如，让我们看看单击节点时发生了什么。

结论 (Conclusion)

The code is messy, the visualisation isn’t perfect, and there is so much left to discuss and learn.

代码杂乱无章，可视化效果不完美，讨论和学习的内容还很多。

But that’s beside the point. Hopefully this post has been able to let you get your feet wet with NetworkX and D3 without throwing too much at you. We all have to start somewhere, and this can be your beginning to create insightful and powerful data visualisations.

但这不是重点。 希望这篇文章能够使您在使用NetworkX和D3时不会感到费解。 我们都必须从某个地方开始，这可能是您创建有见地且功能强大的数据可视化的开始。

If you’re stuck wondering what to tackle next, here are a few of suggestions:

如果您不知道下一步该怎么做，这里有一些建议：

• Mike Bostock’s Towards Reusable Charts — this is a great example of someone explaining their thought process and then their implementation. This shows how his goals for the project affected his implementation.

  Mike Bostock的“迈向可重用图表” —这是一个很好的例子，可以说明他们的思维过程，然后解释其实现。 这显示了他的项目目标如何影响他的实施。

• D3 and React — two libraries fighting over the DOM, this is currently what I’m reading about, and seeing what are the best ways to utilise both on a project.

  D3和React –两个正在争夺DOM的库，这是我目前正在阅读的内容，并且看到了在项目上同时使用两者的最佳方法。

• Elijah Meeks, Senior Data Visualization Engineer at Netflix —any of Elijah Meeks’ posts are a great resource and often shed light on the world of data visualisation.

  Netflix的高级数据可视化工程师 Elijah Meeks – Elijah Meeks的任何帖子都是非常有用的资源，通常可以阐明数据可视化的世界。

Thanks for sticking with me to the end. Happy visualising!

感谢您坚持到底。 视觉效果愉快！

翻译自: https://www.freecodecamp.org/news/how-to-visualise-the-global-exporting-network-using-networkx-and-d3-b85abee95ee2/

networkx 持久化