如何开始以可视方式表示您的数据..提示:D3.js

很多时候,我们希望直观地表示我们存储在webapp后端中的数据。 例如:显示有多少用户在我们的网站上进行了某些活动,有多少用户在我们的网站上注册以及更多。

卡洛斯·穆萨(Carlos Muza)在《 Unsplash》上发表的“在光滑表面上笔记本电脑的屏幕上带有统计数据的图表”

图片值得一千个单词! 除了文字,我们希望重要的信息通过图像弹出。 仪表板通常是查看此类信息的地方。因此,无论我们开发的是哪个应用/网站,我们都必须以图表,条形图,甜甜圈图等显示数据。

如果只想学习一个可以帮助我们绘制复杂图表的库,那么我的建议是仅选择D3.js,而别无其他。

在混乱的日子里简化选择有助于精通一个并感到非常自信。

为什么选择D3?

D3.js功能强大,灵活,最常用,用户友好,可在线获得大量帮助。

因此,现在D3是选择。.let继续前进,看看我们如何才能熟练掌握它。

掌握D3的步骤

第1步:考虑您网站中需要视觉呈现的区域

步骤2:为从此列表中选择的问题选择适当的表示形式。

第三步:通过Freecodecamp免费进行这些练习,了解D3的基础。

第4步:我们需要能够处理数组,JSON,CSV文件或数据库中的数据。 从Javascript整理数组映射,数组过滤器,集合。

步骤5:既然我们对事情充满信心,请在bl.ocks.org中查找您选择的条形图或图形的示例。

例如:在Google搜索中以这种方式搜索-“ barchart网站:https://bl.ocks.org”

Bl.ocks.org由D3的创始人管理,并提供了很多示例。

第六步:自己动手!

步骤7:通过完成Freecodecamp中的5个练习并获得证书,对D3技能更有信心。

好极了! 做完了!

围绕本文/在媒体中关注我/阅读我的其他文章,以鼓励我写更多这样的文章并学习webapp开发中的所有内容。

关于如何实现图像上传,在浏览器上调整大小以及在服务器中存储小图像的另一篇精彩文章。 点击这里