Skip to content

Instantly share code, notes, and snippets.

@ackuser

ackuser/.block

Created November 22, 2016 09:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ackuser/d051139a72a7e585e8db7aa30821dbaf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ackuser/d051139a72a7e585e8db7aa30821dbaf to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!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)
<a class="reset" href="javascript:ordinalChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
</div>
</div>
<div class="col-sm-3 col-md-4">
<div id="round-chart-men">
<strong>By Cities</strong> (total area km2)
<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>
<div class="row">
<div class="col-sm-12 col-md-2">
<div id="time-chart-monthly_AF" class="col-md-8">
<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>
var spainChart = dc.geoChoroplethChart("#spain-chart")
var ordinalChart = dc.barChart("#cities-chart")
var pieChart = dc.pieChart("#round-chart")
var pieChartMen = dc.pieChart("#round-chart-men")
var timeChart = dc.barChart("#time-chart");
d3.csv("contratos.csv", function (csv) {
// debugger
var data = crossfilter(csv)
var states = data.dimension(function (d) { return d.comunidad })
var states_bis = data.dimension(function (d) { return d.comunidad })
var cities = data.dimension(function (d) { return d.provincia })
var borough = data.dimension(function (d) { return d.municipio })
var timeDim = data.dimension(function (d) { return new Date(d.mes.substring(0,4)+ "/" + d.mes.substring(4, d.mes.length)) })
var citiesState = states.group().reduceCount(function (d) { return d.provincia })
var employmentByState = states.group().reduceSum(function(d) { return +d.contratos })
var employmentByCities = cities.group().reduceSum(function(d) { return +d.contratos })
var empPermanentByWomen = states.group().reduceSum(function(d) { return +d.indef_mujeres })
var empPermanentByMen = states.group().reduceSum(function(d) { return +d.indef_hombres })
var employmentByTime = timeDim.group().reduceSum(function(d) { return +d.contratos })
var projection = d3.geo.mercator()
.center([-6, 37])
.scale(2200)
.translate([400, 400])
d3.json("units1.json", function (statesJson) {
spainChart
.width(1000)
.height(500)
.dimension(states_bis)
.group(employmentByState)
.colors(d3.scale.quantize().range(
['#bcbddc','#9e9ac8','#807dba','#6a51a3','#54278f','#3f007d']
))
.colorDomain(d3.extent(employmentByState.all(),function(d){return d.value}))
.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.key + " " + d.value
})
pieChart
.width(500)
.height(500)
.transitionDuration(500)
.colorAccessor(function(d, i){return d.value;})
.radius(140)
.innerRadius(40)
.dimension(states)
.group(empPermanentByWomen)
.renderLabel(true)
.renderTitle(true);
pieChartMen
.width(500)
.height(500)
.transitionDuration(500)
.colorAccessor(function(d, i){return d.value;})
.radius(140)
.innerRadius(40)
.dimension(states)
.group(empPermanentByMen)
.renderLabel(true)
.renderTitle(true);
timeChart
.width(1000)
.height(300)
.dimension(timeDim)
.margins({top: 40, right: 20, bottom: 20, left: 50})
.group(employmentByTime)
.x(d3.time.scale()
.domain([new Date("2015/12/01"), new Date("2017/01/01")]))
.xUnits(d3.time.months)
.elasticY(true)
.xAxisLabel("")
.yAxisLabel("")
.barPadding(0.1)
.outerPadding(0.05)
.colorAccessor(function (d, i){return i;})
.ordinalColors(["#2196F3"])
ordinalChart
.width(1000)
.height(500)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.brushOn(true)
.xAxisLabel("Autonomies")
.yAxisLabel("Population")
.dimension(cities)
.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(employmentByCities)
.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';
})
dc.dataTable("#data-table")
.dimension(cities)
.group(function(d) {
return d.provincia;
})
.size(10)
.columns([
function(d) { return d.comunidad },
function(d) { return d.provincia },
function(d) { return d.municipio },
function(d) { return d.mes.substring(4, d.mes.length) },
function(d) { return d.contratos },
function(d) { return d.indef_hombres },
function(d) { return d.indef_mujeres }
])
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment