D3.js Force（力学图）布局和 CSS3 小图标

使用D3 force布局实现的一个交互式的国家指标分布图

d3,force

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2260
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// Find min and maxes
function getBounds(d, paddingFactor) {
  paddingFactor = typeof paddingFactor !== 'undefined' ? paddingFactor : 1;
  var keys = _.keys(d[0]), b = {};
  _.each(keys, function(k) {
    b[k] = {};
    _.each(d, function(d) {
      if(isNaN(d[k]))
        return;
      if(b[k].min === undefined || d[k] < b[k].min)
        b[k].min = d[k];
      if(b[k].max === undefined || d[k] > b[k].max)
        b[k].max = d[k];
    });
    b[k].max > 0 ? b[k].max *= paddingFactor : b[k].max /= paddingFactor;
    b[k].min > 0 ? b[k].min /= paddingFactor : b[k].min *= paddingFactor;
  });
  return b;
}

// Force-Directed Scatterplot
// Source: http://bl.ocks.org/rpgove/10603627
var data = d3.csv.parse( d3.select("pre#data").text() );

// Resolve collisions between nodes.
function collide(alpha) {
  var quadtree = d3.geom.quadtree(data);
  return function (d) {
    var r = d.radius + radius + 5,
        nx1 = d.x - r,
        nx2 = d.x + r,
        ny1 = d.y - r,
        ny2 = d.y + r;
    quadtree.visit(function (quad, x1, y1, x2, y2) {
      if (quad.point && (quad.point !== d)) {
        var qx = d.x - quad.point.x,
            qy = d.y - quad.point.y,
            l = Math.sqrt(qx * qx + qy * qy),
            qr = d.radius + quad.point.radius + (d.color !== quad.point.color);
        if (l < qr) {
          l = (l - qr) / l * alpha;
          qx = qx * l;
          qy = qy * l;
          d.x = d.x - qx;
          d.y = d.y - qy;
          quad.point.x += qx;
          quad.point.y += qy;
        }
      }
      return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
    });
  };
}

function moveTowardDataPosition(alpha) {
  return function (d) {
    d.x += (xScale(d[xVar]) - d.x) * 0.1 * alpha;
    d.y += (y(d[yVar]) - d.y) * 0.1 * alpha;
  };
}

data = parseData(data);// Parse numbers to Float
var xVar = "Participações",
    yVar = "Melhor Posição",
    xVarOptions = ["Sede", "Participações", "PIB", "População", "IDH"],
    descriptions = { "População" : "População", "Host" : "Quantas vezes sediou uma copa do mundo", "PIB" : "PIB", "Participações" : "Número de participações em copas", "IDH": "IDH" },
    xScale,
    bounds = getBounds(data, 1),
    formatValue = d3.format(".2s"),
    thisTickFormat = function (d) {
      return formatValue(d).replace('G', 'B');
    },
    margin = {top: 20, right: 20, bottom: 20, left: 20},
    padding = {top: 20, right: 20, bottom: 20, left: 20},
    outerWidth = 960,
    outerHeight = 400,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom,
    radius = 10,
    //x axis scale
    x = d3.scale.log().base(2).range([0, width]),
    // y axis scale
    y = d3.scale.log().base(2).range([0, height]),
    // Declare Axis
    xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(thisTickFormat),
    yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(d3.format("d")),
    force,
    node,
    flags,
    container,
    circles,
    svg,
    dl, 
    span;

// THE CREATION

// Create the Container
container = d3.select(".g-container");

// Create the Menu
container.append("div")
  .attr("class", "g-menu btn-group")
  .attr("data-toggle", "buttons-radio")
  .attr("id", "x-axis-menu");

// Create the SVG
svg = container
  .append("svg")
  .attr("width", outerWidth)
  .attr("height", outerHeight);

svg.append("g").attr("class", "g-circles")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

circles = svg.select("g").append("g");

