D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
viajes por barrio (BA Taxi)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>viajes por barrio (BATaxi)</title> </head> <body> <table width="400px"> <tr> <td><h2>Origen</h2></td> <td align="right"><h2>Destino</h2></td> </tr> </table> <svg width="400" height="520" xmlns="https://www.w3.org/2000/svg"><g transform="translate(0,10)"><g><path class="link" d="M5,40.15055248618785C200,40.15055248618785 200,40.15055248618782 395,40.15055248618782" style="stroke-width: 80.3011; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>709</title></path><path class="link" d="M5,239.44060773480663C200,239.44060773480663 200,219.58701657458562 395,219.58701657458562" style="stroke-width: 22.7652; fill: none; stroke: rgb(122, 191, 105); stroke-opacity: 0.4;"><title>201</title></path><path class="link" d="M5,384.1160220994475C200,384.1160220994475 200,145.42541436464086 395,145.42541436464086" style="stroke-width: 20.8398; fill: none; stroke: rgb(191, 105, 105); stroke-opacity: 0.4;"><title>184</title></path><path class="link" d="M5,339.9682320441989C200,339.9682320441989 200,125.09530386740329 395,125.09530386740329" style="stroke-width: 19.8204; fill: none; stroke: rgb(174, 191, 105); stroke-opacity: 0.4;"><title>175</title></path><path class="link" d="M5,295.707182320442C200,295.707182320442 200,105.33149171270716 395,105.33149171270716" style="stroke-width: 19.7072; fill: none; stroke: rgb(174, 105, 191); stroke-opacity: 0.4;"><title>174</title></path><path class="link" d="M5,88.56906077348067C200,88.56906077348067 200,199.93646408839774 395,199.93646408839774" style="stroke-width: 16.5359; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>146</title></path><path class="link" d="M5,181.19198895027625C200,181.19198895027625 200,361.9406077348066 395,361.9406077348066" style="stroke-width: 15.7431; fill: none; stroke: rgb(191, 156, 105); stroke-opacity: 0.4;"><title>139</title></path><path class="link" d="M5,196.93508287292818C200,196.93508287292818 200,422.1477900552486 395,422.1477900552486" style="stroke-width: 15.7431; fill: none; stroke: rgb(191, 156, 105); stroke-opacity: 0.4;"><title>139</title></path><path class="link" d="M5,165.732044198895C200,165.732044198895 200,87.88950276243092 395,87.88950276243092" style="stroke-width: 15.1768; fill: none; stroke: rgb(191, 156, 105); stroke-opacity: 0.4;"><title>134</title></path><path class="link" d="M5,312.8093922651933C200,312.8093922651933 200,286.72651933701655 395,286.72651933701655" style="stroke-width: 14.4972; fill: none; stroke: rgb(174, 105, 191); stroke-opacity: 0.4;"><title>128</title></path><path class="link" d="M5,424.2430939226519C200,424.2430939226519 200,447.26795580110496 395,447.26795580110496" style="stroke-width: 14.4972; fill: none; stroke: rgb(191, 105, 156); stroke-opacity: 0.4;"><title>128</title></path><path class="link" d="M5,448.6837016574585C200,448.6837016574585 200,163.03729281767954 395,163.03729281767954" style="stroke-width: 14.384; fill: none; stroke: rgb(105, 191, 139); stroke-opacity: 0.4;"><title>127</title></path><path class="link" d="M5,117.22375690607737C200,117.22375690607737 200,311.110497237569 395,311.110497237569" style="stroke-width: 14.2707; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>126</title></path><path class="link" d="M5,356.78729281767954C200,356.78729281767954 200,325.15469613259665 395,325.15469613259665" style="stroke-width: 13.8177; fill: none; stroke: rgb(174, 191, 105); stroke-opacity: 0.4;"><title>122</title></path><path class="link" d="M5,103.46270718232046C200,103.46270718232046 200,260.0538674033149 395,260.0538674033149" style="stroke-width: 13.2514; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>117</title></path><path class="link" d="M5,211.43232044198894C200,211.43232044198894 200,471.1422651933701 395,471.1422651933701" style="stroke-width: 13.2514; fill: none; stroke: rgb(191, 156, 105); stroke-opacity: 0.4;"><title>117</title></path><path class="link" d="M5,257.22237569060775C200,257.22237569060775 200,273.0787292817679 395,273.0787292817679" style="stroke-width: 12.7983; fill: none; stroke: rgb(122, 191, 105); stroke-opacity: 0.4;"><title>113</title></path><path class="link" d="M5,472.2182320441989C200,472.2182320441989 200,397.9337016574585 395,397.9337016574585" style="stroke-width: 12.6851; fill: none; stroke: rgb(105, 139, 191); stroke-opacity: 0.4;"><title>112</title></path><path class="link" d="M5,400.7651933701657C200,400.7651933701657 200,237.19889502762427 395,237.19889502762427" style="stroke-width: 12.4586; fill: none; stroke: rgb(191, 105, 105); stroke-opacity: 0.4;"><title>110</title></path><path class="link" d="M5,269.73756906077347C200,269.73756906077347 200,493.88397790055245 395,493.88397790055245" style="stroke-width: 12.232; fill: none; stroke: rgb(122, 191, 105); stroke-opacity: 0.4;"><title>108</title></path><path class="link" d="M5,130.36187845303868C200,130.36187845303868 200,348.0662983425414 395,348.0662983425414" style="stroke-width: 12.0055; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>106</title></path><path class="link" d="M5,142.25414364640886C200,142.25414364640886 200,385.7016574585635 395,385.7016574585635" style="stroke-width: 11.779; fill: none; stroke: rgb(105, 191, 191); stroke-opacity: 0.4;"><title>104</title></path><path class="link" d="M5,494.2803867403315C200,494.2803867403315 200,175.94889502762427 395,175.94889502762427" style="stroke-width: 11.4392; fill: none; stroke: rgb(122, 105, 191); stroke-opacity: 0.4;"><title>101</title></path></g><g><g class="node" transform="translate(0,373.69613259668506)"><rect height="33.29834254143646" width="5"><title>ALMAGRO 294</title></rect><text x="11" y="16.64917127071823" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">ALMAGRO</text></g><g class="node" transform="translate(0,158.14364640883977)"><rect height="59.91436464088398" width="5"><title>BALVANERA 529</title></rect><text x="11" y="29.95718232044199" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">BALVANERA</text></g><g class="node" transform="translate(0,330.05801104972375)"><rect height="33.63812154696133" width="5"><title>BELGRANO 297</title></rect><text x="11" y="16.819060773480665" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">BELGRANO</text></g><g class="node" transform="translate(0,228.05801104972375)"><rect height="47.79558011049724" width="5"><title>CABALLITO 422</title></rect><text x="11" y="23.89779005524862" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">CABALLITO</text></g><g class="node" transform="translate(0,441.4917127071823)"><rect height="14.383977900552486" width="5"><title>COLEGIALES 127</title></rect><text x="11" y="7.191988950276243" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">COLEGIALES</text></g><g class="node" transform="translate(0,0)"><rect height="148.14364640883977" width="5"><title>PALERMO 1,308</title></rect><text x="11" y="74.07182320441989" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">PALERMO</text></g><g class="node" transform="translate(0,465.8756906077348)"><rect height="12.685082872928177" width="5"><title>RECOLETA 112</title></rect><text x="11" y="6.342541436464089" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">RECOLETA</text></g><g class="node" transform="translate(0,488.560773480663)"><rect height="11.439226519337018" width="5"><title>SAN NICOLAS 101</title></rect><text x="11" y="5.719613259668509" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">SAN NICOLAS</text></g><g class="node" transform="translate(0,285.85359116022096)"><rect height="34.204419889502766" width="5"><title>VILLA CRESPO 302</title></rect><text x="11" y="17.102209944751383" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">VILLA CRESPO</text></g><g class="node" transform="translate(0,416.9944751381215)"><rect height="14.497237569060774" width="5"><title>VILLA URQUIZA 128</title></rect><text x="11" y="7.248618784530387" dy=".35em" text-anchor="start" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">VILLA URQUIZA</text></g><g class="node" transform="translate(395,253.42817679558007)"><rect height="40.546961325966855" width="5" style="fill: rgb(102, 102, 102);"><title>ALMAGRO 358</title></rect><text x="-6" y="20.273480662983427" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">ALMAGRO</text></g><g class="node" transform="translate(395,342.0635359116022)"><rect height="27.748618784530386" width="5" style="fill: rgb(102, 102, 102);"><title>BALVANERA 245</title></rect><text x="-6" y="13.874309392265193" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">BALVANERA</text></g><g class="node" transform="translate(395,303.97513812154693)"><rect height="28.08839779005525" width="5" style="fill: rgb(102, 102, 102);"><title>BELGRANO 248</title></rect><text x="-6" y="14.044198895027625" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">BELGRANO</text></g><g class="node" transform="translate(395,191.66850828729278)"><rect height="51.75966850828729" width="5" style="fill: rgb(102, 102, 102);"><title>CABALLITO 457</title></rect><text x="-6" y="25.879834254143645" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">CABALLITO</text></g><g class="node" transform="translate(395,487.76795580110496)"><rect height="12.232044198895029" width="5" style="fill: rgb(102, 102, 102);"><title>FLORES 108</title></rect><text x="-6" y="6.116022099447514" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">FLORES</text></g><g class="node" transform="translate(395,-2.842170943040401e-14)"><rect height="181.6685082872928" width="5" style="fill: rgb(102, 102, 102);"><title>PALERMO 1,604</title></rect><text x="-6" y="90.8342541436464" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">PALERMO</text></g><g class="node" transform="translate(395,464.51657458563534)"><rect height="13.251381215469614" width="5" style="fill: rgb(102, 102, 102);"><title>RECOLETA 117</title></rect><text x="-6" y="6.625690607734807" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">RECOLETA</text></g><g class="node" transform="translate(395,379.81215469613255)"><rect height="24.464088397790057" width="5" style="fill: rgb(102, 102, 102);"><title>RETIRO 216</title></rect><text x="-6" y="12.232044198895029" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">RETIRO</text></g><g class="node" transform="translate(395,414.27624309392263)"><rect height="15.743093922651934" width="5" style="fill: rgb(102, 102, 102);"><title>SAN NICOLAS 139</title></rect><text x="-6" y="7.871546961325967" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">SAN NICOLAS</text></g><g class="node" transform="translate(395,440.0193370165746)"><rect height="14.497237569060774" width="5" style="fill: rgb(102, 102, 102);"><title>VILLA URQUIZA 128</title></rect><text x="-6" y="7.248618784530387" dy=".35em" text-anchor="end" style="font-size: 11px; font-family: Arial, Helvetica; pointer-events: none;">VILLA URQUIZA</text></g></g></g></svg> </body> </html>