D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
Bolivia, población por departamento (censo 1976, 1992, 2001 y 2012)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bolivia, población por departamento (censo 1976, 1992, 2001 y 2012)</title> </head> <body> <svg width="847" xmlns:xlink="https://www.w3.org/1999/xlink" height="500" xmlns="https://www.w3.org/2000/svg"><g><g class="x axis" transform="translate(0,480)" style="stroke-width: 1px; font-size: 10px; font-family: Arial, Helvetica;"><g class="tick" transform="translate(94.1111111111111,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">1980</text> </g><g class="tick" transform="translate(211.75,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">1985</text> </g><g class="tick" transform="translate(329.38888888888886,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">1990</text> </g><g class="tick" transform="translate(447.02777777777777,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">1995</text> </g><g class="tick" transform="translate(564.6666666666666,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">2000</text> </g><g class="tick" transform="translate(682.3055555555554,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">2005</text> </g><g class="tick" transform="translate(799.9444444444445,0)" style="opacity: 1;"><line y2="-480" x2="0" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></line> <text font-size="14px" y="3" x="0" dy=".71em" style="text-anchor: middle;">2010</text> </g><path class="domain" d="M0,-480V0H847V-480" style="shape-rendering: crispEdges; fill: none; stroke: rgb(204, 204, 204);"></path></g><path class="layer" d="M0,340.3840446478842L62.74074074074073,346.68472521320354C125.48148148148147,352.9854057785228,250.96296296296293,365.58676690916144,348.9953703703703,378.45585311622256C447.0277777777777,391.3249393232836,517.6111111111111,404.46175060676717,596.037037037037,417.19617903687043C674.4629629629629,429.9306074669737,760.7314814814814,442.26265304369673,803.8657407407406,448.4286758320582L847,454.5946986204198L847,474.7305253983351L803.8657407407406,468.09143893679754C760.7314814814814,461.45235247526006,674.4629629629629,448.1741795521851,596.0370370370371,434.2800226483995C517.6111111111111,420.3858657446138,447.0277777777777,405.8757248601175,348.9953703703703,391.46265081702825C250.96296296296293,377.04957677393907,125.48148148148147,362.733569572257,62.74074074074073,355.5755659714159L0,348.4175623705749Z" title="Beni " style="fill-opacity: 0.9; fill: rgb(191, 105, 105);"></path><path class="layer" d="M0,299.5354771909623L62.74074074074073,304.01366140642745C125.48148148148147,308.4918456218926,250.96296296296293,317.44821405282295,348.9953703703703,326.6709954162439C447.0277777777777,335.8937767796648,517.6111111111111,345.3829710755763,596.037037037037,354.34657617910045C674.4629629629629,363.3101812826246,760.7314814814814,371.7481971937615,803.8657407407406,375.9672051493299L847,380.18621310489834L847,407.9247926812588L803.8657407407406,403.30955702020856C760.7314814814814,398.6943213591584,674.4629629629629,389.4638500370581,596.0370370370371,379.4855918643895C517.6111111111111,369.5073336917209,447.0277777777777,358.781288668484,348.9953703703703,348.1824738923119C250.96296296296293,337.58365911613987,125.48148148148147,327.1120745870325,62.74074074074073,321.8762823224789L0,316.6404900579252Z" title="Chuquisaca " style="fill-opacity: 0.9; fill: rgb(191, 162, 105);"></path><path class="layer" d="M0,199.85576754853344L62.74074074074073,206.98206498054844C125.48148148148147,214.1083624125635,250.96296296296293,228.36095727659358,348.9953703703703,236.98226776642883C447.0277777777777,245.6035782562641,517.6111111111111,248.59360437190452,596.037037037037,250.91887451450674C674.4629629629629,253.24414465710896,760.7314814814814,254.90465882667294,803.8657407407406,255.73491591145495L847,256.5651729962369L847,340.6741238854729L803.8657407407406,337.4020862293278C760.7314814814814,334.13004857318265,674.4629629629629,327.5859732608924,596.0370370370371,320.0713249631805C517.6111111111111,312.5566766654685,447.0277777777777,304.0714553823349,348.9953703703703,289.6060943916583C250.96296296296293,275.1407334009817,125.48148148148147,254.69523270276204,62.74074074074073,244.4724823536522L0,234.2497320045424Z" title="Cochabamba" style="fill-opacity: 0.9; fill: rgb(162, 191, 105);"></path><path class="layer" d="M0,129.93653199563573L62.74074074074073,122.75006680005471C125.48148148148147,115.5636016044737,250.96296296296293,101.1906712133117,348.9953703703703,86.6341997194398C447.0277777777777,72.07772822556792,517.6111111111111,57.33771562898617,596.037037037037,42.86809215862789C674.4629629629629,28.398468688269606,760.7314814814814,14.199234344134803,803.8657407407406,7.0996171720674015L847,0L847,129.75166284421908L803.8657407407406,133.91781923269002C760.7314814814814,138.08397562116096,674.4629629629629,146.41628839810286,596.0370370370371,154.37642148925949C517.6111111111111,162.33655458041613,447.0277777777777,169.9245079857875,348.9953703703703,177.44235314326068C250.96296296296293,184.96019830073385,125.48148148148147,192.40793521030884,62.74074074074073,196.13180366509633L0,199.85567211988382Z" title="La Paz" style="fill-opacity: 0.9; fill: rgb(105, 191, 105);"></path><path class="layer" d="M0,316.64058548657476L62.74074074074073,321.8763777511284C125.48148148148147,327.11217001568207,250.96296296296293,337.58375454478943,348.9953703703703,348.18256932096153C447.0277777777777,358.78138409713364,517.6111111111111,369.5074291203705,596.037037037037,379.48568729303906C674.4629629629629,389.4639454657077,760.7314814814814,398.694416787808,803.8657407407406,403.3096524488582L847,407.92488810990835L847,431.52377286709014L803.8657407407406,426.091691822719C760.7314814814814,420.6596107783478,674.4629629629629,409.79544868960556,596.0370370370371,398.5887613679379C517.6111111111111,387.38207404627013,447.0277777777777,375.832861491677,348.9953703703703,364.58623728015624C250.96296296296293,353.33961306863546,125.48148148148147,342.39557720018706,62.74074074074073,336.9235592659628L0,331.45154133173867Z" title="Oruro " style="fill-opacity: 0.9; fill: rgb(105, 191, 162);"></path><path class="layer" d="M0,348.41765779922446L62.74074074074073,355.5756614000655C125.48148148148147,362.7336650009065,250.96296296296293,377.0496722025886,348.9953703703703,391.46274624567786C447.0277777777777,405.87582028876704,517.6111111111111,420.3859611732634,596.037037037037,434.28011807704905C674.4629629629629,448.17427498083475,760.7314814814814,461.45244790390973,803.8657407407406,468.09153436544716L847,474.7306208269847L847,480L803.8657407407406,472.9003828279326C760.7314814814814,465.8007656558652,674.4629629629629,451.60153131173035,596.0370370370371,437.1319078413721C517.6111111111111,422.6622843710138,447.0277777777777,407.9222717744321,348.9953703703703,393.3658002805602C250.96296296296293,378.8093287866883,125.48148148148147,364.4363983955263,62.74074074074073,357.24993319994525L0,350.06346800436427Z" title="Pando " style="fill-opacity: 0.9; fill: rgb(105, 162, 191);"></path><path class="layer" d="M0,268.16163863715167L62.74074074074073,272.7324204522682C125.48148148148147,277.30320226738473,250.96296296296293,286.4447658976178,348.9953703703703,295.25815835430114C447.0277777777777,304.0715508109845,517.6111111111111,312.5567720941181,596.037037037037,320.0714203918301C674.4629629629629,327.586068689542,760.7314814814814,334.13014400183226,803.8657407407406,337.4021816579774L847,340.6742193141225L847,380.1861176762488L803.8657407407406,375.96710972068036C760.7314814814814,371.7481017651119,674.4629629629629,363.3100858539751,596.0370370370371,354.3464807504509C517.6111111111111,345.3828756469267,447.0277777777777,335.8936813510152,348.9953703703703,326.6708999875943C250.96296296296293,317.44811862417333,125.48148148148147,308.491750193243,62.74074074074073,304.01356597777783L0,299.5353817623127Z" title="Potosí " style="fill-opacity: 0.9; fill: rgb(105, 105, 191);"></path><path class="layer" d="M0,234.24982743319202L62.74074074074073,224.79361566429475C125.48148148148147,215.33740389539747,250.96296296296293,196.42498035760298,348.9953703703703,183.17479188602002C447.0277777777777,169.92460341443712,517.6111111111111,162.33665000906575,596.037037037037,154.3765169179091C674.4629629629629,146.41638382675248,760.7314814814814,138.08407104981058,803.8657407407406,133.91791466133964L847,129.7517582728687L847,256.56507756758737L803.8657407407406,255.73482048280536C760.7314814814814,254.90456339802336,674.4629629629629,253.24404922845937,596.0370370370371,250.91877908585715C517.6111111111111,248.59350894325496,447.0277777777777,245.60348282761453,348.9953703703703,248.36648418588229C250.96296296296293,251.12948554415007,125.48148148148147,259.64551437632605,62.74074074074073,263.903528792414L0,268.16154320850205Z" title="Santa Cruz " style="fill-opacity: 0.9; fill: rgb(162, 105, 191);"></path><path class="layer" d="M0,331.45163676038817L62.74074074074073,336.92365469461237C125.48148148148147,342.39567262883656,250.96296296296293,353.339708497285,348.9953703703703,364.58633270880586C447.0277777777777,375.83295692032664,517.6111111111111,387.38216947491975,596.037037037037,398.5888567965875C674.4629629629629,409.7955441182552,760.7314814814814,420.6597062069975,803.8657407407406,426.0917872513686L847,431.52386829573976L847,454.59460319177026L803.8657407407406,448.4285804034087C760.7314814814814,442.26255761504717,674.4629629629629,429.93051203832414,596.0370370370371,417.1960836082209C517.6111111111111,404.46165517811755,447.0277777777777,391.324843894634,348.9953703703703,378.455757687573C250.96296296296293,365.5866714805119,125.48148148148147,352.98531034987326,62.74074074074073,346.684629784554L0,340.38394921923464Z" title="Tarija" style="fill-opacity: 0.9; fill: rgb(191, 105, 162);"></path><defs><path id="path-Beni_" d="M0,344.40080350922955L62.74074074074073,351.13014559230976C125.48148148148147,357.8594876753899,250.96296296296293,371.3181718415502,348.9953703703703,384.9592519666254C447.0277777777777,398.6003320917005,517.6111111111111,412.42380817569045,596.037037037037,425.7381008426349C674.4629629629629,439.05239350957936,760.7314814814814,451.8575027594784,803.8657407407406,458.26005738442785L847,464.6626120093774"></path><path id="path-Chuquisaca_" d="M0,308.0879836244437L62.74074074074073,312.9449718644531C125.48148148148147,317.8019601044625,250.96296296296293,327.5159365844814,348.9953703703703,337.4267346542779C447.0277777777777,347.33753272407444,517.6111111111111,357.44515238364863,596.037037037037,366.91608402174495C674.4629629629629,376.3870156598414,760.7314814814814,385.22125927645993,803.8657407407406,389.6383810847692L847,394.0555028930786"></path><path id="path-Cochabamba" d="M0,217.05274977653792L62.74074074074073,225.72727366710035C125.48148148148147,234.40179755766277,250.96296296296293,251.75084533878766,348.9953703703703,263.2941810790436C447.0277777777777,274.8375168192995,517.6111111111111,280.5751405186865,596.037037037037,285.4950997388436C674.4629629629629,290.41505895900065,760.7314814814814,294.51735369992775,803.8657407407406,296.56850107039133L847,298.6196484408549"></path><path id="path-La_Paz" d="M0,164.89610205775978L62.74074074074073,159.44093523257553C125.48148148148147,153.98576840739128,250.96296296296293,143.07543475702278,348.9953703703703,132.03827643135023C447.0277777777777,121.0011181056777,517.6111111111111,109.83713510470113,596.037037037037,98.62225682394369C674.4629629629629,87.40737854318623,760.7314814814814,76.14160498264789,803.8657407407406,70.50871820237872L847,64.87583142210954"></path><path id="path-Oruro_" d="M0,324.0460634091567L62.74074074074073,329.39996850854567C125.48148148148147,334.75387360793457,250.96296296296293,345.4616838067125,348.9953703703703,356.3844033005589C447.0277777777777,367.30712279440536,517.6111111111111,378.44475158332034,596.037037037037,389.03722433048847C674.4629629629629,399.6296970776566,760.7314814814814,409.67701378307794,803.8657407407406,414.7006721357886L847,419.7243304884993"></path><path id="path-Pando_" d="M0,349.24056290179436L62.74074074074073,356.41279730000537C125.48148148148147,363.5850316982164,250.96296296296293,377.9295004946385,348.9953703703703,392.414273263119C447.0277777777777,406.8990460315996,517.6111111111111,421.52412277213864,596.037037037037,435.7060129592106C674.4629629629629,449.88790314628255,760.7314814814814,463.6266067798874,803.8657407407406,470.4959585966899L847,477.36531041349235"></path><path id="path-Potosí_" d="M0,283.8485101997322L62.74074074074073,288.37299321502303C125.48148148148147,292.8974762303138,250.96296296296293,301.94644226089554,348.9953703703703,310.9645291709477C447.0277777777777,319.98261608099983,517.6111111111111,328.9698238705224,596.037037037037,337.20895057114046C674.4629629629629,345.4480772717585,760.7314814814814,352.93912288347207,803.8657407407406,356.6846456893289L847,360.4301684951856"></path><path id="path-Santa_Cruz_" d="M0,251.20568532084704L62.74074074074073,244.3485722283544C125.48148148148147,237.49145913586176,250.96296296296293,223.7772329508765,348.9953703703703,215.77063803595118C447.0277777777777,207.7640431210258,517.6111111111111,205.46507947616033,596.037037037037,202.64764800188314C674.4629629629629,199.83021652760593,760.7314814814814,196.494317223917,803.8657407407406,194.8263675720725L847,193.15841792022803"></path><path id="path-Tarija" d="M0,335.9177929898114L62.74074074074073,341.8041422395832C125.48148148148147,347.69049148935494,250.96296296296293,359.4631899888985,348.9953703703703,371.5210451981894C447.0277777777777,383.5789004074803,517.6111111111111,395.9219123265187,596.037037037037,407.8924702024042C674.4629629629629,419.8630280782897,760.7314814814814,431.46113191102233,803.8657407407406,437.2601838273887L847,443.05923574375504"></path></defs> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Beni_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Beni </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Chuquisaca_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Chuquisaca </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Cochabamba" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Cochabamba</textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-La_Paz" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">La Paz</textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Oruro_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Oruro </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Pando_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Pando </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Potosí_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Potosí </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Santa_Cruz_" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Santa Cruz </textPath></text> <text dy="0.5ex" class="label"><textPath xlink:href="#path-Tarija" startOffset="95%" text-anchor="end" style="font-size: 14px; font-family: Arial, Helvetica; font-weight: normal;">Tarija</textPath></text> </g></svg> </body> </html>