// Create the nodes
node = circles.selectAll(".dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("r", radius)
  .attr("cx", function (d) { return x(d[xVar]); })
  .attr("cy", function (d) { return y(d[yVar]); })
  .style("fill", function (d) { return 'transparent'; });

// Create the definition list
dl = container
  .append("div")
  .attr("class", "g-dados")
  .append("dl")
  .attr("class", "f32");

span = dl.append("span");

// Create THE FORCE
force = d3.layout.force()
  .nodes(data)
  .size([innerWidth, innerHeight])
  .on("tick", tick)
  .charge(20)
  .gravity(0)
  .chargeDistance(20);

// Create the Visualization
span.append("dt").text("Brasil");
span.append("dd").attr("class", "flag br");
dl.append("dt").text("Melhor Posição");
dl.append("dd").attr("class", "first-dado").text("1º Lugar");
dl.append("dt").text("Sede");
dl.append("dd").text("1 vez");
dl.append("dt").text("Participações");
dl.append("dd").text("19");
dl.append("dt").text("PIB (US$)");
dl.append("dd").text("2.2B");
dl.append("dt").text("População");
dl.append("dd").text("200M");
dl.append("dt").text("IDH");
dl.append("dd").text("0.730");

// Create the Flags
flags = container.append('div')
  .attr("class", "g-flags")
  .append("ul")
  .attr('class',  'f32')
  .selectAll("li")
  .data(force.nodes())
  .enter().append('li')
  .attr('class',  function (d) {
    return 'flag ' + d.Codigo;
  }).on("mouseover", function (d) {
    d3.select('.g-dados span dt')
    .html(d.Pais);
    d3.select('.g-dados span dd')
    .attr('class', 'flag ' + d.Codigo);
    d3.select(".first-dado")
    .html(d["Melhor Posição"] + "º Lugar");
    d3.select(".g-dados dd:nth-of-type(2)")
    .html(d.Sede === 1 ? d.Sede + " vez" : (d.Sede < 2 ? "Nunca" : d.Sede + " vezes"));
    d3.select(".g-dados dd:nth-of-type(3)")
    .html(d["Participações"]);
    formatValue = d3.format(".2s");
    var thisFormatValue = function (d) {
      return formatValue(d).replace('G', 'B');
    };
    d3.select(".g-dados dd:nth-of-type(4)")
    .html(thisFormatValue(d.PIB));
    d3.select(".g-dados dd:nth-of-type(5)")
    .html(thisFormatValue(d["População"]));
    formatValue = d3.format(".3f");
    d3.select(".g-dados dd:nth-of-type(6)")
    .html(formatValue(d.IDH));
  });

// Set scale domain
x.domain(d3.extent(data, function (d) { return d[xVar]; })).nice();
y.domain(d3.extent(data, function (d) { return d[yVar]; })).nice();

// Set initial positions
data.forEach(function (d) {
  d.x = x(d[xVar]);
  d.y = y(d[yVar]);
  d.radius = radius;
});

// Create the x Axis Menu
d3.select('#x-axis-menu')
  .selectAll('a')
  .data(xVarOptions)
  .enter()
  .append('a')
  .text(function (d) {return d; })
  .attr("class", "btn")
  .classed('active', function (d) {
    return d === xVar;
  })
  .on('click', function (d) {
    force.stop();
    xVar = d;
    updateChart();
    updateMenus();
  });

// Render axes
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(40," + (height + 28) +  ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr('transform', 'translate(40, 20)')
  .call(yAxis)
  .append("text");

function makeXAxis(s) {
  s.call(d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .tickSize(-height - 7, 0, 0)
  .tickFormat(thisTickFormat));
}

function makeYAxis(s) {
  s.call(d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickSize(-width, 0, 0)
  .tickFormat(function (d) { return d + "º"; }));
}

//Also update the axes
  d3.select('.x')
  .transition()
  .call(makeXAxis);
  d3.select('.y')
  .transition()
  .call(makeYAxis);
  // Update axis labels
  d3.select('.label')
  .text(descriptions[xVar]);
  // Start THE FORCE
  force.start();
}

function updateMenus() {
  d3.select('#x-axis-menu')
  .selectAll('a')
  .classed('active', function (d) {
    return d === xVar;
  });
}

updateChart();
updateMenus();

编译

CSS

body{background: white;}
pre#data {
  display: none; }

