Skip to content

Instantly share code, notes, and snippets.

@nellalela

nellalela/drawPresident.ts

Created March 1, 2018 22:09
Show Gist options
  • Save nellalela/d2cc3c51049978a69ce0935c56b97ffc to your computer and use it in GitHub Desktop.
Save nellalela/d2cc3c51049978a69ce0935c56b97ffc to your computer and use it in GitHub Desktop.
Download ZIP
si sale
Raw
drawPresident.ts
drawPresident(){
//div para los tooltips
var div = d3.select("#graph").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Set the margins
var margin = {top: 60, right: 100, bottom: 20, left: 80},
width = 850 - margin.left - margin.right,
height = 370 - margin.top - margin.bottom;
// Parse the month variable
var parseMonth = d3.timeParse("%d/%m/%y");
var formatMonth = d3.timeFormat("%b %d, '%y");
//array colores
var scaleColors = ["#AF2622", "#009933", "#0000cc", "#6600cc", "#ff9900", "#ffcc00", "#ffcc00"];
//color function pulls from array of colors stored in color.js
var color = d3.scaleOrdinal().range(scaleColors);
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the line
var valueLine = d3.line()
.x(function(d) { return x(d.fecha); })
.y(function(d) { return y(+d.votacionEfectiva); })
// Create the svg canvas in the "graph" div
var svg = d3.select("#graph")
.append("svg")
.style("width", width + margin.left + margin.right + "px")
.style("height", height + margin.top + margin.bottom + "px")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")
.attr("class", "svg");
// Import the CSV data
d3.csv("./assets/encuestas.csv", function(error, data) {
if (error) throw error;
// Format the data
data.forEach(function(d) {
d.fecha = parseMonth(d.fecha);
d.votacionEfectiva = +d.votacionEfectiva;
d.encuestadora = d.encuestadora;
d.candidato = d.candidato;
});
var nest = d3.nest()
.key(function(d){
return d.encuestadora;
})
.key(function(d){
return d.candidato;
})
.entries(data)
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.fecha; }));
y.domain([0, d3.max(data, function(d){return d.votacionEfectiva})]);
// Set up the x axis
var xaxis = svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class", "x axis")
.call(d3.axisBottom(x));
//.ticks(d3.time)
//.tickSize(0, 0)
//.tickFormat(d3.timeFormat("%d/%B/%y"))
//.tickSizeInner(0)
//.tickPadding(10));
// Add a label to the x axis
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(0) + ")")
.style("text-anchor", "middle")
.text("Presidencial");
// Add the Y Axis
var yaxis = svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
//.ticks(5)
//.tickSizeInner(0)
//.tickPadding(6)
//.tickSize(0, 0));
// Add a label to the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 60)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Votación Efectiva %")
.attr("class", "y axis label");
// Create a dropdown
var menu = d3.select("#dropdown")
menu
.append("select")
.selectAll("option")
.data(nest)
.enter()
.append("option")
.attr("value", function(d){
return d.key;
})
.text(function(d){
return d.key;
})
// Function to create the initial graph
var initialGraph = function(encuestadora){
// Filter the data to include only fruit of interest
var selectEncuestadora = nest.filter(function(d){
return d.key == encuestadora;
})
var selectEncuestadoraGroups = svg.selectAll(".encuestadoraGroups")
.data(selectEncuestadora, function(d){
return d ? d.key : this.key;
})
.enter()
.append("g")
.attr("class", "encuestadoraGroups")
var initialPath = selectEncuestadoraGroups.selectAll(".line")
.data(function(d) { return d.values; })
.enter()
.append("path")
.style("fill","none" )
.style("stroke",function(d) { return color(d.key); } )
.style("stroke-width","2px" )
initialPath
.attr("d", function(d){
return valueLine(d.values)
})
.attr("class", "line")
var dots= data.filter(function(d){
return d.encuestadora == encuestadora;});
var putDots = selectEncuestadoraGroups.selectAll("circle")
.data(dots)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.fecha); })
.attr("cy", function(d) { return y(d.votacionEfectiva); })
.style("fill", function(d,i,j) { return color(d.candidato); })
.style("stroke", "white")
.style("stroke-width","1px" )
putDots.on("mouseover", function(d){
div.transition()
.duration(200)
.style("opacity", .9)
.style("display", "block")
.style('box-shadow', "0 0 5px #999")
.style('font-size', "12px")
.style('padding', "10px")
.style('text-align', "center")
.style('width', "190px")
.style('line-heigth', "140%")
.style('font-weight', "600")
.style('color', "#fff")
.style('background', "#000")
.style('border-radius', "2px")
div.html(d.candidato + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: " + d.votacionEfectiva + "%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
putDots.on('mouseout', function(d: any) {
div.style('display', 'none'); // NEW
});
}
// Create initial graph
initialGraph("El Financiero")
// Update the data
var updateGraph = function(encuestadora){
// Filter the data to include only poll of interest
var selectEncuestadora = nest.filter(function(d){
return d.key == encuestadora;
})
// Select all of the grouped elements and update the data
var selectEncuestadoraGroups = svg.selectAll(".encuestadoraGroups")
.data(selectEncuestadora)
// Select all the lines and transition to new positions
selectEncuestadoraGroups.selectAll("path.line")
.data(function(d){
return (d.values);
})
.transition()
.duration(1000)
.attr("d", function(d){
return valueLine(d.values)
})
var dots= data.filter(function(d){
return d.encuestadora == encuestadora;});
//select dots and update
var updateDots = selectEncuestadoraGroups.selectAll("circle")
.data(dots)
updateDots.exit().remove()
updateDots.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.fecha); })
.attr("cy", function(d) { return y(d.votacionEfectiva); })
.style("fill", function(d) { return color(d.candidato); })
.style("stroke", "white")
.style("stroke-width","2px" )
.on("mouseover", function(d){
div.transition()
.duration(200)
.style("opacity", .9)
.style("display", "block")
.style('box-shadow', "0 0 5px #999")
.style('font-size', "12px")
.style('padding', "10px")
.style('text-align', "center")
.style('width', "190px")
.style('line-heigth', "140%")
.style('font-weight', "600")
.style('color', "#fff")
.style('background', "#000")
.style('border-radius', "2px")
div.html(d.candidato + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: " + d.votacionEfectiva + "%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on('mouseout', function(d: any) {
div.style('display', 'none'); // NEW
});
updateDots.transition()
.duration(1000)
.attr("cx", function(d) { return x(d.fecha); })
.attr("cy", function(d) { return y(d.votacionEfectiva); })
.style("fill", function(d) { return color(d.candidato); })
.style("stroke", "white")
.style("stroke-width","2px" )
.on("mouseover", function(d){
div.transition()
.duration(200)
.style("opacity", .9)
.style("display", "block")
.style('box-shadow', "0 0 5px #999")
.style('font-size', "12px")
.style('padding', "10px")
.style('text-align', "center")
.style('width', "190px")
.style('line-heigth', "140%")
.style('font-weight', "600")
.style('color', "#fff")
.style('background', "#000")
.style('border-radius', "2px")
div.html(d.candidato + "<br>"+formatMonth(d.fecha) + "<br>"+ d.partido + "<br>" + "Votación Efectiva: " + d.votacionEfectiva + "%")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on('mouseout', function(d: any) {
div.style('display', 'none'); // NEW
});
}
// Run update function when dropdown selection changes
menu.on('change', function(){
// Find which poll was selected from the dropdown
var selectedEncuestadora = d3.select(this)
.select("select")
.property("value")
// Run update function with the selected encuestadora
updateGraph(selectedEncuestadora)
});
// leyendas con efecto mouseover
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(90," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 10)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 16)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d });
legend.on("mouseover", function(type) {
d3.selectAll(".legend")
.style("opacity", 0.1);
d3.select(this)
.style("opacity", 1);
d3.selectAll("circle")
.style("opacity", 0.01)
.filter(function(d) { return d["candidato"] == type; })
.style("opacity", 1)
d3.selectAll("path.line")
.style("opacity", 0.01)
.filter(function(d) { return d.key == type; })
.style("opacity", 1)
})
.on("mouseout", function(type) {
d3.selectAll(".legend")
.style("opacity", 1);
d3.selectAll("circle")
.style("opacity", 1)
d3.selectAll("path.line")
.style("opacity", 1);
});
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment