D3 Examples - Visualização dos Dados de Assassinatos de LGBT no Estado de São Paulo em 2015

Visualização dos Dados de Assassinatos de LGBT no Estado de São Paulo em 2015
Trabalho final da disciplina Visualização da Informação ministrada pelo Departamento de Computação na Faculdade de Ciências – Universidade Estadual Paulista (UNESP), Bauru, SP, Brasil.
Aluno: Adriano Jorge S. Arrigo
Professor Responsável: José Remo Ferreira Brega
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Map Projections</title>
<style>
​
body {
  background: #FDEAEE;
}
​
/*@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}*/
​
h2 {
    font-family: 'SansusWebissimoRegular';
    font-size: 45px;
    position:absolute;
    /*top: 0px;
    left: 0px;*/
    line-height: 45px; /*espaçamento entre as linhas*/
    padding-left: 20px;
    letter-spacing: -.010rem;
    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
  }
​
.resumo {
    font-family: helvetica;
    text-align: justify;
    text-justify: inter-word;
    font-size: 15px;
    text-align:justify-all;
    position:absolute;
 /*   font-style: italic;*/
   /* color: #FFFFFF;*/
    top: 400px;
    left: 20px;
    line-height: 20px; /*espaçamento entre as linhas*/
    font-weight: 300;
    /*padding-right: 1650px;
    padding-left: 20px;
    padding-top: 425px;*/
    width: 15%; /*tamanho da caixa da div percentual à pag.*/
    height: 15%;
    letter-spacing: .05rem;
/*    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
  }
​
​
​
​
/*svg {
  font: 9px Helvetica;
  stroke-opacity: .4;
}*/
​
.foreground path {
  fill: none;
  stroke: #FF2C00; /*azul linhas acessas*/
 /* stroke-width: 1.5px;*/
stroke-opacity: .4;
  stroke-width: 1.5px;
}
​
​
​
.background path {
fill: none;
  stroke: none;
  /*stroke-width: 20px;
  pointer-events: stroke;*/
 /* pointer-events: stroke;
  stroke-width: 2px;*/
}
​
.foreground path.inactive {
  stroke: #ccc;
  stroke-opacity: .5;
  stroke-width: 1px;
}
​
​
.axis .title {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
​
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.axis text {
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; /*detalhe em branco dos titulos do primeiro axis*/
  stroke-opacity: .9;
  font-family: 'Helvetica';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .05rem;
​
}
​
.label {
  -webkit-transition: fill 125ms linear;
}
​
.active .label:not(.inactive) {
  font-weight: bold;
}
​
.label.inactive {
  fill: #ccc;
​
}
​
.foreground path.inactive {
  stroke: #ccc;
  stroke-opacity: .2;
  stroke-width: 1px;
}
​
​
</style>
​
​
​
<body>
  <title> Visualização dos Dados de Assassinatos de LGBT no Estado de São Paulo em 2015 </title>
  <h2>
​
   VISUALIZAÇÃO<br>
    DOS DADOS DE<br>
    ASSASSINATOS<br>
    DE LGBT<br>
    NO ESTADO DE<br>
    SÃO PAULO<br>
    EM 2015<br>
​
  </h2>
​
<div class="resumo">
​
    Esta página apresenta os dados de homicídio da população LGBT do Estado de São Paulo. Os dados foram extraídos do Relatório de Assassinato de Homossexuais no Brasil 2015. O estado de São Paulo  foi escolhido por conter 55 mortes,  sendo este o estado mais violento disparadamente. Os dados foram dispostos através do uso de um gráfico de coordenadas paralelas interativo através de uma ferramenta para construção de Visualizações de Dados, o D3.
</div>
​
<script src="//d3js.org/d3.v3.min.js"></script>
​
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/sansus-webissimo" type="text/css"/>
​
<!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/carlito" type="text/css"/>  -->
​
<script>
​
var margin = {top: 30, right: 80, bottom: 20, left: 550},
    width = 1250,
    height = 850;
​
var dimensions = [
  {
    name: "nome",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  },
  {
    name: "cidade",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  },
  {
    name: "Idade",
    scale: d3.scale.ordinal().rangePoints([height,0]),
    // .domain([0, height])
    // .range([0, height]),
    type: String
  },
  {
    name: "GLT",
    scale: d3.scale.ordinal().rangePoints([height,0]),
    type: String
  },
  {
    name: "Cor",
    scale: d3.scale.ordinal().rangePoints([height,0]),
    type: String
  },
  {
    name: "Profissão",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  },
  {
    name: "Causa Mortis",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  },
   {
    name: "Golpes",
    scale: d3.scale.ordinal().rangePoints([2, height]),
    type: String
  },
  {
    name: "Local da Morte",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  }
];
​
var x = d3.scale.ordinal()
    .domain(dimensions.map(function(d) { return d.name; }))
    .rangePoints([0, width]);
​
var line = d3.svg.line()
    .defined(function(d) { return !isNaN(d[1]); });
​
var yAxis = d3.svg.axis()
    .orient("left");
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // nao é esse
​
var dimension = svg.selectAll(".dimension")
    .data(dimensions)
  .enter().append("g")
    .attr("class", "dimension")
    .attr("transform", function(d) { return "translate(" + x(d.name) + ")"; });
​
d3.tsv("projections.tsv", function(error, data) {
  if (error) throw error;
​
  dimensions.forEach(function(dimension) {
    dimension.scale.domain(dimension.type === Number
        ? d3.extent(data, function(d) { return +d[dimension.name]; })
        : data.map(function(d) { return d[dimension.name]; }).sort());
  });
​
  dimension.append("g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); })
    .append("text")
      .attr("class", "title")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d.name; });
​
  svg.append("g")
      .attr("class", "background")
    .selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("d", draw);
​
  svg.append("g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("d", draw);
​
​
​
  // Rebind the axis data to simplify mouseover.
  svg.select(".axis").selectAll("text:not(.title)")
      .attr("class", "label")
      .data(data, function(d) { return d.nome || d; });
​
  var projection = svg.selectAll(".axis text,.background path,.foreground path")
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);
​
  function mouseover(d) {
    svg.classed("active", true);
    projection.classed("inactive", function(p) { return p !== d; });
    projection.filter(function(p) { return p === d; }).each(moveToFront);
  }
​
  function mouseout(d) {
    svg.classed("active", false);
    projection.classed("inactive", false);
  }
​
  function moveToFront() {
    this.parentNode.appendChild(this);
  }
});
​
function draw(d) {
  return line(dimensions.map(function(dimension) {
    return [x(dimension.name), dimension.scale(d[dimension.name])];
  }));
}
​
</script>
​
    