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));
        }
    }

  • 相关阅读:
    hdu 5171(矩阵快速幂,递推)
    hdu 1316(大整数)
    hdu 5170(数学)
    hdu 5167(dfs)
    hdu 5166(水题)
    hdu 5720(贪心+区间合并)
    BestCoder 2nd Anniversary的前两题
    hdu 3065(AC自动机)
    2.3绘制构造线与射线
    查找ARP攻击源
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7347510.html
Copyright © 2011-2022 走看看