Created
May 8, 2016 08:49
-
-
Save ackuser/53e66ddba701e7bc99c396f0640639d5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>dc.js - Spain 2016</title> | |
| <meta charset="UTF-8"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cosmo/bootstrap.css" rel="stylesheet"> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.25/dc.css"/> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.25/dc.js"></script> | |
| <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> | |
| <!-- <script src="//d3js.org/topojson.v1.min.js"></script> --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2>Spain population, area and choroplet by cities & states 2016</h2> | |
| <p> | |
| Data source | |
| <a href="https://es.wikipedia.org/wiki/Anexo:Provincias_y_ciudades_aut%C3%B3nomas_de_Espa%C3%B1a" target="_blank">Wikipedia</a>. | |
| </p> | |
| <div class="col-sm-3 col-md-6"> | |
| <div id="spain-chart"> | |
| <strong>Choroplet showing the distribution by num of cities</strong> (color: total amount raised) | |
| <a class="reset" href="javascript:spainChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> | |
| <span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span> | |
| </div> | |
| </div> | |
| <div class="col-sm-3 col-md-4"> | |
| <div id="round-chart"> | |
| <strong>By Cities</strong> (total area km2 raised in millions) | |
| <a class="reset" href="javascript:ordinalChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-2"> | |
| <div id="cities-chart"> | |
| <strong>By States</strong> (y: number of people, x: cities) | |
| <a class="reset" href="javascript:roundChart.filterAll();dc.redrawAll();" style="display: none;">reset</a> | |
| </div> | |
| <div> | |
| <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a> | |
| </div> | |
| </div> | |
| </div> | |
| <br/><br/><br/><br/> | |
| <div class="row"> | |
| <!-- <div class="col-sm-12 col-md-2"> --> | |
| <table id="data-table" width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Pop</th> | |
| <th>Pop %</th> | |
| <th>Dens</th> | |
| <th>Area</th> | |
| <th>Area %</th> | |
| <th>County</th> | |
| </tr> | |
| <thead> | |
| </table> | |
| <!-- </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var numberFormat = d3.format(".2f"); | |
| var spainChart = dc.geoChoroplethChart("#spain-chart"); | |
| var ordinalChart = dc.barChart("#cities-chart"); | |
| var pieChart = dc.pieChart("#round-chart"); | |
| d3.tsv("spain-provinces-population.tsv", function (tsv) { | |
| var data = crossfilter(tsv); | |
| debugger | |
| var states = data.dimension(function (d) { | |
| return d["County"]; | |
| }); | |
| var states_bis = data.dimension(function (d) { | |
| return d["County"]; | |
| }); | |
| var cities = data.dimension(function (d) { | |
| return d["Name"]; | |
| }); | |
| var citiesState = states.group().reduceCount(function (d) { | |
| return d["Name"]; | |
| }); | |
| var population = states_bis.group().reduceSum(function(d) { | |
| return +d.Population; | |
| }); | |
| var areas = cities.group().reduceSum(function(d) { | |
| return +d.Area; | |
| }); | |
| var projection = d3.geo.mercator() | |
| .center([3, 30]) | |
| .scale(1100) | |
| .translate([400, 400]); | |
| d3.json("units1.json", function (statesJson) { | |
| debugger | |
| spainChart | |
| .width(500) | |
| .height(500) | |
| .dimension(states) | |
| .group(citiesState) | |
| .colors(d3.scale.quantize().range( | |
| ['#fcfbfd','#efedf5','#dadaeb','#bcbddc','#9e9ac8','#807dba','#6a51a3','#54278f','#3f007d'] | |
| )) | |
| .colorDomain([0, 8]) | |
| .colorCalculator(function (d) { | |
| return d ? spainChart.colors()(d) : '#ccc'; | |
| }) | |
| .overlayGeoJson(statesJson.features, "state", function (d) { | |
| return d.properties.NAME_1; | |
| }) | |
| .projection(projection) | |
| .title(function (d) { | |
| return d; | |
| }); | |
| ordinalChart | |
| .width(1000) | |
| .height(400) | |
| .x(d3.scale.ordinal()) | |
| .xUnits(dc.units.ordinal) | |
| .brushOn(true) | |
| .xAxisLabel("Autonomies") | |
| .yAxisLabel("Population") | |
| .dimension(states_bis) | |
| .barPadding(0.1) | |
| .outerPadding(0.05) | |
| .colorAccessor(function (d, i){return i;}) | |
| .ordinalColors(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5']) | |
| .group(population) | |
| .on('renderlet', function(chart, filter){ | |
| chart.selectAll('g.x text') | |
| .attr('dx', '+30') | |
| .attr('transform', 'translate(-20,0) rotate(315)'); | |
| }) | |
| ordinalChart.yAxis().tickFormat(function (v) { | |
| return v / 1000000 + 'M'; | |
| }) | |
| pieChart | |
| .width(500) | |
| .height(500) | |
| .transitionDuration(500) | |
| .colorAccessor(function(d, i){return d.value;}) | |
| .radius(90) | |
| .innerRadius(40) | |
| .dimension(cities) | |
| .group(areas) | |
| .renderLabel(true) | |
| .renderTitle(true); | |
| dc.dataTable("#data-table") | |
| .dimension(cities) | |
| .group(function(d) { | |
| return d.County; | |
| }) | |
| .size(10) | |
| .columns([ | |
| function(d) { return d.Name; }, | |
| function(d) { return d.Population; }, | |
| function(d) { return d.Percentage_pop + " %"; }, | |
| function(d) { return d.Density; }, | |
| function(d) { return d.Area; }, | |
| function(d) { return d.Percentage_area + " %"; }, | |
| function(d) { return d.County; } | |
| ]) | |
| .on('renderlet', function (table) { | |
| table.selectAll('.dc-table-group').classed('info', true); | |
| }); | |
| var datatable = $('#data-table').DataTable({ | |
| // "pagingType": "full_numbers" | |
| }); | |
| // function RefreshTable() { | |
| // dc.events.trigger(function () { | |
| // datatable.api() | |
| // .clear() | |
| // .rows.add( tableDimension.top(Infinity) ) | |
| // .draw() ; | |
| // }); | |
| // } | |
| // for (var i = 0; i < dc.chartRegistry.list().length; i++) { | |
| // var chartI = dc.chartRegistry.list()[i]; | |
| // chartI.on("filtered", RefreshTable); | |
| // } | |
| // RefreshTable() ; | |
| dc.renderAll(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
View raw
(Sorry about that, but we can’t show files that are this big right now.)
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment