D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
michalskop
Full window
Github gist
Slovak regional elections 2013
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Slovakia</title> <link rel="stylesheet" type="text/css" href="vuc_2013.css" /> </head> <body> <h1>Slovakia</h1> <!-- chart --> <p id="chart_sk"></p> <p>Winners of the 1st round of elections for governor regions</p> <script src="https://d3js.org/d3.v3.min.js"></script> <script type="text/javascript"> //subcharts' specifications //load specs from var specs = {i: 0, name: 'chart_sk', width: 900, height: 458, lngMin: 16.8, lngMax: 22.55, latMin: 47.65, latMax: 49.55, file: 'sk_vuc_zupan_1_2013.json', max_population: 30000, max_size: 20}; //var shorts = {$shorts}; // Chart dimensions. var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = specs.width - margin.right, height = specs.height - margin.top - margin.bottom; //Various scales. These domains make assumptions of data, naturally. var xScale = d3.scale.linear().domain([specs.lngMin, specs.lngMax]).range([0, width]), yScale = d3.scale.linear().domain([specs.latMin, specs.latMax]).range([height, 0]), radiusScale = d3.scale.sqrt().domain([0, specs.max_population]).range([0, specs.max_size]); a=1; // Create the SVG container and set the origin. a=1; // Create the SVG container and set the origin. var svg = d3.select("#"+specs.name).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Add tooltip div var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 1e-6); // Load the data. d3.json(specs.file, function(data) { nodes = data.features .map(function(d) { return { x: xScale(d.coordinates[0]), y: yScale(d.coordinates[1]), r: radiusScale(d.population), title: d.name + ': ' + d.winner + ' (' + d.population + ')', name: d.name, id: d.id, /*winner: d.properties.winner,*/ population: d.population, classname: d.classname }; }); var circle = svg.selectAll("circle") .data(data); var node = svg.selectAll("circle") .data(nodes) .enter().append("circle") .attr("r",function(d) { return d.r; }) .attr("cx", function(d) {return d.x;}) .attr("cy", function(d) {return d.y;}) //.attr("title", function(d) {return d.title;}) .attr("class", function(d) {return d.classname}) .on("mouseover", mouseover) .on("mousemove", function(d){mousemove(d);}) .on("mouseout", mouseout) }); function mouseover() { div.transition() .duration(300) .style("opacity", 1); } function mousemove(d) { div .text(d.title) .style("left", (d3.event.pageX ) + "px") .style("top", (d3.event.pageY) + "px"); } function mouseout() { div.transition() .duration(300) .style("opacity", 1e-6); } function in_array (needle, haystack, argStrict) { // https://kevin.vanzonneveld.net // + original by: Kevin van Zonneveld (https://kevin.vanzonneveld.net) // + improved by: vlado houba // + input by: Billy // + bugfixed by: Brett Zamir (https://brett-zamir.me) // * example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']); // * returns 1: true // * example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'}); // * returns 2: false // * example 3: in_array(1, ['1', '2', '3']); // * returns 3: true // * example 3: in_array(1, ['1', '2', '3'], false); // * returns 3: true // * example 4: in_array(1, ['1', '2', '3'], true); // * returns 4: false var key = '', strict = !! argStrict; if (strict) { for (key in haystack) { if (haystack[key] === needle) { return true; } } } else { for (key in haystack) { if (haystack[key] == needle) { return true; } } } return false; } </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js