`
grunt1223
  • 浏览: 423366 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

使用标签云扩展自己的应用

阅读更多
标签云或文字云是关键词的视觉化描述,用于汇总用户生成的标签或一个网站的文字内容。标签一般是独立的词汇,常常按字母顺序排列,其重要程度又能通过改变字体大小或颜色来表现。所以标签云可以灵活地依照字序或热门程度来检索一个标签。大多数标签本身就是超级链接,直接指向与标签相联的一系列条目。

互联网标签云(Tag Cloud)的概念最早由Stewart Butterfield在《Make a Flickr-Style Tag》一文中提出。在那些用户分享频繁的web2.0网站,比如Flickr、Del.icio.us和Technorati中得到了广泛的应用。

简要总结了一下,标签云的作用主要有以下三类:
  • 热门推荐
  • 自动分类
  • 数据分析


比如下图展示了与Web2.0相关的一组标签云,字体的大小参照相关程度:

通过上图我们可以看出,关注Web2.0的人们,可能还会对博客、用户参与、长尾理论等关键词感兴趣。

下面的TagCloud可视化地描绘了全球的人口分布,字体的大小参照各国的人口数量:

通过上图,我们可以清晰地看出,中国和印度是世界上人口最多的两个国家;排在其后的人口大国有美国、尼日利亚、巴基斯坦等等。

标签云也可以用作数据分析,比如下面这张有趣的图,分别摘自布什总统在2002年以及奥巴马总统在2011年的政府报告。这里,字体的大小与关键词的TF(词频)以及IDF(反文档频率)相关,即某个关键词出现的频率越高,而在其它文档中出现的频率越低,就认为该词的权重越大:

从两份报告总可以看出,911发生之后,布什更强调安全、反恐、武器等,而在经济危机来临之时,奥巴马则更强调工作、税收、商务等。

关于实现一个TagCloud的代码架构,可以参考下图:

其中各类的声明如下所述:
namedescription
Tag标签实体类,考虑到英语语法的特性,包含词语和词根两个属性
TagCache缓存所有Tag
TagMagnitudeTag的模
TagMagnitudeVectorTag矢量的模,一个TagMagnitudeVector包含多个TagMagnitude
TagMagnitudeVectorTag矢量的模,一个TagMagnitudeVector包含多个TagMagnitude
InverseDocFreqEstimatorIDF的计算
HTMLTagCloudDecorator实现动态字体大小设置的HTMl装饰类


核心代码如下:

public class LuceneTextAnalyzer implements TextAnalyzer {
    
    public List<Tag> analyzeText(String text) throws IOException {
        Reader reader = new StringReader(text);
        Analyzer analyzer = getAnalyzer();//获取继承自Lucene的Analyzer
        List<Tag> tags = new ArrayList<Tag>();
        TokenStream tokenStream = analyzer.tokenStream(null, reader) ;
        Token token = tokenStream.next();
        while ( token != null) {
            Tag tag = getTag(token.termText());
            tags.add(tag);
            token = tokenStream.next();
        }
        return tags;
    }
    
    public TagMagnitudeVector createTagMagnitudeVector(String text) throws IOException {
        List<Tag> tagList =  analyzeText(text);
        Map<Tag,Integer> tagFreqMap = computeTermFrequency(tagList);//计算TF
        return applyIDF(tagFreqMap);//计算IDF
    }
    
  
    private Map<Tag,Integer> computeTermFrequency(List<Tag> tagList) {
        Map<Tag,Integer> tagFreqMap = new HashMap<Tag,Integer>();
        for (Tag tag: tagList) {
            Integer count = tagFreqMap.get(tag);
            if (count == null) {
                count = new Integer(1);
            } else {
                count = new Integer(count.intValue() + 1);
            }
            tagFreqMap.put(tag, count);
        }
        return tagFreqMap;
    }
    
    private TagMagnitudeVector applyIDF(Map<Tag,Integer> tagFreqMap) {
        List<TagMagnitude> tagMagnitudes = new ArrayList<TagMagnitude>();
        for (Tag tag: tagFreqMap.keySet()) {
            double idf = this.inverseDocFreqEstimator.estimateInverseDocFreq(tag);
            double tf = tagFreqMap.get(tag);
            double wt = tf*idf;
            tagMagnitudes.add(new TagMagnitudeImpl(tag,wt));
        }
        return new TagMagnitudeVectorImpl(tagMagnitudes);
    }
    
    private TagCloud createTagCloud(TagMagnitudeVector tmVector) {
        List<TagCloudElement> elements = new ArrayList<TagCloudElement>();
        for (TagMagnitude tm: tmVector.getTagMagnitudes()) {
            TagCloudElement element = new TagCloudElementImpl(tm.getDisplayText(), tm.getMagnitude());
            elements.add(element);
        }
        return new TagCloudImpl(elements, new LinearFontSizeComputationStrategy(3,"font-size: "));//使用线性的字体计算策略,权重加一级,字体增大一号
    }
    
    private String visualizeTagCloud(TagCloud tagCloud) {
        HTMLTagCloudDecorator decorator = new HTMLTagCloudDecorator();//使用HTML包装内容
        String html = decorator.decorateTagCloud(tagCloud);
        System.out.println(html);
        return html;
    }

    public static void main(String [] args) throws IOException {
        String title = "Collective Intelligence and Web2.0";
        String body = "Web2.0 is all about connecting users to users, "  +
                " inviting users to participate and applying their collective" +
                " intelligence to improve the application. Collective intelligence" +
                " enhances the user experience" ;
                
        TagCacheImpl t = new TagCacheImpl();
        InverseDocFreqEstimator idfEstimator = new EqualInverseDocFreqEstimator();
        LuceneTextAnalyzer lta = new LuceneTextAnalyzer(t, idfEstimator);
//        System.out.print("Analyzing the title .... \n");
//        lta.displayTextAnalysis(title);
//        System.out.print("\nAnalyzing the body .... \n");
//        lta.displayTextAnalysis(body);
        TagMagnitudeVector tmTitle = lta.createTagMagnitudeVector(title);
        TagMagnitudeVector tmBody = lta.createTagMagnitudeVector(body);
        TagMagnitudeVector tmCombined = tmTitle.add(tmBody);
        System.out.println(tmCombined);    
        TagCloud tagCloud = lta.createTagCloud(tmBody);
        String html = lta.visualizeTagCloud(tagCloud);
        System.out.println("html:" + html);
    }
    
    private void displayTextAnalysis(String text) throws IOException {
        List<Tag> tags = analyzeText(text);
        for (Tag tag: tags) {
            System.out.print(tag + " ");
        }      
    }
}

  • 大小: 15.3 KB
  • 大小: 52.6 KB
  • 大小: 111.1 KB
  • 大小: 21.8 KB
1
1
分享到:
评论

相关推荐

    纯DIV+CSS布局的标签云,扩展性好

    本文将深入探讨这种布局方式,并结合标签云的实现,讲解其扩展性和应用价值。 首先,让我们理解什么是DIV+CSS布局。在HTML中,`&lt;div&gt;`标签是一个通用的容器元素,用于组织页面上的内容。CSS(层叠样式表)则负责...

    标签云html源码学习.rar

    标签云是一种常见的网页元素,常用于展示网站内容的关键词或主题,通过不同的字体大小和颜色来突出显示每个标签的...同时,你可以根据自己的需求调整和扩展这个功能,例如,添加点击事件、动态更新标签云、优化性能等。

    原生js标签云.zip

    "原生js标签云.zip"是一个关于使用JavaScript(JS)实现动态标签云效果的项目。标签云是一种常见的网页设计元素,它将一系列标签以不同大小和颜色展示,以表示每个标签的重要性和频率。下面我们将深入探讨如何使用...

    安卓3D标签云卡片热门相关-android项目中的标签控件用于实现热门标签的功能.rar

    在安卓应用开发中,"3D标签云卡片热门"是一个常见的功能,用于展示热门话题或者标签,提升用户体验。本项目中的“安卓3D标签云卡片热门相关”涉及到一个标签控件,它允许开发者以3D效果展示标签,使得界面更具吸引力...

    C#窗体,制作标签云功能

    在这个例子中,我们将使用Winform来设计我们的应用程序窗口,展示标签云。 在实现标签云功能时,我们需要一个数据源,通常是数据库。在这个案例中,我们使用了SQL Server作为后台数据库,存储标签数据。C#提供了...

    JS标签云实现选择功能

    在本教程中,我们将探讨如何使用JavaScript来实现一个具有选择功能的标签云。 首先,我们需要理解标签云的基本原理。标签云通常基于HTML结构,每个标签是一个`&lt;a&gt;`链接元素,通过CSS控制它们的样式,如字体大小、...

    HTML5实现流行的球状标签云特效.rar

    为了学习和理解这个效果,你可以解压文件,查看源代码,分析其中的逻辑,甚至根据自己的需求进行修改和扩展。 总的来说,这个球状标签云特效展示了HTML5和CSS3在网页动态效果和交互设计方面的强大能力。通过学习和...

    炫的3D标签云的效果,类似于各种播放器首页的字体悬浮效果

    标题中的“炫的3D标签云的效果”指的是在软件或应用设计中,使用3D视觉效果展示标签的方式,这些标签通常以文字形式呈现,如同云朵般漂浮并具有动态变化,常见于各种媒体播放器的首页。这种设计能够吸引用户注意力,...

    Canvas实现文字云(标签云)效果,多浏览器支持

    在本文中,我们将深入探讨如何使用HTML5的Canvas API实现一个跨浏览器的文字云(标签云)效果,特别关注对IE9及更高版本的支持。Canvas是HTML5中的一个强大的绘图工具,允许开发者直接在网页上进行图形绘制。下面,...

    JS制作TAG标签云文字动画特效.zip

    JavaScript(简称JS)是一种轻量级的...在实际应用中,这种效果不仅可以用于标签云,还可以扩展到其他需要动态展示的文本元素,如新闻标题、推荐内容等。总的来说,掌握这样的技术将有助于提高网页的用户体验和吸引力。

    HTML5 Wordpress标签云特效.rar

    5. **动画(Animations)**:CSS3的`@keyframes`规则可以定义一个动画序列,通过`animation`属性应用到元素上,使得标签云在特定时间内按照预设路径运动。 6. **盒模型和布局**:可能利用了Flexbox或Grid布局来控制...

    基于Vue3 + Spring Boot开发的云共享资源应用系统.zip

    综上所述,基于Vue3和Spring Boot开发的云共享资源应用系统利用了现代Web开发的最佳实践,实现了前端与后端的高效协作,同时兼顾了性能、可扩展性和安全性。这样的系统设计为企业级的资源共享和协作提供了可靠的技术...

    flash+xml 3D超酷标签云

    在压缩包中的"tags"文件可能是XML文件,包含着标签云的配置数据,通过修改这个文件,我们可以调整标签云的外观和行为,使其适应各种应用场景。对于有兴趣深入研究的IT爱好者来说,这是一个很好的实践项目,有助于...

    易语言仿HTML5 CSS "标签云"特效的例程

    【易语言仿HTML5 CSS "标签云"特效的例程】是一个使用易语言编程实现的程序,它模拟了HTML5中流行的CSS "标签云"效果。在网页设计中,"标签云"通常用于展示关键词或标签,每个标签的大小根据其出现频率动态调整,...

    e语言-易语言标签云的特效

    总结来说,"易语言标签云的特效"实例涵盖了易语言的基本语法、API函数应用、图形用户界面设计、事件处理以及程序优化等多个方面。通过学习和实践这个示例,你可以提升自己在易语言中的编程技能,同时也可以将学到的...

    安卓3D标签云卡片热门相关-GiftCard-Android好看的卡片动画效果.rar

    总之,"GiftCard-Android好看的卡片动画效果.rar" 提供了一个学习3D标签云卡片动画的实践案例,通过对项目的分析和研究,开发者可以掌握如何在Android应用中实现这种动态视觉效果,提升应用的用户体验。

    Flex 标签云 特效 漂亮

    为了实现标签云效果,我们需要自定义一个组件,继承自已有的UIComponent类,或者使用现有的Spark或MX组件库中的基础类进行扩展。Spark组件库更加轻量级,而MX组件库则包含更多预设的组件和效果。 **2. 数据绑定和...

    3D云标签小插件源码

    【3D云标签小插件源码】是一个用于网站或应用程序的交互式视觉元素,它以3D形式展示标签或关键词,提供了一种新颖而直观的方式来浏览和组织内容。这种小插件通常能够提高用户体验,使得用户能更快地找到感兴趣的信息...

    Android炫酷的3D球型标签云开源库 3dTagCloudAndroid 的使用(实战Demo项目及安装包).zip

    通过实战项目和安装包,你可以直接看到并实践这个库的效果,从而在自己的应用中实现炫酷的3D标签云。无论是为了提高用户界面的美观度,还是为了增加应用的互动性,3dTagCloudAndroid都是一个值得尝试的优秀工具。

    安卓3D标签云卡片热门相关-安卓实现标签样式的view.rar

    在安卓开发中,3D标签云卡片是一种常见且吸引人的用户界面元素,它能为应用增添视觉吸引力并高效展示大量信息。"安卓3D标签云卡片热门相关-安卓实现标签样式的view.rar"是一个压缩包,包含了一些实现这种效果的源...

Global site tag (gtag.js) - Google Analytics