[D3] 14. Line and Area Charts with D3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        body {
            padding-top: 50px;
            padding-left: 100px;

        }

        #chart {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            margin-top: 10px;
        }

        path {
            /*fill: purple;
            fill-opacity: 0.7;*/
            fill: none;
            stroke: blue;
            stroke-width: 3px;

        }

    </style>
</head>
<body>
<button onclick="updateChart(‘math‘)">Math</button>
<button onclick="updateChart(‘science‘)">Science</button>
<button onclick="updateChart(‘reading‘)">Reading</button>

<div id="chart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>

    var w = 300;
    var h = 200;
    var path;
    var subjects;

    $.getJSON(‘//jsbin.com/vegaqi/1.js‘, function(json) {
        subjects = json;

        _.keys(subjects).forEach(function(subject) {
            subjects[subject].forEach(function(d) {
                d.date = d3.time.format("%Y%m%d").parse(d.date);
                console.log(d.date);
            })
        });

        path = d3.select(‘#chart‘)
                .append(‘svg‘)
                .attr(‘width‘, w)
                .attr(‘height‘, h)
                .append(‘g‘)
                .append(‘path‘);

        updateChart(‘math‘);
    });

    function updateChart(subject) {
        var data = subjects[subject];
        var dates = _.pluck(data, ‘date‘);
        var counts = _.pluck(data, ‘count‘);

        var x = d3.time.scale()
                .domain(d3.extent(dates))//d3.extent(), return [min, max]
                .range([0, w]);

        var y = d3.scale.linear()
                .domain(d3.extent(counts))
                .range([h, 0]);

        var area = d3.svg.area()
                .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
                .x(function(d) {
                    return x(d.date);
                })
                .y0(function(d) {
                    return y(0);
                })
                .y1(function(d) {
                    return y(d.count);
                });

        var line = d3.svg.line()
                .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
                .x(function(d) {
                    return x(d.date);
                })
                .y(function(d) {
                    return y(d.count);
                });

        path
                .datum(data)//for only one object, path object
                .transition()
                .duration(450)
                .attr(‘d‘, line);
    }

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        body {
            padding-top: 50px;
            padding-left: 100px;

        }

        #chart {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            margin-top: 10px;
        }

        path {
            fill: purple;
            fill-opacity: 0.7;
            /*fill: none;
            stroke: blue;
            stroke-width: 3px;*/

        }

    </style>
</head>
<body>
<button onclick="updateChart(‘math‘)">Math</button>
<button onclick="updateChart(‘science‘)">Science</button>
<button onclick="updateChart(‘reading‘)">Reading</button>

<div id="chart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>

    var w = 300;
    var h = 200;
    var path;
    var subjects;

    $.getJSON(‘//jsbin.com/vegaqi/1.js‘, function(json) {
        subjects = json;

        _.keys(subjects).forEach(function(subject) {
            subjects[subject].forEach(function(d) {
                d.date = d3.time.format("%Y%m%d").parse(d.date);
                console.log(d.date);
            })
        });

        path = d3.select(‘#chart‘)
                .append(‘svg‘)
                .attr(‘width‘, w)
                .attr(‘height‘, h)
                .append(‘g‘)
                .append(‘path‘);

        updateChart(‘math‘);
    });

    function updateChart(subject) {
        var data = subjects[subject];
        var dates = _.pluck(data, ‘date‘);
        var counts = _.pluck(data, ‘count‘);

        var x = d3.time.scale()
                .domain(d3.extent(dates))//d3.extent(), return [min, max]
                .range([0, w]);

        var y = d3.scale.linear()
                .domain(d3.extent(counts))
                .range([h, 0]);

        var area = d3.svg.area()
                .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
                .x(function(d) {
                    return x(d.date);
                })
                .y0(function(d) {
                    return y(0);
                })
                .y1(function(d) {
                    return y(d.count);
                });

        var line = d3.svg.line()
                .interpolate(‘bundle‘) //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points
                .x(function(d) {
                    return x(d.date);
                })
                .y(function(d) {
                    return y(d.count);
                });

        path
                .datum(data)//for only one object, path object
                .transition()
                .duration(450)
                .attr(‘d‘, area);
    }

</script>
</body>
</html>

时间： 2024-12-25 16:22:04

[D3] 14. Line and Area Charts with D3的相关文章

D3.js使用过程中的常见问题(D3版本D3V4)

目录一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中用attr来设置属性和用style来设置样式时,用style来设置样式的权重会更高五.D3使用链式写法时,写完transition动画后不能链着继续写append添加元素操作六.如何给path设置缓动? 七.D3普通的缓动动画八.给节点添加title,鼠标mouseover显示普通提示文本效果

d3学习之（Data Visualization with d3.js Cookbook ）（第四章）-3

3.使用分类范围尺在某些情况下,我们可能需要将我们的数据映射到一些分类的(顺序的)值,比如[a,b,c]或者[# 1f77b4, # ff7f0e, #2ca02c]等,如何用D3来处理这类映射呢,本节将回答这个问题. 老规矩还是先上代码,打开你的编辑器,输入如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ordinal Scale</

国际流行开源机器学习和模式识别工具(转)

机器学习和数据挖掘最近几年有很大突破且实用推进很快.在众多数据中,声音和图像就占据绝大部分,以声音和图像为内容源的机器学习和数据挖掘会越来越多,所以声音分析,例如音乐分析等; 图像识别等会越来越重要. 国外很多相关的开源项目是我们好好学习第一手资料,我们在基本算法原理清楚的情况下,可以好好学习这些opensource Machine Learning M2K - M2K represents the music-specific set of D2K modules designed to c

JFreeChar 讲解

-------------------转载http://my.oschina.net/u/265431/blog/86045 一.JFreeChart获取. JFreeChart是JFreeChart公司在开源网站SourceForge.net上的一个项目,该公司的主要产品有如下: 1.JFreeReport:报表解决工具 2.JFreeChart:Java图形解决方案(Application/Applet/Servlet/Jsp)

[D3] Build a Line Chart with D3 v4

Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplified version of the charts seen on Google Finance. var margin = { top: 10, right: 20, bottom: 65, left

Learning D3.js d3的path讲解

转帖: http://jsbin.com/omajal/23/edit?html,output svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等.W3 标准对SVG 的Path定义如下SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合.W3提供了一个形象的比喻,用钢笔和纸来表示svg的path* 想象一个钢笔放在一张纸上.* 钢笔在某点与纸接触.* 笔尖移动到另一处.* 这两个

D3.js Data-Driven Documents

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietar

d3 API zoom

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d3</title> </head> <body> <div class="test"> </div> <script src="../js/jquery-2.1.4.js&

d3 - 简单的坐标轴例子

source link: http://m.blog.csdn.net/blog/zxlvxj/44065561 varcontainer = d3.select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); 我在 Chrome Stable 里测试的: Array.apply