Davo Galavotti davo

Moebio Framework

Remake del gráfico publicado en el artículo de La Nación: «Cómo variaron los resultados del FPV entre las PASO de 2011 y las de 2015»

Basado en «D3 Slopegraph I» de @zbjornson

Click to perturb or drag the nodes!

This example demonstrates the flexibility of D3's force layout. By using position Verlet integration, it is easy to add custom forces to a layout. In this example, the nodes are clustered around four foci using additional forces: the odd nodes are pushed down, the even nodes are pushed up, and a similar bisecting force is applied laterally. These custom forces are based purely on the index of the node, but they could just as easily be derived from properties of data!

Click to add nodes! Nodes near the cursor will be linked to the new node.

D3's force layout uses the Barnes–Hut approximation to compute repulsive charge forces between all nodes efficiently. Links are implemented as geometric constraints on top of position Verlet integration, offering greater stability. A virtual spring between each node and the center of the chart prevents nodes from drifting into space.

	// ----
	// libsass (v3.2.5)
	// ----

	// Crear la clases y poner un borde en color RGBA.

	$infraestructura: #cca2fc;
	$salud: #2bfda6;
	$educacion: #88ffff;

	// ----
	// libsass (v3.2.5)
	// ----

	// Crear la clases y poner un borde en color RGBA.

	$infraestructura: rgba(204, 162, 252,.5);
	$salud: rgba(43, 253, 166,.5);
	$educacion: rgba(136, 255, 255,.5);

	p {
	margin: 0 0 20px; /* un poco más de espacio entre parrafos */
	font-size: 1.25em; /* un poco más de grande la tipografía para leer mejor */
	line-height: 1.6em; /* un poco más altura de línea para que sea más claro el foco línea por línea */
	color: #444; /* un color más oscuro para el texto del parrafo */
	}

	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Debug alignments with CSS</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>

	.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey effect - Line</title>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>