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. 第 9 章 模板方法模式【Template Method Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 周三,9:00,我刚刚坐到位置,打开电脑准备开始干活. “小三,小三,叫一下其它同事,到会议室,开会”老大跑过来吼,带着 ...

  2. [原博客] POJ 2484 A Funny Game

    题目链接题意:有n个硬币排成一圈,两个人轮流操作,每次可以取走一个或者相邻的连个硬币(只算最开始相邻的,取之后才相邻的不算),问先手必胜还是必败. 这个题可以证明若n>=3,则先手必败.对称博弈 ...

  3. Hibernate save或者persist 后获取主键ID

    一个自增长ID的对象被save或者persist后,会返回其主键ID: Department department = new Department(); department.setName(&qu ...

  4. [转贴]C语言复习笔记－17种小算法－解决实际问题

    判断日期为一年中的第几天(考虑闰年) /* * 计算该日在本年中是第几天,注意闰年问题 * 以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天 * 特殊情况,闰年且输入月份大于3时 ...

  5. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-003-@Conditional根据条件生成bean及处理profile

    一.用@Conditional根据条件决定是否要注入bean 1. package com.habuma.restfun; public class MagicBean { } 2. package ...

  6. Android用户界面UI组件--AdapterView及其子类(三) ExpandableListView

    ExpandableListView: List中的每一项可以展开收缩. 一种伸缩式的ListView. android:cacheColorHint="#00000000" 这个 ...

  7. WPF WebBroswer可以用到的接口

    http://pinvoke.net/default.aspx/Interfaces.DWebBrowserEvents2 [ComImport, SuppressUnmanagedCodeSecur ...

  8. git rebase实战

    在develop分支上rebase另外一个分支master,是将master作为本地,develop作为远端来处理的. 最后的效果是,develop分支看起来像是在master分支的最新的节点之后才进 ...

  9. 转自 x_x_的百度空间 搞ACM的你伤不起

    来源:http://roba.rushcj.com/?p=548 劳资六年前开始搞ACM啊!!!!!!!!!! 从此踏上了尼玛不归路啊!!!!!!!!!!!! 谁特么跟劳资讲算法是程序设计的核心啊!! ...

  10. 【转】eclipse android 设置及修改生成apk的签名文件 -- custom debug keystore

    原文网址:http://hold-on.iteye.com/blog/2064642 android eclipse 设置及修改生成apk的签名文件 1. 问题: 平时在使用eclipse进行andr ...