Classic D3 Examples
Old school D3 from simpler times
jdotnicol
Full window
Github gist
fresh block
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.js"></script> <script src="https://unpkg.com/topojson@3"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var width = 960; var height = 500; var center = [10, 72]; var scale = 395; var projection = d3.geoMercator() .scale(scale) .translate([width / 2, 0]) .center(center); var path = d3.geoPath().projection(projection); var svg = d3.select("body") .append("svg") .attr("height", height) .attr("width", width); var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); var g = svg.append("g"); var getX = function(feature){ return path.centroid(feature)[0]; }; var getY = function(feature){ return path.centroid(feature)[1]; }; var getEmissions = function(feature){ return(feature.properties.data_2013_CO2_MTpc *2 ); }; // Reads in TOPOjson file into path specified above, however displays circles based on polygon centroids using path.centroid d3.json("eu.json", function(data) { var geojson = topojson.feature(data, data.objects.eu).features; var nodes = geojson.filter(function(d, i){ return (d.properties.data_2013_CO2_MTpc !== null); }) .map(function(d){ //console.log(d); var point = path.centroid(d); var value = d.properties.data_2013_CO2_MTpc; if (value === null) return {}; var obj = { name: d.properties.name, label: d.properties.iso_3, x: point[0], y: point[1], x0: point[0], y0: point[1], r: value*2, value: value }; //console.log(obj); return obj; }); var simulation = d3.forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(1)) .force("collide", d3.forceCollide(function(d) { return d.r; }).strength(1)) .on('tick', function() { node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); }); g.datum(nodes); var node = g.selectAll("circle") .data(function(d) { return d; }) .enter() .append("circle") .attr("r", function(d) { return d.r; }) .attr("fill", function(d,i){ return "hsl(" + Math.random() * 360 + ",100%,50%)";}); }); // d3.json("eu.json", function(data) { // var circles = g.selectAll(".circles") // .data(topojson.feature(data, data.objects.eu).features) // .enter() // .append('circle') // .attr('class', 'circles') // .attr("id", "dorling") // .attr('cx', getX) // .attr('cy', getY) // .attr('r', getEmissions) // .style("opacity", 1) // .attr("fill",function(d,i){ return "hsl(" + Math.random() * 360 + ",100%,50%)";}) // .attr('d', path); // }); </script> </body>
https://d3js.org/d3.v4.js
https://unpkg.com/topojson@3