zoukankan      html  css  js  c++  java
  • [D3] Build a Scatter Plot with D3 v4

    Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to display multiple dimensions of data simultaneously using x and y position, opacity, color, and even shape. This lesson introduces the SVG circle element as part of building a robust scatter plot.

    var margin = {
        top: 10,
        right: 20,
        bottom: 65,
        left: 40
    };
    var width = 400 - margin.left - margin.right;
    var height = 600 - margin.top - margin.bottom;
    
    var svg = d3.select('.chart')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .call(responsivefy)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    
    
    
    
    /**
     * Load data
     */
    d3.json('../data/data2.json', function (err, data) {
        /**
         * Add Y axis
         */
        var yScale = d3.scaleLinear()
            .domain(d3.extent(data, (d) => d.expectancy))
            .range([height, 0])
            .nice();
        var yAxis = d3.axisLeft(yScale);
        svg.call(yAxis);
    
        /**
         * Add X axis
         */
        var xScale = d3.scaleLinear()
            .domain(d3.extent(data, d => d.cost))
            .range([0, width])
            .nice();
    
        var xAxis = d3.axisBottom(xScale);
        svg
            .append('g')
            .attr('transform', `translate(0, ${height})`)
            .call(xAxis);
    
        // For circle, we need scaleSqrt    
        var rScale = d3.scaleSqrt()
            .domain([0, d3.max(data, d => d.population)])
            .range([0, 40]);
    
        // Create some container to contain the circles
        var circles = svg.selectAll('.ball')
            .data(data)
            .enter()
            .append('g')
            .attr('class', 'ball')
            .attr('transform', d => {
                return `translate(${xScale(d.cost)}, ${yScale(d.expectancy)})`
            });
    
        // Add circle to each containers    
        circles
            .append('circle')
            .attr('cx', 0)
            .attr('cy', 0)
            .attr('r', d => rScale(d.population))
            .style('opacity', 0.5)
            .style('fill', 'steelblue');
    
        // Add text    
        circles
            .append('text')
            .style('text-anchor', 'middle')
            .style('fill', 'black')
            .attr('y', 4)
            .text(d => d.code)    
    });
    
    
    
    
    
    
    
    function responsivefy(svg) {
        // get container + svg aspect ratio
        var container = d3.select(svg.node().parentNode),
            width = parseInt(svg.style("width")),
            height = parseInt(svg.style("height")),
            aspect = width / height;
    
        // add viewBox and preserveAspectRatio properties,
        // and call resize so that svg resizes on inital page load
        svg.attr("viewBox", "0 0 " + width + " " + height)
            .attr("preserveAspectRatio", "xMinYMid")
            .call(resize);
    
        // to register multiple listeners for same event type,
        // you need to add namespace, i.e., 'click.foo'
        // necessary if you call invoke this function for multiple svgs
        // api docs: https://github.com/mbostock/d3/wiki/Selections#on
        d3.select(window).on("resize." + container.attr("id"), resize);
    
        // get width of container and resize svg to fit it
        function resize() {
            var targetWidth = parseInt(container.style("width"));
            svg.attr("width", targetWidth);
            svg.attr("height", Math.round(targetWidth / aspect));
        }
    }

  • 相关阅读:
    Asp.Net 加密 web.config中的某个敏感信息
    异步模型中HttpWebRequest的Timeout
    WCF路由所有的请求到一个方法route all request to one operation
    .Net中直接操作内存
    【转】.NET AJAX实例
    【原】IE/FF 强制浏览器不读取缓存(强制刷新)
    【精】经典的css技巧
    【转】C#如何获取客户端/服务端IP地址
    【原】FireFox显示滚动条 [解决页面左右移动]
    【原】Function Import in Entity Framework 4 issue
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7347510.html
Copyright © 2011-2022 走看看