D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
michalskop
Full window
Github gist
Czech regional election 2012
<!DOCTYPE html> <meta charset="utf-8"> <title>Krajské volby</title> <style> #chart { /*margin-left: -40px;*/ height: 900px;/*502*/ width: 900px; /*the width/height for czech rep. (itself) is 1.79*/ border: 1px solid; /*background-image:url('./cz1024_2.png');*/ } circle { fill: #888; fill-opacity: 0.85; } .extra { /*stroke: #000;*/ /*fill: #fff;*/ fill-opacity: 0.75; } .cssd { fill: #ffa500; } .ods { fill: #008; } .kscm { fill: #800; } .kdu-csl { fill: #ff0; } .zmena { fill: #0a0; } .slk { fill: #abc; } .top09 { fill: #808; } .scz { fill: #f00; } .hzhrom { fill: #9ab; } .vv { fill: #00f; } </style> <body> <div> <p id="chart_cz"></p> <p id="chart_plzen"></p> </div> <script src="https://d3js.org/d3.v3.min.js"></script> <script> //subcharts' specifications var max_population = 1120000; var max_size = 45; var specs = {i: 0, name: 'cz', title:'ČR', width: 900, height: 835, lngMin: 12.156, lngMax: 18.84, latMin: 47, latMax: 51.023, file: 'obce_0c.json'} /*48.6 cz itself*/ /*obce_0_2010c.json*/ var extra_zoom = 3; var extras = [ {name: 'Plzeň', ids: [545970,557978,545988,546003,546208,554731,554758,554766,554774,559199], center: {latitude: 49.748056, longitude: 13.374167}, new_center: {longitude: 13.374167, latitude: 48}, population: 159031 }, {name: 'Ostrava', ids: [545911,546046,546135,546224,554219,554227,554235,554243, 554286,554308,554324,554332,554367,554375,554430,554537,554561, 554570,554588,554669,554685,554715,554723], center: {latitude: 49.835556, longitude: 18.292778}, new_center: {longitude: 18.292778, latitude: 48}, population: 297436 }, {name: 'Brno', ids: [550973,550990,551007,551031,551058,551066,551074,551082,551091,551112, 551147,551171,551198,551210,551228,551236,551244,551252,551279,551287,551295, 551309,551317,551325,551368,551376,551406,551422,551431], center: {latitude: 49.20, longitude: 16.616667}, new_center: {longitude: 16.616667, latitude: 48}, population: 385913 }, {name: 'Praha', ids: [500054,500089,500097,500119,500143,500178,500186,500208,500216,500224,538060,538078, 538124,538175,538205,538213,538302,538353,538361,538388,538400,538531,538736,538931,538949, 539007,539449,539465,539589,539601,539635,539678,539694,539724,539791,539864,539899,547034, 547042,547051,547107,547115,547140,547158,547174,547271,547298,547301,547310,547328,547344, 547361,547379,547387,547395,547409,547417], center: {latitude: 50.087222, longitude: 14.42111}, new_center: {longitude: 14.42111, latitude: 48}, population: 1281041 } ]; var shorts = [ {short: 'cssd', names: ['Česká str.sociálně demokrat.']}, {short: 'kscm', names: ['Komunistická str.Čech a Moravy']}, {short: 'ods', names: ['Občanská demokratická strana']}, {short: 'kdu-csl', names: ['Křesť.demokr.unie-Čs.str.lid.', 'Koalice pro KHK - KDU-ČSL-VPM', 'Koalice pro Pardubický kraj', 'Koalice KDU-ČSL, SNK a nez.', 'Koalice pro Ol.kr. se starosty', 'Koalice KDU-ČSL a SsČR', 'KOALICE PRO KARLOVARSKÝ KRAJ', 'Koalice pro Plzeňský kraj']}, {short: 'zmena', names: ['ZMĚNA PRO LIBERECKÝ KRAJ', 'Hnutí PRO! kraj', 'ZMĚNA 2012', 'Změna pro Královéhradecký kraj']}, {short: 'slk', names: ['Starostové pro Liberecký kraj']}, {short: 'top09', names: ['TOP 09','TOP 09 a Starostové pro STČ', 'TOP 09 a Starostové pro KHK', 'STAN a TOP 09 pro Zl. kraj','TOP 09 a Starostové pro MSK','TOP 09 a Starostové pro JMK','TOP 09 a Starostové pro Plz.k.','TOP 09 a Starostové pro Ol.k.','TOP 09 a Starostové pro PAK', 'TOP 09 a Starostové pro KVK','TOP 09 a Starostové', 'TOP 09 a Starostové pro Vys.', 'TOP 09 a Starostové pro Úst.kr', 'TOP 09 a Starostové pro JHČ']}, {short: 'hzhrom', names: ['HN.ZA HARM.ROZVOJ OBCÍ A MĚST']}, {short: 'vv', names: ['Věci veřejné']}, {short: 'scz', names: ['Severočeši.cz']} ]; // 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, max_population]).range([0, max_size]); // Create the SVG container and set the origin. var svg = d3.select("#chart_"+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 + ")"); // Load the data. d3.json(specs.file, function(data) { nodes = data.features .map(function(d) { return { x: xScale(shift_extra(d.geometry.coordinates[0],d.id,0,extras,extra_zoom)), y: yScale(shift_extra(d.geometry.coordinates[1],d.id,1,extras,extra_zoom)), r: radiusScale(d.properties.population), title: d.properties.name + ': ' + d.properties.winner, name: d.properties.name, id: d.id, winner: d.properties.winner, population: d.properties.population }; }); 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) { if (is_extra(d.name)) { if (d.name == 'Ostrava') return 'extra cssd'; if (d.name == 'Brno') return 'extra cssd'; if (d.name == 'Plzeň') return 'extra ods'; else return 'extra'; } else { if (d.population > 50000) { return (party2short(d.winner,shorts) + ' extra'); } else {return party2short(d.winner,shorts);} } }) }); function is_extra(name) { if ((name == 'Hlavní město Praha') || (name == 'Ostrava') || (name == 'Brno') || (name == 'Plzeň')) return true; else return false; } function shift_extra(coordinate,id,latlng,extras,zoom){ for (i=0; i<extras.length; i++) { x = extras[i]; if (in_array(id,x.ids)) { if (latlng == 0) return ((coordinate - x.center.longitude)*zoom + x.new_center.longitude); else return ((coordinate - x.center.latitude)*zoom + x.new_center.latitude); } } return coordinate; } function party2short(party,shorts) { for (i=0; i<shorts.length; i++) { if (in_array(party,shorts[i].names)) { return shorts[i].short; } } return false; } 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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js