阅读更多

0顶
0踩

Web前端
信息图使用图形或各种可视化元素来展示信息、数据或知识,这些图表可以让用户更容易接受和掌握作者想传递的内容。

本文所带来的这些信息图不是通常所见的静态图片,而是使用HTML、CSS3和JavaScript所创建,通过动画和互动的形式,提供了非常有意义的信息。希望能为你的Web开发或设计工作带来一些灵感。

1.  State of The Internet

互联网正在飞速地发展、膨胀,同时也越来越移动化。这个动态的信息图展示了每时每刻互联网中正在发生的变化,这些数据在不断变化着。



2.  Is the Internet Awake?

该信息图以动态气泡图形式展示了25个国家和地区白天、晚上宽带用户的数量情况。



3.  Intacto 10 Years of History

该信息图以星际旅行的形式展示了互联网2001年到2012年的发展情况。



4.  Future of Car Sharing

汽车共享(Car Sharing)发展情况信息图。



5.  Sandalous Dirt

Twitter社区所有热门对话和主题统计。



6.  Organized Crime: THe World's Largest Social Network

复杂的世界犯罪网络信息图。



7.  How many slaves work for you?

互动型信息图,将根据你输入的不同问题,计算为你工作的奴隶数量。



8.  You VS. John Paulson

和超级商人约翰•保尔森比较你的收入。



英文原文:8 Amazing Interactive Infographics Created With HTML, CSS and Javascript
  • 大小: 9 KB
  • 大小: 7.3 KB
  • 大小: 13.8 KB
  • 大小: 23.2 KB
  • 大小: 30.2 KB
  • 大小: 33.5 KB
  • 大小: 11.9 KB
  • 大小: 18.7 KB
