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. windows appfabric samples

    http://www.microsoft.com/en-us/download/details.aspx?id=19603 http://msdn.microsoft.com/zh-cn/librar ...

  2. Xcode7 修改bundle identifier

    Xcode 7 与之前的版本在修改bundle identifier的时候一点需要注意: 除了需要在.plist文件中修改, 还需要在 build setting中的 Product Bundle I ...

  3. bzoj 1187: [HNOI2007]神奇游乐园 插头dp

    1187: [HNOI2007]神奇游乐园 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 668  Solved: 337[Submit][Statu ...

  4. hdu 2894

    刚刚看到这个题感觉挺复杂的~~~因为它还要输出字典序: 很容易知道对于任意的k,第一个输出总是1<<k; 而对于第二个嘛,不管怎么样,前k个元素总是k个0: 然后取前k-1个数,加上0或者 ...

  5. Wide character in print at a2.pl line 返回json 需要encode_utf8

    centos6.5:/root/test#cat a2.pl use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Heade ...

  6. [ZOJ 3631] Watashi's BG

    Watashi's BG Time Limit: 3 Seconds      Memory Limit: 65536 KB Watashi is the couch of ZJU-ICPC Team ...

  7. 如何删除MyEclipse（eclipse）中不需要的workspace

    在安装目录下,打开eclipse/configuration/.settings,用记事本打开org.eclipse.ui.ide.prefs文件 #Wed Mar 11 14:41:21 CST 2 ...

  8. Spring之HelloWorld再起

    第一步:打开File->New->Other…,选择Java Project,创建标准Java项目. 第二步:在项目下添加lib文件夹用于存放jar文件,resources用于存放xml配 ...

  9. Oracle错误

    System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本 这个是我页面报的错误,请帮解答 在错误出现的时候我第一时间现在了一个oracle客户端软件,然 ...

  10. input hidden用法

    之前获取数据传数据,都是写在全局变量里,今天老板告诉我说用input hidden来存,我百度了一下,确实是个好方法,记录之: 1 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或 ...