comet chart - input your own data

README.md

forked from zanarmstrong's block: comet chart (prototype)

forked from zanarmstrong's block: comet chart - input your own data

forked from zanarmstrong's block: comet chart - input your own data

cometChart.css

body {
	font-family: sans-serif;
}

.segments polygon {
	shape-rendering: geometricPrecision;
}

.axis path {
	stroke: grey;
	stroke-width: 1px;
}
.axis line {
    fill: none;
    stroke: #727272;
    shape-rendering: crispEdges;
    stroke-width: .2;
}

.axis text {
    font-size: 11px;
    fill: #727272;
}

.label {
	fill: grey;
	stroke: none;
	font-size: 16px;
}

cometChart.js

// define variables
var margin = {
		top: 0,
		right: 20,
		bottom: 50,
		left: 70
	},
	width = 500,
	height = 400;

var formatAsNumber = d3.format(",.0f")

var segmentName = 'birthweight';

// standard insertion of svg element
var svg = d3.select("#chart")
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom);

var segments = svg.append("g")
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr("class", "segments");

// add labels
segments.append("text")
	.attr("class", "x label")
	.attr("x", width / 2)
	.attr("y", height + 40)
	.style("text-anchor", "middle")
	.text(mapping.titleWeight);

segments.append("text")
	.attr("transform", "rotate(-90)")
	.attr("class", "y label")
	.attr("x", -height / 2)
	.attr("y", -40)
	.style("text-anchor", "middle")
	.text(mapping.titleValue);

// call and use data
d3.csv("data.csv", function(error, data) {
	if (error) return console.error('error');

	// filter by filter category, if desired
	data = data.filter(function(d) {
		if (mapping.filterCat != '') {
			return d[mapping.filterName] == mappping.filterCat;
		} else {
			return d;
		}
	});

	// set scales
	scales = applyData(data);

	// add the comets
	drawComets(segments, data);

	// adding x axis, and y axis
	addAxis(segments, scales.size, 'bottom');
	addAxis(segments, scales.value, 'left')

});

cometChartFunctions.js

// graph elements
function addAxis(element, scale, location) {
	var axis = d3.svg.axis()
		.scale(scale)
		.orient(location)
		.ticks(15, ",.1s")
		.tickSize(3, 0);

	element.append("g").attr("class", "axis")
		.attr("transform", placeAxis(location))
		.call(axis);
};

function placeAxis(location) {
	if (location == 'bottom') {
		return "translate(0," + height + ")";
	} else if (location == 'left') {
		return "translate(0,0)";
	}
}

function applyData(data) {
	// initialize counter variables
	var maxValue = 0,
		maxWeight = 0,
		minValue = data[0].startvalue,
		minWeight = data[0].startweight,
		diff = 0,
		sizeSum = [0, 0],
		comboSum = [0, 0];

	// use data to define max value, weight, weight diffs, and sum size and combo
	data.forEach(function(d) {
		d.weightDiff = +d.endweight - +d.startweight;
		if (Math.abs(d.weightDiff) > diff) {
			diff = Math.abs(d.weightDiff)
		};
		maxValue = Math.max(maxValue, +d.startvalue, +d.endvalue);
		maxWeight = Math.max(maxWeight, +d.startweight, +d.endweight);
		minValue = Math.min(minValue, +d.startvalue, +d.endvalue);
		minWeight = Math.min(minWeight, +d.startweight, +d.endweight);

		// calculate for aggregate
		sizeSum = [sizeSum[0] + +d.startweight,
			sizeSum[1] + +d.endweight
		];
		comboSum = [comboSum[0] + +d.startweight * +d.startvalue,
			comboSum[1] + +d.endweight * +d.endvalue
		];
	})

	// calculate and append aggregate data
	// assumes same number of segments for start & end 
	// assumes no missing values
	var aggregate = {
		startvalue: comboSum[0] / sizeSum[0],
		endvalue: comboSum[1] / sizeSum[1],
		startweight: sizeSum[0] / data.length,
		endweight: sizeSum[1] / data.length,
	};
	aggregate[mapping.segmentName] = 'aggregate';
	data.push(aggregate);

	// sets x and y scale to determine size of visible boxes
	if (scaleOptions.weightScale == 'log') {
		var sizeScale = d3.scale.log().clamp(true)
			.domain([minWeight * .8, maxWeight * 2])
			.range([0, width]);
	} else {
		var sizeScale = d3.scale.linear().clamp(true)
			.domain([minWeight * .8, maxWeight * 1.1])
			.range([0, width]);
	}

	if (scaleOptions.valueScale == 'log') {
		var valueScale = d3.scale.log().clamp(true)
			.domain([minValue * .9, maxValue * 2])
			.range([height, 0]);
	} else {

		var valueScale = d3.scale.linear().clamp(true)
			.domain([minValue * .9, maxValue * 1.1])
			.range([height, 0]);
	}

	// color scale, based on data diffs
	var colorScale = d3.scale.linear()
		.domain([-diff, 0, diff])
		.range(['orange', 'grey', 'blue'])

	return {
		size: sizeScale,
		value: valueScale,
		color: colorScale
	}

};