0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 50个令人叹为观止的JavaScript应用站点

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 5款最佳替代Sketch软件,第一款简直令人叹为观止!

    Sketch是Mac平台上专门为用户界面设计的...本文盘点了5个Sketch替代软件,分析了使用价格、系统要求、操作难度和云协作能力。总有一个适合你!如果你想在Windows系统中有SketchUI设计的操作体验,那就必须是即时设计。

  • 20个专业H5(HTML5)动画工具推荐

    20个专业H5(HTML5)动画工具推荐 目录20个专业H5(HTML5)动画工具推荐AnimateMateGranimFLIPStarability.cssAnimsitioniTypedMojsCountUpAnimeEmber Burger MenuHTML5 MakerHYPE3Google Web ...

  • 二十八个 HTML5 特性与技巧

    信息技术瞬息万变。如果你不关心这种变化,...1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗? http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 如果还在用,为什么呢?如同Douglas Qua

  • 基于HTML和css的静态网页仿写

    具体效果为: 采用的技术主要有: position定位 浮动布局 弹性盒子布局 a链接 伪类 表格表单等等 ...首先全局设置为: ...html,body{ width: 100%; height: 100%; } #footer{ width: 100%; he

  • 50个令人叹为观止的JavaScript应用站点[转]

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 50个令人叹为观止的JavaScript应用站点(转载)

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web ...

  • 必须知道的28个HTML5特性、技巧

    信息技术瞬息万变。如果你不关心这种变化,所掌握...1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗?  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 如果还在用,为什么呢?如同D

  • 28个HTML5小说明

    1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗? 如果还在用,为什么呢?如同Douglas Quaid所说,转到新的HTML5这种文档类型吧,它会使你看起来更年轻。实际上,你当真知道XHTML的文档类型声明...

  • 将基于jQuery的惰性图像加载更新到IntersectionObserver

    快进到2018年,除了Safari和IE之外,到处都支持“ Intersection Observer API ”,因为Safari和IE令人叹为观止。 我们将在稍后讨论该问题。 Following Dean Hume's blog post on the topic, I start with my images...

  • webgl1到webgl2_9个令人振奋的WebGL演示

    这是九个令人叹为观止的演示,它们将恢复您对客户端矢量图形动画的信心。 1. Chrome世界迷宫 (1. Chrome World Maze) Chrome World Maze is one of the flagship Chrome experiments. With Chrome World Maze, you ...

  • 基于强化学习的智能机器人路径规划算法研究(附代码)

    上图给出一个格状环境,每个箭头代表主体可采取的一个动作,从一个状态转移到另一个。每个箭头关联的数值代表主体执行该动作后的立即奖励r(s,a)。状态G可以看成是目标状态,主体只有进入该状态才有大于0的奖励值,...

  • 令人叹为观止的JavaScript应用站点

    开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web 开发者看来,Flash 并不是他们的首要选择,因为 Flash 至今对搜索引擎仍是...

  • 介绍一款令人叹为观止的Flex网络操作系统

    基于B/S结构的WindowsXP系统、Flex网络操作系统、浏览器操作系统、仿WindowsXP的Web系统、在线桌面系统。……以下的截图,不是我的计算机Windows桌面,也不是我在远程登录计算机,而是在浏览器上运行的Web系统。点击...

  • 《CSS样式表行为手册》中文chm最新版本

    CSS样式表里重点讲述“行为”功能的一本CHM参考手册,很实用方便,内容也很丰富,收藏一下哦!

  • 1-中国各地区-固定资产投资-房地产开发投资情况(1999-2020年)-社科数据.zip

    中国各地区固定资产投资中的房地产开发投资数据集涵盖了1999至2020年的详细统计信息。该数据集包含了全国各城市地级市州的房地产开发投资情况,这些数据对于理解中国城市化进程、经济发展和房地产市场趋势至关重要。数据集中的指标包括年份、地区以及对应的房地产开发投资额(以亿元为单位),这些数据来源于中国区域统计年鉴及各省市统计年鉴。通过这些数据,研究者和决策者可以深入了解不同地区的经济动态,评估房地产市场的健康状况,并据此制定相应的政策和战略。这些数据不仅有助于宏观经济分析,还能为房地产开发商提供市场进入和扩张的决策支持。

  • 1-中国各地区数字经济发展对环境污染的影响数据(2011-2021年)-社科数据.zip

    中国各地区数字经济发展对环境污染的影响数据集(2011-2021年)提供了深入分析数字经济与环境污染关系的实证数据。该数据集涵盖了中国各地区在数字经济发展水平、环境污染物排放量、人口与经济指标、外资利用情况以及绿色专利指标等多个维度的数据。具体来说,数据集包括了行政区划代码、年份、所属省份等基本信息,以及数字经济水平熵值法、PM2.5均值、工业烟粉尘排放量、工业二氧化硫排放量、工业废水排放量等关键指标。此外,数据集还涉及了人口密度、人均地区生产总值、实际利用外资额占GDP之比、科学支出占比等经济和人口统计数据,以及绿色专利申请和授权总量等创新指标。这些数据不仅有助于研究者探讨数字经济对环境污染的直接影响,还能分析其潜在的中介机制和影响因素,为理解数字经济如何影响环境质量提供了宝贵的数据资源。

  • 1-中国各区县-工业行业企业数2004-2020年-社科数据.zip

    中国各区县工业行业企业数数据集覆盖了2004至2020年的时间跨度,提供了全国范围内区县级工业企业数量的详细统计。这些数据不仅能够反映中国工业企业的发展趋势和分布状况,而且对于研究工业行业的区域差异、发展质量和效益具有重要意义。数据集中包含了省份、地区、时间以及工业行业企业数目等关键指标,总计超过33000条数据记录。这些数据来源于各地方统计局,并经过整理,为研究者提供了一个宝贵的资源,以支持对中国经济特别是工业行业的深入分析和研究。

  • BGM坏了吗111111

    BGM坏了吗111111

  • 毕业设计&课设_主要语言为 Java,含相关文件及配置.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

Global site tag (gtag.js) - Google Analytics