Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of charts you can work with. In this lesson we'll convert the bar chart into a basic scatter (or bubble) chart.

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../bower_components/underscore/underscore-min.js"></script>

    <script src="../ventor/d3.min.js"></script>

    <style type="text/css">

        body

        {

            padding-top: 50px;

            padding-left: 100px;

        }

        #chartArea {

            width: 400px;

            height: 300px;

            background-color: #CCC;

        }

        .bar

        {

            display: inline-block;

            width: 20px;

            height: 75px; /* Gets overriden by D3-assigned height below */

            margin-right: 2px;

           /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/

            z-index:99;

        }

        .bubble {

            display: inline-block;

            fill: purple;

            fill-opacity: 0.5;

            stroke: black;

            stroke-weight: 1px;

        }

    </style>

</head>

<body>

<section id="chartArea"></section>

<script>

    var dataset = _.map(_.range(30), function(num) {

        return {

            x: Math.random() * 100,

            y: Math.random() * 100,

            r: Math.random() * 30

        }

    }), //reandom generate 15 data from 1 to 50

            margin = {top: 0, bottom: 0, left: 0, right: 0},

            w = 400 - margin.left - margin.right,

            h = 300 -margin.top - margin.bottom;

    var svg = d3.select('#chartArea').append('svg')

            .attr('width', w + margin.left + margin.right)

            .attr('height', h + margin.top + margin.bottom)

            .append('g') //The last step is to add a G element which is a graphics container in SBG.

            .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.

    var yScale = d3.scale.linear()

            .domain([0, d3.max(dataset, function(d) {

                return d.y; //tell the max function just need to care about y prop

            })])

            .range([h, 0]);

    var xScale = d3.scale.linear()

            .domain([0, 100])

            .range([0, w]);

    svg.selectAll('circle')

            .data(dataset)

            .enter()

            .append('circle')// svg doesn't have div, use rect instead

            .attr('class', "bubble")

            .attr('cx', function(each_data, index){

                return xScale(each_data.x);

            })

            .attr('cy', function(each_data){

                return yScale(each_data.y);

            })

            .attr('r', function(each_data, i){

                return each_data.r;

            });

</script>

</body>

</html>

[D3] 9. Scatter Plot的更多相关文章

  1. [D3] Build a Scatter Plot with D3 v4

    Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They ...

  2. Matplotlib学习---用matplotlib画散点图，气泡图（scatter plot, bubble chart）

    Matplotlib里有两种画散点图的方法,一种是用ax.plot画,一种是用ax.scatter画. 一. 用ax.plot画 ax.plot(x,y,marker="o",co ...

  3. [Python] Scatter Plot for daily return

    Sploe = 2: means that SPY move up 1, ABC move up 2 Correlation: how close those dots close to the li ...

  4. use matplotlib to draw scatter plot

    There are many pionts in this kind of table. How to do it? We can use scatter() to draw it. Code: im ...

  5. D3 JS study notes

    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...

  6. d3基础图形模板笔记

    散点图(scatter plot): http://bl.ocks.org/weiglemc/6185069 雷达图(radar): http://xgfe.github.io/uploads/che ...

  7. matplotlib多plot可视化

    代码: # -*- coding: utf-8 -*- """ Created on Thu Jul 12 16:37:47 2018 @author: zhen &qu ...

  8. Python基础-画图：matplotlib.pyplot.scatter

    转载自博客:https://blog.csdn.net/qiu931110/article/details/68130199 matplotlib.pyplot.scatter 1.scatter函数 ...

  9. Python中scatter函数参数用法详解

    1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如下: 4.基本的使用方法如下: #导入必要的模块 import numpy as np import matp ...

随机推荐

  1. (转) 各种好用的插件 Xcode

    时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我提升编码速度和工作效率的工具 ...

  2. 把内表 itab1 的 n1 到 n2 行内容附加到 itab2 内表中去.

    语法:append lines of itab1 [ from n1 ] [ to n2 ] to itab2. DATA:BEGIN OF gt_00 OCCURS 0,        l_01   ...

  3. GRUB引导——menu.lst的写法

    转自menu.lst的写法.menu.lst的写法 1.menu.lst的写法之一 首先我们看一下我的Fedora 4.0 中的/boot/grub/menu.lst 的内容: default=0  ...

  4. Delphi xe10下载(包含破解补丁和破解视频)

    软件名称:RAD Studio 10 Seattle软件大小:7.18 GB RAD Studio 10 Seattle官方下载地址:http://altd.embarcadero.com/downl ...

  5. Android Training精要（六）如何防止Bitmap对象出现OOM

    1.使用AsyncTask異步加載bitmap圖片避免OOM: class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> ...

  6. 合并 ios 静态库

    合并 cordovaLib库: lipo -create 'Release-iphoneos/libCordova.a' "Release-iphonesimulator/libCordov ...

  7. SELECT /*!40001 SQL_NO_CACHE */ * INTO OUTFILE '/tmp/ClientActionTrack2015112511.txt' 不堵塞事务

    mysql> insert into ClientActionTrack20151125(clientSn,ip,url,httpMethod,requestParams,requestHead ...

  8. Muduo-Base-Exception(未完待续)

    Exception类 主要功能: 能够对异常信息进行输出 能够输出调用的关系 方便我们对某些信息进行调试 系统调用:#include <execinfo.h>int backtrace(v ...

  9. 64位windows7 上安装32位oracle 10g 的方法

    操作系统: windows7 中文旗舰版 oracle安装版本: 10.2.0.1 中文版,升级补丁至 10.2.0.3 下面说正题首先,我们要解除oracle安装的windows版本检测1.编辑安装 ...

  10. 单实例 winform zz

    (引用了 Microsoft.VisualBasic.ApplicationServices)SingleInstanceApplicationWrapper.cs using System.Wind ...