// data to polygons
function valuesToPoints(startweight, endweight, startvalue, endvalue, halfWidth) {
	points = [
		[startweight, startvalue]
	];
	var a = startweight - endweight;
	var b = startvalue - endvalue;
	var dist = Math.sqrt(a * a + b * b);
	var newPoint1 = [halfWidth / dist * b + endweight, -halfWidth / dist * a + endvalue];
	var newPoint2 = [-halfWidth / dist * b + endweight, halfWidth / dist * a + endvalue];
	points.push(newPoint1, newPoint2);
	return points.join(" ")
};

// function to draw comets
function drawComets(element, data) {
	element.selectAll("polygon")
		.data(data)
		.enter()
		.append("polygon")
		.attr("points", function(d) {
			return valuesToPoints(scales.size(+d.startweight),
				scales.size(+d.endweight),
				scales.value(+d.startvalue),
				scales.value(+d.endvalue),
				3);
		})
		.attr("fill", function(d) {
			if (d[mapping.segmentName] == 'aggregate') {
				//	
				return 'black';
			} else {
				return scales.color(d.weightDiff)
			};
		})
		.append("title")
		.text(function(d) {
			return d[mapping.filterName] +
				', ' + mapping.segmentName +
				d[mapping.segmentName] +
				', value: ' +
				d.startvalue + ', ' +
				d.endvalue +
				' weights ' +
				d.startweight + ' ' +
				d.endweight;
		});

};

data.csv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Comet Chart</title>

<link rel="stylesheet" href="cometChart.css">

<header>
</header>
<p>To use this chart with your own data:</p>
<p>(1) paste your data into the data.csv</p>
<p>(2) change the column names in the mappingNames.js file</p>
<p>(optional) set the scale for each axis to log or linear</p>
<div id="chart"></div>

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

mappingNames.js

var mapping = {
  // columns names for "value" metrics (y-axis), and a title for the size/weight value to use on the y-axis
  startValue: "deathRate_before",
  endValue: "deathRate_after",
  titleValue: "Fetal Death Rate",

  // column names for "weight" metrics (x-axis), and a title for the size/weight variable to use on the x-axis
  startWeight: "numBabiesBorn_before",
  endWeight: "numBabiesBorn_after",
  titleWeight: "Number of Babies Born",

  // column to segment the data into subgroups
  segmentName: "birthweight",
  // if you want to filter by another variable, type the name of that column here - and the category you want to filter as 'filterCat', as shown in the options that are commented out
  filterName: "state",
  filterCat: "Ohio",
  //filterName: "state",
  //filterCat: "Ohio"
}

var scaleOptions = {
  // set scale (either 'linear' or 'log')
  weightScale: "log",
  valueScale: "log"
}