VA Asig 2

Este vis tiene leyendas a la derecha que están siendo recortadas por bl.ocks.org. Por favor pulsar este enlace para vista completa

<!DOCTYPE html>
<style>
form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
svg {
  font: 10px sans-serif;
}
.cuadrolegend {
   fill: none;
}
  
.fuentelegend {
   font: 15px sans-serif;
}
  
/*rect {
   fill: rgb(112,153,178);
}*/
  
</style>

<h1>Semáforos y accidentes</h1>

<p>No hay relación entre la cantidad de semáforos y la cantidad de accidentes que se puedan evitar.</p>

<p>Usaquén y las localidades orientales tuvieron un número similar de accidentes en 2016, a pesar de que estas últimas tienen la mayor cantidad de semáforos por área.</p>

<p>Por otra parte, las 2 regiones con más accidentalidad tienen una densidad de semáforos muy similar a la de Suba.</p>

<br/>

<g id="Occ" transform="translate(285,337)"><rect id="localidades.Occ" width="418" height="217" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.Occ"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.Occ"></use></clipPath></g>
   <text><tspan x="285" y="335">Occ</tspan></text>
  
  <g id="Centro1" transform="translate(285,98)"><rect id="localidades.Centro1" width="153" height="224" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.Centro1"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.Centro1"></use></clipPath></g>
   <text><tspan x="285" y="96">Centro1</tspan></text>
  
  <g id="Centro2" transform="translate(453,98)"><rect id="localidades.Centro2" width="250" height="224" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.Centro2"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.Centro2"></use></clipPath></g>
<text><tspan x="453" y="96">Centro2</tspan></text>

<g id="Este" transform="translate(285,14)"><rect id="localidades.Este" width="418" height="69" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.Este"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.Este"></use></clipPath></g>
<text><tspan x="285" y="12">Este</tspan></text>  
  
  <g id="SurOcc" transform="translate(718,358)"><rect id="localidades.SurOcc" width="380" height="217" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.SurOcc"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.SurOcc"></use></clipPath></g>
<text><tspan x="718" y="356">SurOcc</tspan></text>
  
  <g id="SurE" transform="translate(718,14)"><rect id="localidades.SurE" width="380" height="162" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.SurE"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.SurE"></use></clipPath></g>
<text><tspan x="718" y="12">SurE</tspan></text>
  
  <g id="SurC" transform="translate(718,191)"><rect id="localidades.SurC" width="380" height="152" fill="rgb(76, 146, 195)" horas="1758"></rect><clipPath id="clip-localidades.SurC"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#localidades.SurC"></use></clipPath></g>
<text><tspan x="718" y="189">SurC</tspan></text>
  
<g id="gLegend" transform="translate(1120,50)">
  <rect id="rectLegend" width="140" height="120" stroke="black" stroke-width="2" class="cuadrolegend"/>
  <g id="sampleVehiculo" transform="translate(10,10)">
    <rect id="rectVehiculo" width="75" height="25" class="cuadrolegend"/>
    <text><tspan x="35" y="17" class="fuentelegend">Vehículos</tspan></text>
    </g>
  <g id="samplePeatonal" transform="translate(10,50)">
    <rect id="rectPeatonal" width="75" height="25" class="cuadrolegend"/>
    <text><tspan x="35" y="17" class="fuentelegend">Peatonal</tspan></text>
  </g>
  <g id="sampleBiciusuarios" transform="translate(10,90)">
    <rect id="rectBiciusuarios" width="75" height="25" class="cuadrolegend"/>
    <text><tspan x="35" y="17" class="fuentelegend">Biciusuarios</tspan></text>
  </g>
</g>

<g id="gHeatLegend" transform="translate(1120,210)">
  <text><tspan x="0" y="0" class="fuentelegend">Núm Accidentes</tspan></text>
</g>
<g id="gHeatLegend" transform="translate(1120,220)">  
  <defs>
    <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:rgba(112,153,178,0.05)" />
      <stop offset="100%" style="stop-color:rgba(112,153,178,1)" />
    </linearGradient>
  </defs>
  <rect width="50" height="200" fill="url(#grad1)" />  
  <text><tspan x="60" y="200" class="fuentelegend">1500</tspan></text>
  <text><tspan x="60" y="14" class="fuentelegend">6300</tspan></text>
</g>

</svg>

<li>En cada intersección pueden haber semáforos para 1 o varios tipos de usuarios: vehículos, peatones y/o biciusuarios.</li>
<li>Las áreas de las regiones de la ciudad están a escala, para poder apreciar la densidad de semáforos en cada región. (Distribución aleatoria, no ha sido empleada información de longitud y latitud)</li>
<li>La intensidad de color en cada región refleja el número de accidentes en 2016.</li>

<p>(Fuentes de datos: <a href="https://www.datos.gov.co/Transporte/Semaforizaci-n-en-Bogota/ygqr-578p">Semáforos</a>, <a href="https://www.datos.gov.co/Transporte/2016-ACCIDENTES-DE-TR-NSITO-BOGOT-/79fi-zm8c">Accidentes 2016</a>. Static code extracted from <a href='https://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='https://bl.ocks.org/mbostock/4063582'>Treemap</a>)</p>

https://d3js.org/d3.v4.js