精华内容
下载资源
问答
  • 2019-08-14 17:08:51

     

    <template>
     <div class='amount'>
      <baidu-map class="map" :center="{lng: 106.464029, lat: 29.547749}" :zoom="12">
         <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <my-overlay
          :position="{lng: 106.464029, lat: 29.547749}"
          text="沙坪坝区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
         <my-overlay
          :position="{lng: 106.579012, lat: 29.613082}"
          text="江北区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.754843, lat: 29.748264}"
          text="渝北区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.400559, lat: 29.812409}"
          text="北碚区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.666279, lat: 29.502902}"
          text="南岸区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.517376, lat: 29.507051}"
          text="九龙坡区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.482881, lat: 29.490453}"
          text="大渡口区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
        <my-overlay
          :position="{lng: 106.583096, lat: 29.567178}"
          text="渝中区"
          text1="热度 6000"
          :active="active"
          @mouseover.native="active = true"
          @mouseleave.native="active = false">
        </my-overlay>
      </baidu-map>
     </div>
    </template>
    <script>
    import MyOverlay from './../components/MyOverlay.vue'
    export default {
      data () {
        return {
          active: false,
          circlePath: {
            center: {
              lng: 106.464029,
              lat: 29.547749
            },
            radius: 5000
          }
        }
      },
      components: {
        MyOverlay
      },
      methods: {
        updateCirclePath (e) {
          this.circlePath.center = e.target.getCenter()
          this.circlePath.radius = e.target.getRadius()
        }
      }
    }
    </script>
    
    <style lang='less' scoped>
    .map {
    
      width: 100%;
      height: 800px;
    }
    </style>
    
    <template>
      <bm-overlay
        ref="customOverlay"
        :class="{sample: true, active}"
        pane="labelPane"
        @draw="draw">
        <div class='bmoverlay'>
          <div class='bmovebox' v-html="text+'<br/>'+text1" @click="handleClick">{{text}}</div>
        </div>
      </bm-overlay>
    </template>
    
    <script>
    export default {
      props: ['text', 'text1', 'position', 'active'],
      watch: {
        position: {
          handler () {
            this.$refs.customOverlay.reload()
          },
          deep: true
        }
      },
      methods: {
        handleClick () {
          global.alert('Well done.')
        },
        draw ({el, BMap, map}) {
          const {lng, lat} = this.position
          const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
          el.style.left = pixel.x - 60 + 'px'
          el.style.top = pixel.y - 20 + 'px'
        }
      }
    }
    </script>
    
    <style>
    .bmoverlay{
      width: 100%;
      height: 100%;
      background: rgba(186,23,18,1);
      border-radius: 50%;
      padding:2px;
      display: flex;
      align-items: left;
      justify-content:space-around;
       flex-direction: column;
    }
    .bmovebox{
    }
    .sample {
      width: 120px;
      height: 120px;
      line-height: 20px;
      border:3px solid  rgba(224,32,32,0.4);
      overflow: hidden;
      /* box-shadow: 0 0 5px #000; */
      color: #fff;
      display: flex;
      align-items: left;
      justify-content:space-around;
       flex-direction: column;
      padding-top: 120px;
      display: table-cell;
      vertical-align:middle;
      text-align: center;
      padding: 10px;
      position: absolute;
      top: 10px;
      border-radius: 50%;
    }
    .sample.active {
      background: rgba(186,23,18,0.75);
      color: #fff;
    }
    </style>
    

     

    更多相关内容
  • 该源码实现可以支持在地图自定义标记气泡效果,可以在地图上添加注释,并且可以使用气泡的效果来实现,当我们点击地图上的注释时就可以显示。
  • 类似百度地图气泡弹出的效果,源码popwin,源码实现了有点像百度地图气泡的效果,只要我们通过点击“显示”按钮,就会出现一个类似于百度地图上的气泡,然后分别可以点击气泡中的控件的,如果我们点击“隐藏”按钮,...
  • 如何绘制气泡地图

    2021-07-29 17:57:28
    气泡地图气泡来显示不同地理位置之间对应的数值,使用气泡的大小、颜色及形状表示相对差异。Wyn Enterprise内置气泡地图能力,可以快速绘制气泡地图气泡地图支持通过位置名称和经纬度两种方式来定位位置。 如...

    1. 内容概述

    气泡地图用气泡来显示不同地理位置之间对应的数值,使用气泡的大小、颜色及形状表示相对差异。Wyn Enterprise内置气泡地图能力,可以快速绘制气泡地图。

    气泡地图支持通过位置名称和经纬度两种方式来定位位置。

    如使用位置名称进行定位,需要数据集的地理信息字段必须使用官方的区域名称,包含“省”、“市”、“自治区”等关键字;使用经纬度进行定位,则无此限制。

    2. 添加地图组件


    将地图组件拖拽到仪表板编辑区,即可添加一个地图组件。

    3. 数据绑定


    添加地图组件后,“数据绑定”面板会自动打开。将数据集中的字段拖拽到绑定区即可完成数据绑定。

    如果仪表板中还未加载数据集,则需要先选择一个数据集进行加载,然后再绑定数据字段。

    数据绑定说明

    气泡地图使用“位置”或“维度”“经度”,然后加上“散点图层”作为数据绑定模块。

    示意图

    数据绑定区域

    说明

    位置

    用于绑定位置字段,字段值必须使用官方的区域名称,如“省”、“市”、“自治区”等关键字。

    可绑定一个字段。

    纬度

    您也可不使用具体的地名作为位置信息,而是使用具体的经纬度。

    如同时绑定位置名称和经纬度,那气泡地图则使用经纬度作为定位信息。

    经度与纬度配合使用,实现位置定位。可绑定一个字段。
    散点图层

    大小:可绑定一个字段。绑定字段后,将使用气泡的大小表示数值大小。

    颜色:可绑定一个字段。绑定字段后,将使用气泡的颜色表示数值大小。

    形状:可绑定一个字段。绑定字段后,将使用气泡的形状表示数值大小。

    绑定的字段默认已进行统计运算,对数值类型的字段进行了合计运算,对非数值类型的字段进行了计数运算。

    您也可以自行调整运算方式。

    钻取

    如需实现数据钻取,则绑定与位置信息有钻取关系的位置数据。

    绑定数据时需按行政区划级别顺序从大到小绑定多个字段。如位置绑定的是“销售省份,那么就可以将”“销售城市”绑定至下方的路径设置绑定区中。实际预览时,就可以由省份钻取到城市。

    如不需要数据钻取功能,则无需在钻取中绑定字段。

    有关数据钻取的更多介绍,请参考数据钻取中的介绍。地图的钻取相当于固定路径钻取。

    4. 修改统计运算方式


    您可以修改绑定到散点图层的字段运算方式,如修改为平均数、最大值、最小值,计数以及各种快速运算方式等。

    5. 属性设置


    选中组件后,在编辑区右侧选择“属性设置”或者双击该图表,打开属性设置面板,进行属性设置。

    属性中关于数据交互、数据标签、标题、图例、整体外观样式等常规公共属性的使用方法,请参考单个组件外观与属性设置

    此处仅为您介绍地图组件的特有属性(截图中面板的颜色可能与实际不同,请您以实际产品为准)。

    选项组选项名称说明
    地图样式地区边线

    设置各个地区之间分界线线的颜色。如需恢复默认设置,单击右侧的,选择“重置”即可。

    散点图层调色板

    设置地图填充颜色的配色板。

    颜色偏好

    选择地图填充的方式,可选调色板或“渐变”。

    当选择“调色板”时,地图将按照“调色板”的颜色(第一个颜色)进行填充;

    当选择“渐变”时,地图将使用“填充基色”作为基色进行渐变填充。

    填充基色

    设置渐变填充的基色,如需恢复默认设置,单击右侧的,选择“重置”即可。

    渐变偏好

    选择渐变填充的方式,支持“平滑渐变”和“分组渐变”两种。

    (请注意当散点图层的“颜色”绑定区中绑定了字段,渐变才会生效)

    显示数据标注

    设置是否显示地图中的数据标注。

    如选择为“”,则需设置具体显示哪些标注,显示方式以及标注的字体大小,如下图所示。

    图形不透明度设置地图中填充颜色的不透明度。

    6. 地图的交互


    联动分析

    仪表板联动分析模式下,地图可与其他使用同一数据集的图表发生联动。

    钻取分析

    如果绑定了钻取字段,在预览或运行时状态下,即可下钻。

    比如单击某省份进行下钻,即可展现该省份的地图。

    跳转

    如为地图设置了跳转文档,单击数据点可以选择跳转。详情请参考文档跳转

    展开全文
  • css3提示框制作热点地图气泡提示框动画特效
  • 气泡点图 -- 将EXCEL中带有经纬度坐标的数据,按点气泡的方式标注到地图上,可设置点气泡的大小、填充颜色等样式。 下面以样例数据来操作说明。 一、准备数据 假设我们手上有一份EXCEL数据,其中包含了经度...

    image.png

     

    气泡点图 -- 小O地图EXCEL版能够将EXCEL中带有经纬度坐标的数据,按点气泡的方式标注到地图上,可设置点气泡的大小、填充颜色等样式。

     

    下面以样例数据来操作说明。

     

    一、准备数据

     

    假设我们手上有一份EXCEL数据,其中包含了经度和纬度坐标数据列,这样就可以使用小O地图的地图可视化功能,将数据标注到地图上。如下图:

    image.png

     

    如果你手中的数据没有坐标信息,只有地址,需要先执行小O地图提供的“地址转坐标”功能,将地址解析为坐标,如下图:

    image.png

     

    总之,只要表格中有经纬度坐标,就可以往下执行了。

     

    二、可视化设置

     

    打开地图(高德地图),点击地图上方的“可视化”,在右边出现的控制面板上操作,新建“气泡点图”,如下图,按数字顺序依次执行。

    image.png

     

    新建气泡点图,小O地图的地图可视化是以图层方式实现,每份EXCEL表格数据都可生成可视化图层。新建图层后在图层列表上会出现图层项。如下图:

    image.png

     

    在图层列表上选择图层,下方会出现 数据样式 设置面板,每个图层需要设置图层的数据源和图层显示样式。

    下面依次介绍。

     

    a、图层数据源设置

    数据源来自EXCEL表格,对照表格设置数据所在行列号,分别为设置标题行,坐标经度和纬度所在列。如下图,

    image.png

     

    需要注意,数据不能有合并行或合并列,合并行列会影响数据读取,因此需要事先打开合并的行列,将数据填充好。

     

    设置后点击加载数据,将表格数据加载到地图上,根据数据量大小( 建议控制在2000个点内 ),稍等片刻,地图会出现加载的气泡点。

     

    image.png

     

     

    b、图层显示样式设置

     

    进入样式设置栏,为标注在地图上的气泡点设置样式。你可以

     

    1. 设置所有气泡为同一样式
    2. 也可设置分组样式,按照分类或规则设置分类样式。

     

    所见所得,设置的样式直接显示在地图上。

    image.png

     

     

    重点说下分组样式,上表数据包含有数值列,假定需求,我们要按数值区间设置分组样式

     

    1. 数值区间 0-200 :显示黄色,气泡大小10
    2. 数值区间 200-500:显示绿色,气泡大小15
    3. 数值区间 500-1000:显示红色,气泡大小20
    4. 数值区间 1000以上:显示蓝色,气泡大小30.

     

    具体操作如下:

     

    在样式栏中,新建四个分组样式,会出现数字标签的四个TAB页,每个代表一个分组样式。

    image.png

     

     

    1. 设置 数值区间 0-200 :显示黄色,气泡大小10

     

    先按要求设置颜色和气泡半径,其次设置过滤条件,如下图,按数字顺序依次点击。

     

    在设置过滤条件面板里新增“过滤表达式”,通过选择创建“数组<200”的表达式,最后点击“刷新”,地图将按表达式过滤数据。

     

    如下图,黄色的点表示符合过滤条件的数据。其他颜色的点是其他分组样式的效果。

    image.png

     

    接下来设置下一个分组样式,操作步骤与上面一样,表达式不同,依次设置完毕。

     

     

    1. 数值区间 200-500:显示绿色,气泡大小15

     

    设置条件表达式如下图,别忘了点击“刷新”,效果如下图绿色气泡。

    image.png

     

     

    1. 数值区间 500-1000:显示红色,气泡大小20

     

    设置条件表达式截图,再次提醒设置后点“刷新”

    image.png

     

    1. 数值区间 1000以上:显示蓝色,气泡大小30.

     

    条件表达式截图,点“刷新”后看效果

    image.png

     

    好了,至此已按照要求设置完分组样式。

    来个全图看效果

     

    image.png

     

    局部放大:

    image.png

     

    此外,我们通过图层栏的按钮控制图层的显示、查看全图、删除图层等。image.png

     

    以上就是气泡图层的可视化制作过程说明。希望大家活学活用,能对工作有帮助。

     

    感兴趣的朋友可以登陆小O地图官网下载软件,认准 小O地图 EXCEL版

    官网: www.GIS9.com 下载软件。
    技术支持QQ群: 955 924 536
    关注微信公众号:

    image.png

     

     

    展开全文
  • 在高德地图中添加标记marker,点击marker时会弹出对应弹窗,也就是常说的气泡
  • 在高德地图中点击弹出自定义弹框(气泡)。(结合上一个上传的文件,也可用于标记点的点击弹出的弹框气泡
  • 小程序点击地图气泡获取气泡Combining two colors that are two steps apart on the Color Wheel creates a Diad Color Harmony. This Color Harmony is one of the lesser used ones. I decided to cover it here ...

    小程序点击地图气泡获取气泡

    Combining two colors that are two steps apart on the Color Wheel creates a Diad Color Harmony. This Color Harmony is one of the lesser used ones. I decided to cover it here to add variety to your options for colorizing visualizations.

    在色轮上将相距两步的两种颜色组合在一起,将创建Diad色彩协调。 色彩和谐是使用较少的一种。 我决定在这里进行介绍,以为您的可视化着色选项增加多样性。

    As noted in my earlier Nightingale writings, color harmony is the process of choosing colors on a Color Wheel that work well together in the composition of an image. “The Blues of Color Harmony” noted the similarities between color harmony and musical harmony. Here, I will delve further into color theory by discussing the Diad Color Harmony and show how Color Gradients can be created.

    正如我在夜莺的早期著作中所提到的,色彩协调是在色轮上选择色彩的过程,这些色彩在图像的合成中可以很好地协同工作。 “ 色彩和谐的蓝调 ”指出了色彩和谐与音乐和谐之间的相似之处。 在这里,我将通过讨论Diad颜色和声来进一步研究颜色理论,并说明如何创建颜色渐变。

    The Adobe Color web app will be used to create a Diad color theme that will then be applied to a bubble chart example. The bubbles effect for each variable will be produced with Color Gradients. A flat, or circle, bubble chart alternative will also be shown. To address individuals with limited color vision, the data visualization examples are checked with the Color Blindness Simulator — Coblis. Both Adobe Color and Coblis are freely available online tools for your continued use.

    Adobe Color Web应用程序将用于创建Diad颜色主题,然后将其应用于气泡图示例。 每个变量的气泡效果将通过“颜色渐变”产生。 还将显示平面或圆形气泡图替代方案。 为了解决色觉受限的问题,请使用“ 色盲模拟器 -Coblis”检查数据可视化示例。 Adobe Color和Coblis都是免费的在线工具,供您继续使用。

    Image for post

    Reviewing Color Harmony Concepts

    回顾色彩和谐的概念

    Isaac Newton is credited with creating the Color Wheel concept when he closed the linear color spectrum into a color circle in the early 1700s. Over the centuries, artists and color scientists amplified his concept to include color harmonies. Below I show the Red-Green-Blue Color Wheel based on the concept that Red, Green and Blue (RGB) are the color primaries for viewing displays like what we see on our desktop and mobile devices. I also show the Diad Harmony of Yellow and Red that is going to used further in this writing.

    艾萨克·牛顿(Isaac Newton)在1700年代初将线性色谱图谱封闭在色环中时,就创造了色轮概念。 几个世纪以来,艺术家和色彩科学家将他的概念扩大到包括色彩和谐。 在下面,我基于红色,绿色和蓝色(RGB)是用于查看显示器(如我们在台式机和移动设备上看到的颜色)的原色的概念,显示了红绿蓝色轮。 我还展示了黄色和红色的Diad和声,它将在本文中进一步使用。

    The Red-Green-Blue Color Wheel and the Diad Color Harmony of Yellow and Red.
    The Red-Green-Blue Color Wheel and the Diad Color Harmony of Yellow and Red.
    红绿蓝三色轮与黄色和红色的Diad色彩和谐。
    Image for post

    用Adobe Color创建黄红色Diad和谐 (Creating the Yellow Red Diad Harmony with Adobe Color)

    Color Wheel based selection tools, like Adobe Color, automatically calculate a set of standard color harmonies. There is also a standard convention where five colors define a theme. The Diad color harmony, however, is not standard. So, the “Custom” function is used here to build a “Yellow Diad” theme.

    基于色轮的选择工具(如Adobe Color)会自动计算一组标准的颜色和声。 还有一个标准约定,其中五种颜色定义了一个主题。 但是,Diad色彩协调不是标准的。 因此,此处使用“自定义”功能来构建“黄色Diad”主题。

    The intended visualization in this writing is a bubble chart. To create a three dimensional “Bubbles” effect, I will use gradient fills. Gradient fills gradually change one color into another. The Yellow Diad theme has two base colors, a Yellow and a Red. For the Yellow gradient fill, a Yellow tone color will gradually transition into the Key Yellow hue. The Red gradient will be produced with a Red hue fading into a Red tint element. Four colors are thus required to accomplish the gradient fill tasks.

    本文中预期的可视化效果是气泡图。 为了创建三维“气泡”效果,我将使用渐变填充。 渐变填充逐渐将一种颜色变为另一种颜色。 Yellow Diad主题有两种基本颜色,黄色和红色。 对于黄色渐变填充,黄色调颜色将逐渐过渡为关键黄色调。 红色渐变将产生,红色色调会淡入红色色调元素。 因此需要四种颜色来完成渐变填充任务。

    Adobe Color, however, desires five colors to build a given color theme. As a result, I will add a White #FFFFFF color as the center color of the final Yellow Diad theme. This will allow the Adobe Color app to feel satisfied. These steps will become more clear as the Yellow Diad theme is built. So, let’s get started.

    但是,Adobe Color需要五种颜色来构建给定的颜色主题。 结果,我将添加白色#FFFFFF颜色作为最终的Yellow Diad主题的中心颜色。 这将使Adobe Color应用程序感到满意。 随着“ 黄色钻石”主题的建立,这些步骤将变得更加清晰。 因此,让我们开始吧。

    The first step is to select a Key or Base color. For these efforts, I will select a Yellow noted in Web Hex notation as #FFE91C. Entering #FFE91C as the middle color in Adobe Color yields a family ranging from Green Yellow to Yellow Orange.

    第一步是选择键或基色。 为了这些努力,我将选择一种以Web十六进制表示法表示的黄色作为#FFE91C。 在Adobe Color中输入#FFE91C作为中间色会产生从绿黄色到黄橙色的系列。

    Creating an Analogous Color Harmony in the Key of Yellow #FFE91C with Adobe Color.
    Creating an Analogous Color Harmony in the Key of Yellow #FFE91C with Adobe Color.
    使用Adobe Color在黄色#FFE91C的键中创建类似的色彩协调。

    This forms an Analogous Color Harmony. An Analogous Color Harmony is defined as three or more colors that are adjacent to each other on the Color Wheel. The resulting Analogous Harmony in the Key of Yellow #FFE91C is shown on the left.

    这形成了类似的色彩和声。 类比色彩协调定义为在色轮上彼此相邻的三种或更多种颜色。 左侧显示了黄色键“ FFE91C”中得到的类似和声。

    Selecting the “Custom” option under the Apply Color Harmony Rule.
    Selecting the “Custom” option under the Apply Color Harmony Rule.
    在“应用颜色协调”规则下选择“自定义”选项。

    Next, the “Custom” option is selected under the “Apply Color Harmony Rule” menu, as shown on the left.

    接下来,在“应用颜色协调规则”菜单下选择“自定义”选项,如左图所示。

    To create the Yellow Diad theme, I use a Red #C22D07 hue that is two steps clockwise from the Base or Key Yellow #FFE91C color in the Adobe Color app.

    要创建黄色Diad主题,我使用了红色#C22D07色相,该色相距Adobe Color应用程序中的“基色”或“基色黄色”#FFE91C颜色顺时针两步。

    Positioning the Yellow #FFE91C and Red #C22D07 color elements in Adobe Color.
    Positioning the Yellow #FFE91C and Red #C22D07 color elements in Adobe Color.
    在Adobe Color中放置黄色#FFE91C和红色#C22D07颜色元素。

    As noted earlier, only four colors are needed for the Yellow Diad theme. Here, I enter a neutral White #FFFFFF as the center color with Yellow #FFE91C on the far left and Red #C22D07 on the far right. These results are shown on the left.

    如前所述, Yellow Diad主题仅需要四种颜色。 在这里,我输入一个中性的白色#FFFFFF作为中心颜色,最左侧是黄色#FFE91C,最右侧是红色#C22D07。 这些结果显示在左侧。

    There are now three colors in the Yellow Diad theme: Yellow #FFE91C, Red #C22D07 and the White #FFFFFF center place holder. Our next step is to select the colors to support building the three dimensional “Bubbles” effect. For the Yellow gradient fill, a Yellow tone color will gradually transition into the Key Yellow #FFE91C element. The Red gradient will be produced with the Red #C22D07 fading into a Red tint element.

    黄色主题中现在有三种颜色:黄色#FFE91C,红色#C22D07和白色#FFFFFF中心占位符。 我们的下一步是选择颜色,以支持建立三维“气泡”效果。 对于黄色渐变填充,黄色调将逐渐过渡为Key Yellow#FFE91C元素。 红色渐变会随着红色#C22D07淡入红色色调元素而产生。

    Designing Gradient Fills for Yellow and Red Bubbles in a Bubble Chart Data Visualization.
    Designing Gradient Fills for Yellow and Red Bubbles in a Bubble Chart Data Visualization.
    在气泡图数据可视化中为黄色和红色气泡设计渐变填充。

    As noted in my previous “The Blues of Color Harmony” writing, a tone is created when a hue is mixed with Gray while a tint is defined as a hue mixed with White. These color gradient fill specifics are illustrated on the left.

    正如我之前的“ 蓝色调和调” 一书中提到的那样,当色调与灰色混合而色调被定义为与白色混合的色调时,会创建一个音调。 这些颜色渐变填充的详细信息显示在左侧。

    Creating the complete Yellow Diad theme the includes a Yellow hue and Yellow tone with a Red hue and Red tint.
    Creating the complete Yellow Diad theme that includes a Yellow hue and Yellow tone with a Red hue and Red tint.
    创建完整的Yellow Diad主题,其中包括黄色调和带有红色调和红色调的黄色调。

    Returning to creating the Yellow Diad theme with Adobe Color, using Yellow #C7BA44 just underneath the hue Yellow #FFE91C, a tone element is obtained. Using Red #F56140 just underneath the hue Red #C22D07, a tint is obtained. This completes the Yellow Diad theme. The results are shown on the left.

    返回使用Adobe Color创建Yellow Diad主题,使用黄色#FFE91C下方的黄色#C7BA44,获得色调元素。 使用红色#C22D07下方的红色#F56140,可获得色彩。 这就完成了“ 黄色钻石”主题。 结果显示在左侧。

    Image for post

    评估颜色主题的颜色不足 (Evaluating for Color Deficiencies of the Color Theme)

    In humans there are three types of photoreceptors or cones where each is sensitive to different parts of the visual spectrum of light to facilitate rich color vision. If one or more of the set of cones does not perform properly, a color deficiency results. A red cone deficiency is classified as Protanopia. A green cone deficiency is classified as Deuteranopia. A blue cone deficiency is classified as Tritanopia.

    在人类中,有三种类型的感光器或视锥细胞,其中的每一种对光的光谱的不同部分敏感,以促进丰富的色彩视觉。 如果一组锥体中的一个或多个锥体不能正常工作,则会导致颜色不足。 红锥缺乏症被归类为Protanopia。 绿锥缺乏症被归类为Deuteranopia。 蓝锥缺乏症被分类为Tritanopia。

    Adobe Color has recently added an “Accessibility Tools” function that provides tests for Protanopia, Deuteranopia and Tritanopia of color themes.

    Adobe Color最近添加了“可访问性工具”功能,该功能可用于测试Protanopia,Deuteranopia和Tritanopia颜色主题。

    Preliminary Color Deficiency checks of the Yellow Divide theme in Adobe Color. The Yellow Divide theme passes the tests.
    Preliminary Color Deficiency checks of the Yellow Divide theme in Adobe Color. The Yellow Divide theme passes the tests.
    对Adobe Color中的Yellow Divide主题进行了初步的颜色缺陷检查。 Yellow Divide主题通过了测试。

    This allows us to conduct preliminary color deficiency tests before actual visualizations are created.

    这使我们能够在创建实际的可视化效果之前进行初步的色差测试。

    These preliminary results indicate that Yellow Diad passes these checks. These results are shown on the left.

    这些初步结果表明, Yellow Diad通过了这些检查。 这些结果显示在左侧。

    Image for post

    使用颜色渐变构建气泡图可视化 (Building a Bubble Chart Visualization with Color Gradients)

    The next step is to apply the Yellow Diad theme to building a Bubble Chart visualization. Software tools such as Microsoft Excel or Word, Apple Numbers or Pages, Google Docs, Tableau Software and many others can help generate this example.

    下一步是将Yellow Diad主题应用于气泡图可视化。 诸如Microsoft Excel或Word,Apple Numbers或Pages,Google Docs,Tableau Software等软件工具可以帮助生成此示例。

    Using the Yellow #C7BA44 tone and the pure hue of Yellow #FFE91C, a Yellow gradient for the first data set in the Bubble chart is created. Using the Red #F56140 tint and the pure hue of Red #C22D07, a Red gradient for the second data set is developed. These two processes are shown below.

    使用黄色#C7BA44色调和黄色#FFE91C的纯色,为气泡图表中的第一个数据集创建黄色渐变。 使用红色#F56140色调和红色#C22D07的纯色,为第二个数据集开发了红色渐变。 这两个过程如下所示。

    Building the Yellow and Red Gradient Fills for the Bubble Chart Data Visualization.
    Building the Yellow and Red Gradient Fills for the Bubble Chart Data Visualization.
    为气泡图数据可视化构建黄色和红色渐变填充。

    A Bubble Chart data visualization with the Yellow and Red gradients can now be generated. These results are shown below.

    现在可以生成带有黄色和红色渐变的气泡图数据可视化。 这些结果如下所示。

    Bubble Chart Data Visualization with the Yellow Diad Color Theme and Color Gradient Fills applied.
    Bubble Chart Data Visualization with the Yellow Diad Color Theme and Color Gradient Fills applied.
    气泡图数据可视化,并应用了“黄色Diad颜色主题”和“颜色渐变填充”。
    Image for post

    评估数据可视化中的色彩缺陷 (Evaluating for Color Deficiencies in the Data Visualization)

    For the Bubble Chart visualization, I use the online Color Blindness Simulator, Coblis, to evaluate for color deficiencies. The Yellow Diad Bubble Chart passes color deficiency checks. Individuals with Protanopia, red cone color deficiency, Deuteranopia, green cone deficiency or Tritanopia, blue cone color deficiency, can distinguish between the color elements in the data visualization. These results are shown below.

    对于气泡图可视化,我使用在线色盲模拟器 Coblis来评估颜色缺陷。 黄色Diad气泡图通过颜色不足检查。 患有Protanopia,红锥色缺失,Deuteranopia,绿锥色缺失或Tritanopia,蓝锥色缺失的个体可以在数据可视化中区分颜色元素。 这些结果如下所示。

    Successful Color Deficiency Checks for the Bubble Chart Visualization with Color Gradient Fills applied.
    Successful Color Deficiency Checks for the Bubble Chart Visualization with Color Gradient Fills applied.
    成功应用颜色渐变填充后,气泡图可视化的成功颜色缺陷检查。
    Image for post

    带有黄色Diad主题的替代气泡图 (The Alternative Bubble Chart with the Yellow Diad Theme)

    It is also possible to create an alternative visualization with the Yellow Diad theme that yields a “flat” Bubble Chart. Here, only the Yellow(#FFE91C) and Red (#C22D07) hues are applied. These results are shown below.

    还可以使用“黄色Diad”主题创建替代的可视化效果,从而生成“平坦”气泡图。 在此,仅应用黄色(#FFE91C)和红色(#C22D07)色调。 这些结果如下所示。

    “Flat” Bubble Chart Data Visualization with the Yellow Diad Color Theme applied.
    “Flat” Bubble Chart Data Visualization with the Yellow Diad Color Theme applied.
    应用了“黄颜色”主题的“扁平”气泡图数据可视化。
    Image for post

    评估气泡图可视化的颜色不足 (Evaluating for Color Deficiencies for the Alternative Bubble Chart Visualization)

    The color deficiency checks for the alternative Yellow Diad Bubble Chart example are presented below. This data visualization successfully passes these tests. Individuals with Protanopia, red cone color deficiency, Deuteranopia, green cone deficiency or Tritanopia, blue cone color deficiency, can distinguish between the color elements in the data visualization.

    下面显示了替代的“黄色Diad气泡图”示例的颜色不足检查。 数据可视化成功通过了这些测试。 患有Protanopia,红锥色缺陷,Deuteranopia,绿锥色缺陷或Tritanopia,蓝锥色缺陷的个体可以在数据可视化中区分颜色元素。

    Successful Color Deficiency Checks for the “Flat” Bubble Chart Data Visualization.
    Successful Color Deficiency Checks for the “Flat” Bubble Chart Data Visualization.
    成功的颜色不足检查“扁平”气泡图数据的可视化。
    Image for post

    结束语 (Concluding Remarks)

    There are many approaches to building color schemes for data visualizations. This writing focused on building a Diad Color Harmony with the Key color of Yellow(#FFE91C) and a Red (#C22D07) hue. The concept of Color Gradients using Tints and Tones was also introduced. The resulting Yellow Diad theme was applied to two Bubble Chart visualization examples. One solution included a set of three-dimensional bubbles created with the Color Gradients. The second visualization example was a “Flat” Bubble Chart using the Key color of Yellow (#FFE91C) and a Red (#C22D07) hue. These two data visualizations are shown below.

    有许多方法可以构建用于数据可视化的配色方案。 本书着重于构建黄色(#FFE91C)和红色(#C22D07)色调的Diad颜色和声。 还介绍了使用“色调和色调”的“颜色渐变”的概念。 产生的Yellow Diad主题应用于两个Bubble Chart可视化示例。 一个解决方案包括使用“颜色梯度”创建的一组三维气泡。 第二个可视化示例是使用黄色(#FFE91C)和红色(#C22D07)的键色的“平面”气泡图。 这两个数据可视化如下所示。

    Two Bubble Chart Data Visualization Solutions using the Yellow Diad Color Theme.
    Two Bubble Chart Data Visualization Solutions using the Yellow Diad Color Theme.
    两个使用黄色Diad颜色主题的气泡图数据可视化解决方案。

    The Adobe Color web app was used to create the Yellow Diad theme and perform initial color deficiency checks on the color theme. The data visualization examples were checked with the Color Blindness Simulator — Coblis. The color theme and data visualizations passed these color deficiency checks. This sample data set shows higher values for June, and it is visible in both cases.

    Adobe Color Web应用程序用于创建Yellow Diad主题并对该颜色主题执行初始颜色不足检查。 数据可视化示例使用色盲模拟器 Coblis进行了检查。 颜色主题和数据可视化通过了这些颜色缺陷检查。 此示例数据集显示6月的较高值,并且在两种情况下均可见。

    For further discussions on my approaches, please see my prior Nightingale articles noted below as well as my 2016 book on “Applying Color Theory to Digital Media and Visualization” published by CRC Press.

    有关我的方法的进一步讨论,请参阅下面提到的我先前在Nightingale上发表的文章,以及我在CRC Press出版的2016年有关“ 将色彩理论应用于数字媒体和可视化 ”的书。

    Image for post

    Theresa-Marie Rhyne is a Visualization Consultant with extensive experience in producing and colorizing digital media and visualizations. She has consulted with the Stanford University Visualization Group on a Color Suggestion Prototype System, the Center for Visualization at the University of California at Davis and the Scientific Computing and Imaging Institute at the University of Utah on applying color theory to Ensemble Data Visualization. Prior to her consulting work, she founded two visualization centers: (a) the United States Environmental Protection Agency’s Scientific Visualization Center and (b) the Center for Visualization and Analytics at North Carolina State University.

    Theresa-Marie Rhyne是一位可视化顾问,在制作和着色数字媒体和可视化方面具有丰富的经验。 她曾在色彩建议原型系统,斯坦福大学戴维斯分校的加利福尼亚大学可视化中心以及犹他大学的科学计算与成像研究所的斯坦福大学视觉化小组中就将色彩理论应用于集合数据视觉化方面进行过咨询。 在从事咨询工作之前,她建立了两个可视化中心:(a)美国环境保护局的科学可视化中心,以及(b)北卡罗莱纳州立大学的可视化和分析中心。

    Image for post

    翻译自: https://medium.com/nightingale/bubbles-on-a-diad-da5f299dfcd9

    小程序点击地图气泡获取气泡

    展开全文
  • 仿百度地图气泡程序源码,代码挺简单,自己看吧。  
  • 仿百度地图气泡程序源码,代码挺简单,自己看吧。
  • 主要介绍了 IOS百度地图自定义大头针和气泡的实例代码,非常不错,具有参考借鉴价值,需要的朋友参考下
  • 导入基础地图 进口matplotlib.pyplot作为plt ^{pr2}$ 具有转换率数据的数据帧 数据转换-比较数据帧:Country Sea Res ConvRate(%) Country_codes Spain 6179 85 1.38 ES United Kingdom 495 99 2.00 GB France ...
  • 作者Mr-yuwei,源码YWLJMapView,利用百度地图实现自定义大头针和气泡 前言:面试的时候,面试官问做过地图自定义气泡,讲讲具体的步骤,LZ大概只是看过别人写的........,最后只能说不会,这周利用闲余时间研究...
  • 地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、瀑布图、气泡图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型、大屏设计必备组件 ...
  • 百度地图弹出气泡

    2013-06-17 09:34:38
    这个源码展示了如何在百度地图上弹出气泡
  • echarts实现相邻气泡图

    2017-10-16 10:00:31
    echarts实现的气泡图,跟官方气泡图不同的是,气泡图之间不会叠加在一起。跟d3.js的气泡图效果类似。
  • 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。以下文章来源于DataCharm ,作者宁海涛前言今天的推文...具体为空间气泡图的绘制,主要涉及的内容如下:geo...
  • 在百度地图上绘图气泡并点击响应
  • 如何把气泡框应用于地图上呢?步骤一:首先要定义我们的气泡框布局,也就是所谓的layout。popup.xml:android:background="@drawable/tip_pointer_button"android:focusable="true" android:clickable="true" ...
  • 仿百度地图气泡程序源码.zip
  • Android 仿百度地图气泡程序源码
  • 如何把气泡框应用于地图上呢?步骤一:首先要定义我们的气泡框布局,也就是所谓的layout。popup.xml:android:background="@drawable/tip_pointer_button"android:focusable="true" android:clickable="true" ...
  • 地图上利用气泡的大小来表示不同地区的数据 二、案例分析: 展现世界各国的 GDP: 步骤1: 步骤2:如果有多个层次的位置列,比如上中是国家层级的位置,再加上省自治区、市级的位置数据,就可以在地图上向下...
  • //(1)series 的类型为散点 scatter series: [ { name: 'pm2.5', // series名称 type: 'scatter', // series图表类型 coordinateSystem: 'geo', // series坐标系类型 data: convertData(data), // series...
  • vue echarts 实现地图气泡图

    千次阅读 2019-03-08 09:51:00
    4.实现大气泡地图代码 getMapData() { this.mapEchartsData = { title: { text: "", subtext: "", x: "center", textStyle: { color: "#fff" } }, tooltip: { trigger: "item", ...
  • demo资源:http://download.csdn.net/detail/mad1989/5252037Step1创建demo,并添加百度地图的静态类库,helloword能显示mapview关于这一步我专门写了教程,这里就不再赘述,同样,关于如何使用自带的...
  • 这里有些开发相相关资源可以下载最近在论坛里面看到很多人想实现现在很多地图应用上那种在地图上显示我的位置气泡,点击该气泡还能弹出一个详情对话框的气泡这种需求!正好前几天做的一个应用里面包含了这样一个项目...
  • power bi 地图 该项目 (The project) This is the first article of a series dedicated to discovering geographic maps in Power BI using Bubble Map and Filled Map. 这是致力于使用Bubble Map和Filled ...
  • Android 仿百度地图气泡程序源码.rar

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,289
精华内容 2,915
关键字:

地图气泡图