.label, .axis {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: smaller;
  fill: #545454; }

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }

.axis path {
  display: none; }

.tick line {
  stroke: rgba(84, 84, 84, 0.2);
  stroke-width: 1; }

.grid .tick {
  stroke: #545454; }

.grid line {
  stroke-width: 0.5; }

.dot:hover {
  cursor: pointer; }

#bestfit {
  stroke: #ddd;
  stroke-width: 10px; }

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px; }

.flag {
  /*transform*/
  position: absolute;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6); }

.g-container {
  margin: 20px auto;
  position: relative;
  width: 960px;
  height: 548px; }

.g-menu {
  margin: 20px 300px; }

.g-dados {
  top: 600px;
  height: 50px;
  width: 960px;
  /*border-radius*/
  background: #f7f7f7;
  border-radius: 5px; }

.g-dados dl {
  position: static; }

.g-dados span {
  display: inline-block;
  position: relative;
  height: 50px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #f0f0f0; }

.g-dados span dt {
  margin-left: 20px;
  position: relative;
  top: 15px;
  font-size: 13px;
  color: #545454; }

.g-dados span dd {
  position: relative;
  margin-right: 20px;
  /*transform*/
  top: 7px;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7); }

.g-dados dt, .g-dados dd {
  position: relative;
  top: 16px;
  display: inline-block;
  font-family: Helvetica;
  font-size: 13px; }

.g-dados dt {
  margin-left: 45px;
  font-size: 11px;
  color: #b7b7b7; }

.g-dados dt:first-of-type {
  margin-left: 20px; }

.g-dados dd {
  margin-left: 4px;
  font-size: 12px;
  color: #545454; }

HTML

<pre id="data">
Pais,Participações,Melhor Posição,Posição Mídia,Sede,PIB,População,IDH,Codigo
Alemanha,17,1,4,2,3635959000,80716000,0.92,de
França,13,1,10,2,2737361000,65885000,0.893,fr
Inglaterra,13,1,7,1,2535761000,53012456,0.875,_England
Brasil,19,1,5,1,2242854000,201032714,0.73,br
Itália,17,1,7,2,2071955000,60021955,0.881,it
Espanha,13,1,9,1,1358687000,46609700,0.885,es
Argentina,15,1,7,1,488213000,42669500,0.811,ar
Uruguai,11,1,9,1,56345000,3286314,0.792,uy
Holanda,9,2,7,0.0001,800007000,16848300,0.921,nl
Suécia,11,2,9,1,557938000,9658301,0.916,se
República Checa,9,2,10,0.0001,198312000,10512400,0.873,cz
Hungria,9,2,9,0.0001,132426000,9879000,0.831,hu
Estados Unidos,9,3,16,1,16799700000,317951000,0.937,us
Turquia,2,3,6,0.0001,827209000,76667864,0.722,tr
Polônia,7,3,12,0.0001,516128000,38507281,0.821,pl
Áustria,7,3,11,0.0001,415366000,8504850,0.895,at
Chile,8,3,11,1,276975000,17620000,0.819,cl
Portugal,5,3,11,0.0001,219972000,10477800,0.816,pt
Croácia,3,3,16,0.0001,58058000,4290612,0.805,balta
Rússia,9,4,11,0.0001,2118006000,143700000,0.788,ru
Coreia do Sul,8,4,18,1,1221801000,50219669,0.909,kr
Bélgica,10,4,12,0.0001,506560000,11190649,0.897,be
Bulgária,7,4,15,0.0001,53046000,7245677,0.782,bg
Sérvia,11,4,11,0.0001,42525000,7181505,0.769,rs
Suíça,9,5,11,1,650814000,8136700,0.913,ch
México,14,6,12,2,1258544000,119713203,0.775,mx
Romênia,7,6,10,0.0001,189659000,20121641,0.786,ro
País de Gales,1,6,6,0.0001,79530000,3063456,0.875,_Wales
Peru,4,7,11,0.0001,206542000,30475144,0.741,pe
Gana,2,7,10,0.0001,44223000,24658823,0.558,gh
Camarões,6,7,20,0.0001,27957000,20386799,0.495,cm
Senegal,1,7,7,0.0001,15154000,12873601,0.47,sn
Dinamarca,4,8,13,0.0001,330958000,5627235,0.901,dk
Irlanda,3,8,12,0.0001,217884000,4593100,0.916,ie
Ucrânia,1,8,8,0.0001,176235000,45395604,0.74,ua
Cuba,1,8,8,0.0001,60810000,11167325,0.78,cu
Coréia do Norte,2,8,20,0.0001,40000000,24895000,0.733,mf
Irlanda do Norte,3,8,13,0.0001,37330000,1810863,0.875,_Northern_Ireland
Paraguai,8,8,13,0.0001,28333000,6783374,0.669,py
Nigéria,4,9,19,0.0001,286470000,173615000,0.471,ng
Japão,4,9,19,1,4901532000,127140000,0.912,jp
Escócia,8,9,16,0.0001,235000000,5313600,0.875,_Scotland
Tunísia,4,9,22,0.0001,47439000,10886500,0.712,tn
Marrocos,4,11,17,0.0001,105101000,33244100,0.591,ma
Arábia Saudita,4,12,25,0.0001,745273000,29994272,0.782,sa
Noruega,3,12,15,0.0001,511252000,5109056,0.955,no
Israel,1,12,12,0.0001,291500000,8157300,0.9,il
Equador,2,12,18,0.0001,94144000,15729100,0.724,ec
CostaRica,3,12,21,0.0001,49621000,4667096,0.773,cr
Bolívia,3,12,15,0.0001,29802000,10027254,0.675,bo
Egipto,2,13,17,0.0001,271427000,86368000,0.662,eg
Argélia,3,13,21,0.0001,206095000,38700000,0.713,dz
Austrália,3,14,17,0.0001,1505277000,23467130,0.938,au
Colômbia,4,14,17,0.0001,381822000,47568000,0.719,co
Irã,3,14,20,0.0001,366259000,77393000,0.742,ir
Haiti,1,15,15,0.0001,8458000,10413211,0.456,ht
Eslováquia,1,16,16,0.0001,95805000,5415949,0.84,sk
El Salvador,2,16,20,0.0001,24512000,6340000,0.68,sv
Congo,1,16,16,0.0001,13781000,67514000,0.534,cd
África do Sul,3,17,20,1,350779000,52981991,0.629,za
Costa do Marfim,2,17,18,0.0001,28288000,23202000,0.432,ci
Eslovênia,2,18,24,0.0001,46851000,2062436,0.892,si
Honduras,2,18,24,0.0001,18813000,8555072,0.632,hn
Kuwait,1,21,21,0.0001,185319000,3065850,0.79,kw
Nova Zelândia,2,22,23,0.0001,181330000,4526370,0.919,nz
Jamaica,1,22,22,0.0001,14288000,2711476,0.73,jm
Iraque,1,23,23,0.0001,229327000,34035000,0.59,iq
Angola,1,23,23,0.0001,121704000,20609294,0.508,ao
Canadá,1,24,24,0.0001,1825096000,35344962,0.911,ca
Emirados Árabes Unidos,1,24,24,0.0001,396235000,8264070,0.818,ae
Grécia,2,24,25,0.0001,241796000,10815197,0.86,gr
Trinidad e Tobago,1,27,27,0.0001,27703000,1328019,0.76,tt
Togo,1,30,30,0.0001,4360000,6191155,0.459,tg
China,1,31,31,0.0001,9181377000,1364150000,0.699,cn
</pre>

使用D3 force布局实现的一个交互式的国家指标分布图

d3,force

编辑器支持Emmet

快捷键

使用D3 force布局实现的一个交互式的国家指标分布图

d3,force

基于D3.js和Worker实现高性能碎花图案背景

使用D4和ScrollMagic.js来控制D3.js数据可视化回放

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：