D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
makeovermonday - w35
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>makeovermonday - w35</title> </head> <body> <div style="text-align:center;"> <?xml version="1.0"?> <svg xmlns="https://www.w3.org/2000/svg" width="800" height="500" xmlns:xlink="https://www.w3.org/1999/xlink"> <text style="font-size: 20px; font-family: Arial, Helvetica; font-weight: bold;" x="5" y="30">Think Mobile First</text> <text style="font-size: 17px; font-family: Arial, Helvetica; font-weight: normal;" x="5" y="50">Will the console and the PC soon disappear as platforms for gaming?</text> <text style="font-size: 12px; font-family: Arial, Helvetica; font-weight: normal;" x="5" y="470">source:</text> <a xlink:href="//www.statista.com/chart/13789/worldwide-video-game-revenue-forecast/" target="__blank"> <text x="50" y="470" style="font-size: 12px; font-family: Arial, Helvetica; font-weight: normal;" fill="#0000ff">statista</text> </a> <g> <path class="layer" d="M0,228.670294280955L14.841849148418492,226.51847121969277C29.683698296836983,224.3666481584305,59.367396593673966,220.06300203590595,89.01054339010544,229.7956394595595C118.65369018653689,239.52827688321304,148.25628548256284,263.29719785304457,177.85888077858877,288.17572829909307C207.46147607461475,313.05425874514157,237.0640713706407,339.042398667407,266.6666666666667,340.5806107717935C296.2692619626926,342.1188228761799,325.8718572587186,319.2071071626874,355.5150040551501,310.6986081806404C385.1581508515815,302.19010919859335,414.84184914841853,308.0848269479918,444.4849959448499,314.4958060336849C474.1281427412814,320.90678511937807,503.7307380373074,327.8340255413659,533.3333333333334,334.23927817878956C562.9359286293592,340.64453081621326,592.5385239253852,346.52779566907276,622.1411192214111,352.29234684434573C651.7437145174372,358.0568980196187,681.3463098134631,363.7027355173052,710.9894566098947,369.5608920969832C740.6326034063262,375.4190486766611,770.316301703163,381.4895243383305,785.1581508515816,384.5247621691653L800,387.55999999999995L800,282.84L785.1581508515815,280.4500888395335C770.316301703163,278.0601776790672,740.6326034063262,273.28035535813433,710.9894566098947,268.8168091800851C681.3463098134631,264.3532630020359,651.7437145174372,260.20599296687027,622.1411192214113,256.06334813992225C592.5385239253852,251.92070331297427,562.9359286293592,247.7826836942439,533.3333333333333,242.96189524338328C503.7307380373074,238.14110679252266,474.1281427412814,232.6375495095317,444.48499594484997,227.33882287617988C414.84184914841853,222.04009624282807,385.1581508515815,216.94620025911527,355.51500405515003,226.80570053673887C325.8718572587186,236.66520081436238,296.2692619626926,261.4780973533222,266.6666666666667,260.9398112159911C237.0640713706407,260.40152507866,207.46147607461475,234.51205626503793,177.85888077858877,209.61458449009808C148.25628548256284,184.71711271515824,118.65369018653689,160.81163797890062,89.01054339010544,150.158363871923C59.367396593673966,139.5050897649454,29.683698296836983,142.10401628724784,14.841849148418492,143.40347954839902L0,144.70294280955025Z" fill="#d95f02" title="Console Games"/> <path class="layer" d="M0,335.2970571904497L14.841849148418492,336.59652045160095C29.683698296836983,337.8959837127522,59.367396593673966,340.49491023505453,89.01054339010544,343.62243198223206C118.65369018653689,346.7499537294095,148.25628548256284,350.4060707014621,177.85888077858877,326.32880251712004C207.46147607461475,302.251534332778,237.0640713706407,250.44088099204143,266.6666666666667,226.4059004256894C296.2692619626926,202.3709198593374,325.8718572587186,206.11161206736998,355.5150040551501,210.52890616324262C385.1581508515815,214.94620025911533,414.84184914841853,220.04009624282807,444.4849959448499,225.33882287617993C474.1281427412814,230.63754950953174,503.7307380373074,236.14110679252266,533.3333333333334,240.96189524338328C562.9359286293592,245.78268369424393,592.5385239253852,249.92070331297427,622.1411192214111,254.06334813992225C651.7437145174372,258.20599296687027,681.3463098134631,262.3532630020359,710.9894566098947,266.81680918008504C740.6326034063262,271.28035535813433,770.316301703163,276.0601776790672,785.1581508515816,278.4500888395335L800,280.84L800,0L785.1581508515815,2.7621302979826026C770.316301703163,5.524260595965205,740.6326034063262,11.04852119193041,710.9894566098947,17.259515084212477C681.3463098134631,23.47050897649454,651.7437145174372,30.368236165093464,622.1411192214113,36.900571904497504C592.5385239253852,43.43290764390154,562.9359286293592,49.59985193411068,533.3333333333333,56.25134184712196C503.7307380373074,62.90283176013326,474.1281427412814,70.0388672959467,444.48499594484997,76.95465482139552C414.84184914841853,83.87044234684436,385.1581508515815,90.56598186192856,355.51500405515003,96.86507495835649C325.8718572587186,103.16416805478438,296.2692619626926,109.066814732556,266.6666666666667,141.03424764019988C237.0640713706407,173.00168054784376,207.46147607461475,231.03389968535998,177.85888077858877,261.30410142513415C148.25628548256284,291.5743031649084,118.65369018653689,294.0824875069406,89.01054339010544,296.18982047010917C59.367396593673966,298.2971534332778,29.683698296836983,300.0036350175828,14.841849148418492,300.8568758097353L0,301.7101166018878Z" fill="#1b9e77" title="Mobile Games"/> <path class="layer" d="M0,299.7101166018878L14.841849148418492,298.8568758097353C29.683698296836983,298.0036350175828,59.367396593673966,296.2971534332778,89.01054339010544,280.7825652415325C118.65369018653689,265.26797704978713,148.25628548256284,235.9452822506015,177.85888077858877,234.2286692578197C207.46147607461475,232.51205626503793,237.0640713706407,258.40152507866,266.6666666666667,287.7541736072552C296.2692619626926,317.10682213585045,325.8718572587186,349.9226503794188,355.5150040551501,369.67833425874505C385.1581508515815,389.4340181380714,414.84184914841853,396.12955765315564,444.4849959448499,403.04534517860446C474.1281427412814,409.9611327040532,503.7307380373074,417.09716823986673,533.3333333333334,423.748658152878C562.9359286293592,430.40014806588925,592.5385239253852,436.5670923560985,622.1411192214111,443.09942809550245C651.7437145174372,449.6317638349065,681.3463098134631,456.52949102350544,710.9894566098947,462.7404849157875C740.6326034063262,468.9514788080696,770.316301703163,474.4757394040348,785.1581508515816,477.2378697020174L800,480L800,389.55999999999995L785.1581508515815,386.5247621691653C770.316301703163,383.4895243383305,740.6326034063262,377.4190486766611,710.9894566098947,371.5608920969831C681.3463098134631,365.70273551730514,651.7437145174372,360.0568980196187,622.1411192214113,354.2923468443457C592.5385239253852,348.5277956690727,562.9359286293592,342.64453081621315,533.3333333333333,336.23927817878956C503.7307380373074,329.83402554136586,474.1281427412814,322.9067851193781,444.48499594484997,316.49580603368497C414.84184914841853,310.0848269479918,385.1581508515815,304.19010919859335,355.51500405515003,284.96522302424574C325.8718572587186,265.74033684989814,296.2692619626926,233.1852822506015,266.6666666666667,204.45901906348323C237.0640713706407,175.73275587636496,207.46147607461475,150.83528410142512,177.85888077858877,153.69013881177122C148.25628548256284,156.54499352211735,118.65369018653689,187.1521747177494,89.01054339010544,204.6075883768277C59.367396593673966,222.06300203590595,29.683698296836983,226.3666481584305,14.841849148418492,228.51847121969274L0,230.670294280955Z" fill="#7570b3" title="PC Games"/> <g class="x axis" transform="translate(0,480)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" style="stroke-width: 1px; font-size: 10px; font-family: Arial, Helvetica;"> <path class="domain" stroke="#000" d="M0.5,6V0.5H800.5V6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <g class="tick" opacity="1" transform="translate(0.5304136253041363,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" x="12" y="9" dy="0.71em">2012</text> </g> <g class="tick" opacity="1" transform="translate(89.58150851581509,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2013</text> </g> <g class="tick" opacity="1" transform="translate(178.38929440389293,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2014</text> </g> <g class="tick" opacity="1" transform="translate(267.1970802919708,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2015</text> </g> <g class="tick" opacity="1" transform="translate(356.0048661800487,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2016</text> </g> <g class="tick" opacity="1" transform="translate(445.0559610705596,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2017</text> </g> <g class="tick" opacity="1" transform="translate(533.8637469586374,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2018</text> </g> <g class="tick" opacity="1" transform="translate(622.6715328467153,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2019</text> </g> <g class="tick" opacity="1" transform="translate(711.4793187347932,0)"> <line stroke="#000" y2="6" style="shape-rendering: crispedges; fill: none; stroke: rgb(204, 204, 204);"/> <text fill="#000" y="9" dy="0.71em">2020</text> </g> </g> <defs> <path id="path-0" d="M0,186.68661854525263L14.841849148418492,184.9609753840459C29.683698296836983,183.23533222283913,59.367396593673966,179.78404590042567,89.01054339010544,189.97700166574123C118.65369018653689,200.16995743105682,148.25628548256284,224.0071552841014,177.85888077858877,248.89515639459557C207.46147607461475,273.7831575050897,237.0640713706407,299.7219618730335,266.6666666666667,300.76021099389226C296.2692619626926,301.798460114751,325.8718572587186,277.93615398852484,355.5150040551501,268.75215435868955C385.1581508515815,259.5681547288543,414.84184914841853,265.06246159540996,444.4849959448499,270.9173144549324C474.1281427412814,276.7721673144549,503.7307380373074,282.9875661669443,533.3333333333334,288.6005867110864C562.9359286293592,294.21360725522857,592.5385239253852,299.2242494910235,622.1411192214111,304.177847492134C651.7437145174372,309.1314454932445,681.3463098134631,314.02799925967054,710.9894566098947,319.1888506385341C740.6326034063262,324.3497020173977,770.316301703163,329.7748510086988,785.1581508515816,332.48742550434946L800,335.2"/> <path id="path-1" d="M0,318.5035868961687L14.841849148418492,318.726698130668C29.683698296836983,318.9498093651674,59.367396593673966,319.39603183416614,89.01054339010544,319.90612622617056C118.65369018653689,320.41622061817503,148.25628548256284,320.9901869331852,177.85888077858877,293.81645197112715C207.46147607461475,266.64271700906903,237.0640713706407,211.7212807699426,266.6666666666667,183.72007403294467C296.2692619626926,155.7188672959467,325.8718572587186,154.63789006107717,355.5150040551501,153.69699056079955C385.1581508515815,152.75609106052192,414.84184914841853,151.9552692948362,444.4849959448499,151.1467388487877C474.1281427412814,150.3382084027392,503.7307380373074,149.52196927632795,533.3333333333334,148.60661854525264C562.9359286293592,147.6912678141773,592.5385239253852,146.6768054784379,622.1411192214111,145.4819600222099C651.7437145174372,144.28711456598185,681.3463098134631,142.91188598926522,710.9894566098947,142.03816213214878C740.6326034063262,141.16443827503235,770.316301703163,140.79221913751618,785.1581508515816,140.6061095687581L800,140.42"/> <path id="path-2" d="M0,265.1902054414214L14.841849148418492,263.68767351471405C29.683698296836983,262.1851415880067,59.367396593673966,259.18007773459186,89.01054339010544,242.6950768091801C118.65369018653689,226.21007588376827,148.25628548256284,196.24513788635943,177.85888077858877,193.95940403479548C207.46147607461475,191.67367018323156,237.0640713706407,217.06714047751248,266.6666666666667,246.1065963353692C296.2692619626926,275.14605219322596,325.8718572587186,307.8314936146585,355.5150040551501,327.3217786414954C385.1581508515815,346.8120636683323,414.84184914841853,353.1071923005737,444.4849959448499,359.77057560614463C474.1281427412814,366.4339589117157,503.7307380373074,373.4655968906163,533.3333333333334,379.9939681658338C562.9359286293592,386.5223394410513,592.5385239253852,392.54744401258563,622.1411192214111,398.6958874699241C651.7437145174372,404.84433092726266,681.3463098134631,411.1161132704053,710.9894566098947,417.1506885063853C740.6326034063262,423.18526374236535,770.316301703163,428.9826318711826,785.1581508515816,431.8813159355914L800,434.78"/> </defs> <text dy="0.5ex" class="label"> <textPath href="#path-0" startOffset="6%" text-anchor="middle" style="font-size: 25px; font-family: Arial, Helvetica; font-weight: normal; fill: white;">Console</textPath> </text> <text dy="0.5ex" class="label"> <textPath href="#path-1" startOffset="83%" text-anchor="middle" style="font-size: 90px; font-family: Arial, Helvetica; font-weight: normal; fill: white;">Mobile</textPath> </text> <text dy="0.5ex" class="label"> <textPath href="#path-2" startOffset="23%" text-anchor="middle" style="font-size: 30px; font-family: Arial, Helvetica; font-weight: normal; fill: white;">PC</textPath> </text> </g> </svg> </div> </body> </html>