Skip to content

Instantly share code, notes, and snippets.

@Contrastat

Contrastat/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save Contrastat/b3602c212a25182d7f67 to your computer and use it in GitHub Desktop.
Save Contrastat/b3602c212a25182d7f67 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Multiple Lines</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
path:hover {
stroke: steelblue;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Taxa d'atur per comarca de Catalunya</h1>
<p>Taxa d'atur, 1999-2014. Source: <a href="http://www.idescat.cat">Idescat</a>, 2015</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.taxa);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("unemp_todos.csv", function(data) {
//New array with all the years, for referencing later
var years = ["1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
place: data[i].Comarca,
atur: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the emissions data array
//for this country
dataset[i].atur.push({
year: years[j],
taxa: data[i][years[j]]
});
}
}
}
//Uncomment to log the original data to the console
// console.log(data);
//Uncomment to log the newly restructured dataset to the console
//console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.atur, function(d) {
return +d.taxa;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g");
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.place;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.atur ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", function(a){
if (a.place==="Catalunya"){
return "rgb(205,10,30)";}
else{
return "gray";}
})
.attr("stroke-width", 2);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
unemp_todos.csv
Comarca 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Alt Camp 4.968670020298297 4.146800227461616 3.8992793411118734 3.8808552712890867 3.710597180421353 3.9697038897769663 5.280164500257031 5.1872791519434625 5.1823873689941475 7.039136121264964 10.990075851238013 11.90187356786629 12.599438069124268 13.707357172215373 14.053679653679655 13.2017316017316
Alt Emporda 3.5009233904349486 3.4578125 3.4721054321402907 3.3616239897054783 3.2527932192195497 3.284737687088922 4.653207827594748 4.426891346322625 4.183844692129038 6.013227800065055 9.280777537796975 10.80020807143786 11.1731357250895 11.811874744934538 12.006517952463899 11.55925155925156
Alt Penedes 2.8474271531591393 2.5420028476506884 2.939441966753898 3.164523654989738 3.124160623153371 3.2504167200923195 4.4815493001458675 4.606456836959619 4.551816644310958 6.104401579760746 9.870887130362348 11.315076737887452 11.879460745440126 12.858532901520542 13.307839388145315 12.585674363877041
Alt Urgell 2.3290386521308224 1.982815598149372 2.1429160141762136 1.9721210201172186 2.024416628032762 2.2169320041660465 3.231663035584604 3.2581631927153727 3.0544949670253385 4.266905631763976 6.488312762876647 6.891779684472738 7.5247240934499064 8.718320057929036 9.508365887816025 8.852362349819415
Alta Ribagorca 1.7150395778364116 1.2362030905077264 1.1852502194907815 1.282051282051282 1.021659174499387 1.0650437428680106 1.480932987782303 1.3595706618962433 1.3675213675213675 2.6746907388833168 4.920257889379029 4.969366916269571 5.425531914893617 6.367316893632684 6.651463321930824 5.549220828582288
Anoia 4.427849188778376 4.294844894928822 5.017361664171259 5.927348129943937 5.961401847028179 5.942299207219004 6.789127466799057 6.5881786959949755 6.571454633116587 8.66971182221766 13.20843989769821 14.151064540154609 14.177417896762362 15.450621389356181 16.2884251478781 15.2218502295915
Bages 4.1417145613118445 3.806093740646886 4.265871055699353 4.8976299312411165 4.846174023832721 4.771801177976023 5.929740568329374 5.695652547987163 5.281221486510241 7.115919424982876 11.473377036712492 12.48900396687082 12.833631007027325 13.605954243667274 13.866939224241593 12.96251760744838
Baix Camp 3.2551573480617444 2.654641020134777 2.8513754767507913 4.500431507924055 4.440077466393256 4.194446712203264 5.31908428756218 5.008014484207729 4.818035528850346 6.514131475291496 10.069137924299833 11.450060074586109 12.383373088804598 13.363145087381096 13.770009406732648 13.206409442108393
Baix Ebre 4.990389235944257 4.689723882721321 4.580152671755725 4.19820593352464 4.026285136590404 3.844794244245285 4.96618512145344 4.685749604048365 4.395967608659725 6.489865924054368 10.408270874919966 12.293041674523854 13.043561256824344 14.246692941038749 14.547980549766795 13.68065892626774
Baix Emporda 4.425862642513684 4.01868465930155 4.110940265165801 3.98054328283321 3.662054596933597 3.608234273761543 5.142460902190468 4.915848944394885 4.682201197852602 6.7130100599073135 10.24524824459244 11.689005604629218 12.081166047442126 12.540118682029139 12.58592778546794 11.670928841235954
Baix Llobregat 4.125028736643933 3.6801685261123436 3.858717678528005 4.327714466603356 4.409019156938787 4.510067782140047 5.639962643219972 5.471797793156869 5.325793398580856 6.758641584165733 10.41420315132882 11.627252564971249 12.207473765800144 13.2129449545434 13.519562888283273 12.474337256669449
Baix Penedes 4.024235368822097 3.4906174184284793 3.4965034965034967 3.786989962195281 3.8351297888660123 3.865788694880142 5.828707375099127 5.9353590714919 6.041999263170821 8.623811679492983 13.062002130244979 14.970910668082496 16.1462885386215 17.189194141991052 17.940841688366362 16.92888216674723
Barcelones 4.905129670969831 4.442480047337962 4.324014116968559 4.660088135130421 4.645042684675473 4.536546743244546 5.706145970609318 5.453884989119138 5.19565949810028 6.357674581126199 9.521898064150115 10.830195699385685 11.39864590698312 12.187357136247305 12.29364028242916 11.472348992911153
Bergueda 3.2104028991686206 3.1888518423527397 3.6547664422140342 4.533222935210102 4.92556739607907 4.686321971350344 5.770288318013984 5.735333821884522 5.470418524485743 6.7613933020064145 10.114761476147613 10.74233499471379 11.545089029293509 13.23050355194474 13.879605395611033 12.204550030199316
Cerdanya 2.337118289053026 2.312076567372836 2.249531347635909 2.0756187877606704 1.95139911634757 2.1283959162484862 2.572725744072642 2.41635687732342 2.48452073046477 3.549273655280723 6.055594928734545 6.482415961493674 6.309075539844771 7.509346909553735 7.224272242722428 6.076260762607626
Conca de Barbera 2.9643922118926502 2.6395499783643444 2.492291880781089 2.548725637181409 2.723480821133557 3.007815583800426 4.122340425531915 4.009776216298786 4.255477163015224 5.62002773520181 9.034726309593879 9.084194977843426 9.717261904761905 11.392692336787958 11.526024022174315 10.632891900215585
Garraf 3.8606376352001814 3.8159986841383846 4.02407221664995 4.290916499019583 4.273253683207505 4.1806935594720835 5.5343810954420105 5.464210921978199 5.458800422077583 7.085255231500981 10.789677840839492 12.176736163952722 13.03735024665257 14.062257533906457 14.311586616975838 13.103513253213853
Garrigues 2.5824463444425056 2.3369803063457333 2.3849043417489297 2.755972696245734 2.6579483695652173 2.4412296564195297 3.3390762162605627 3.2720825274016763 3.109423213861856 3.9349670122525917 6.412983534231466 7.402390438247012 7.991655299687074 9.05749754982032 9.411273486430062 9.018789144050105
Garrotxa 3.4299370561109424 3.3427116827438366 3.3716116971558283 3.551007147498376 3.5039581165042417 3.4420621831287033 4.543020349875045 4.547171455966528 4.325417164986617 5.613858338230767 8.71413390010627 9.236149972020145 9.117985894517968 9.749461512300192 10.116954047639473 9.430671127505647
Girones 3.7266035279859957 3.515171431701172 3.6126980005193454 3.590072350947889 3.4457962451898783 3.537126397391844 4.972568222027628 4.764161511020732 4.529115744069015 6.183812095916196 9.500686678438298 10.835598378932634 11.546546915004132 12.115614563146828 12.285475792988313 11.503338898163607
Maresme 3.984442229208735 3.6057572588276305 3.8248726327968012 4.242604616191916 4.4692610021057755 4.794275755599524 6.0887274407990235 6.044824404162115 5.958943830744615 7.434413913403913 10.966095164708149 12.10406850775527 12.76357297028059 13.85216703641237 14.125609747463663 13.194616522828802
Montsia 2.7651451350289147 2.3553089643167975 2.405938743357633 2.678270779910379 2.8010491202159353 2.777979959725356 3.774565381708239 3.3595717169884085 3.486801192288722 5.627614178883772 9.646077642775497 11.080326506255195 12.264556635417563 13.396407813660796 14.356502242152466 13.630044843049326
Noguera 2.4195420981748943 2.4325581395348834 2.4986067248746053 2.931372996666819 3.138793526238352 2.9729153337598633 4.1602078009133185 3.8702239789196313 3.5165626500240035 5.063142207231939 8.600926434796264 10.023885038568464 10.636789666443509 11.49888321633695 11.557850231726157 10.59029189364989
Osona 3.85796706936632 3.5986512478332107 3.8848161398158463 4.121279795816052 4.25089113733478 4.18911536937265 5.5930730491775815 5.481293022969521 5.438825776616065 7.064261219621291 11.239679263258177 12.083962189212805 12.653024573726167 13.31252202809526 13.705816440867883 12.351023734338392
Pallars Jussa 2.7291523087525844 2.4538146946834014 2.579730687455705 2.6853871319520177 2.2458628841607564 2.4655737704918033 3.5988356708123845 3.2778618255168936 3.234011627906977 4.459650778669184 6.629963687478037 7.830251726442415 8.993090950277494 10.045335242185637 10.587221469900284 9.959374615289917
Pallars Sobira 2.748414376321353 2.789363920750782 2.7884369403939626 3.026574803149606 2.642559109874826 2.6362428001772265 3.5852297123228856 3.4267912772585665 3.212206384260189 3.6645110719184797 5.946052372514274 6.8290734824281145 6.955992699249645 7.666941467436109 7.881981032665965 7.123287671232877
Pla d'Urgell 2.157189735865297 1.9982902329557597 2.146558105107328 2.3546838287874143 2.3050612204431666 2.0803005400328716 3.3366760871547085 3.0624780624780623 3.3219616204690836 4.444904722452361 7.188898468612718 8.764510779436153 9.52203136669156 9.877009612559291 9.867916489135066 9.173412867490413
Pla de l'Estany 3.1402034498009734 3.298210611634142 3.0666501793001113 2.7046305652975096 2.312507244696882 2.6186487995533225 3.890072665683221 3.801342281879195 3.606881139233928 4.453503184713376 7.053149804079172 7.4029969236876045 8.018844532606002 8.581886531137162 8.773419935048715 8.508618536097927
Priorat 2.639723284179865 2.336533236732476 2.4891774891774894 2.849002849002849 2.917313999654756 2.8373585542982602 3.648783738753749 3.5991414891860654 3.900999836092444 4.468289557975657 6.526955687090065 8.050233456770247 9.08203125 10.386593661854986 10.678284640355374 9.841107124551513
Ribera d'Ebre 3.3437360677663843 3.5552586654791067 3.171990723423356 3.2307579855273736 3.3628062037976516 3.588044550965741 4.371623043996912 3.9901275195392842 3.879281565066435 4.780771262546223 7.272367640271643 8.758929167501169 9.507184100980261 10.66035145524437 11.384399156711174 11.040056219255096
Ripolles 3.8262982083206802 3.5431150140261005 3.706404180337829 3.8049014320810115 3.887072808320951 3.686907356145827 4.951726588876385 5.1441293648933675 4.956335665953386 6.0702505642034605 9.764567392583873 9.903468001430102 9.541684325240661 10.370051635111876 10.670597829496268 9.773539928486292
Segarra 1.9722097714029583 1.8516877824045361 2.010609171800137 2.801947792767622 3.7483677701820413 3.0120043652237176 3.8331778048955565 3.648964005374443 3.2756616289407097 4.671842856194837 7.885471334617685 8.307003686150606 8.872885835095138 9.214925772368597 9.277083759983617 8.594443306710357
Segria 3.213504622227123 3.155664789714055 3.171446989712999 3.3117810357519804 3.2545990780221588 3.0568802495008334 4.400624065108649 4.100288094681928 3.757883540814645 5.178639300646142 8.638948528985086 10.11949377306273 11.244368068391868 12.013336045092684 11.935044371616895 11.291379754759362
Selva 3.854290625413196 3.7467283815319554 3.7291867345534606 3.7263910158244005 4.075785372924735 4.2713408176233845 5.574839697100043 5.121760658175897 4.883541487223657 6.505952846843556 9.97646003811232 11.257389194351946 11.39951439952304 11.916658645221698 12.304240600432696 11.605338366616511
Solsones 2.344392651494379 2.619790959685082 3.0425417339795366 3.15884476534296 2.6157697121401755 2.2248803827751193 3.264685232857477 2.9231119199272064 2.72657026161828 4.423503325942351 8.709859154929578 9.943502824858758 9.897142857142857 9.637305699481866 10.722665415297982 9.73721257625528
Tarragones 4.006237454587681 3.665673762300309 3.756741086675085 4.251994908885823 4.235580648732426 4.282084129617574 5.440723210778929 5.22270709265095 5.059342436328311 6.826143529176258 10.144442683664066 11.515386787125918 12.058629543259606 12.671171760674813 12.765293570549938 12.379466562659386
Terra Alta 3.8306170775874073 3.5349351008008836 3.1862068965517243 3.0619157295759383 3.32497690988257 3.278899318503279 3.5525807697258336 3.549682601373235 3.458799593082401 4.034509007866024 5.975687779910429 6.28719275549806 7.363013698630137 8.88468809073724 9.126594700686947 8.593859526146082
Urgell 2.2190893901420217 2.2610054701745246 2.3997944501541624 2.9617156158684566 3.32789872446533 3.0912614192119587 4.5842554536832125 4.1150812882759835 4.067118095481454 5.62799697148145 8.86703612650527 9.917906404967287 10.81448733208638 11.34439408192936 11.68639053254438 11.012008353637313
Val d'Aran 1.4389869531849577 1.0789324247586598 1.0118043844856661 1.1318126414765801 1.0275648344478878 1.0223048327137547 1.4806040864672787 1.5253288553036664 1.779455378808304 2.63474655610539 5.108108108108108 5.356662180349932 6.143250688705234 6.515109509287496 6.414241311104832 6.004521051144391
Valles Occidental 4.861366684967431 4.3965046422719825 4.576333883307596 4.943292951040893 5.10276399716513 5.157101182195619 6.448571564772621 6.1804829767647895 5.928392241643042 7.5532667715288975 11.488270700286096 12.512445568877157 13.167930961326116 14.186316586720524 14.51421226850553 13.332279250377004
Valles Oriental 3.97935119677641 3.7378345774641497 4.062225300338296 4.522063553325614 4.6336072069066185 4.609817113156681 5.558344830857907 5.396707656764912 5.276300281060171 6.923414772135125 11.227938415321066 12.152168346994891 12.741737202366583 13.888618330848363 14.280796525791759 13.097886119811763
Catalunya 4.289413933821017 3.9152958425588436 3.996607846098442 4.3572992093020435 4.393470921832391 4.376647324930469 5.575689880382157 5.3634513977634555 5.165767745244776 6.6442359754911235 10.194379241771511 11.406334593669799 12.00980338031121 12.895822307418136 13.149554504536662 12.247050147796951
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment