Miles McCrocklin milroc

This is a fork of Ziggy Jonsson's Bar Stack (flex lao) to add to this conversation.

The purpose of this gist was to recommend using whitespace to represent the axes of visualizations, as they signify the zero point in the opposite dimensions encoding. Additionally, this enhances the users comprehension because positive and negative areas are able to be assessed independently.

When doing visual encoding, we tend to ignore whitespace and let 0's handle themselves. To learn about other techniques around this concept, refer to: The Design of Nothing: Null, Zero, Blank by Andy Kirk (@visualisingdata).

Proposed Improvements:

aesthetics (very little changes from original example were made).
transitions that serve a purpose and flow with the expectation of the reader.

This is a fork of Mike Bostock's Line Transition.

This fork was originally intended to showcase a principle of using padding between the x and y axis. This is a concept I've seen covered over and over again when dealing with non-zero minimum value charts (see example).

I also found it interesting to update both the line and the x axis. It should be noted that this was not the intent of the line transition example, seeing that the line was treated as a queue, pushing and popping from the front and back of the data. It talked on how to prevent odd visual behavior of the path when those changes occur, nothing more or less.

That being said, the visual change to the axis was a hack (see x_axis_scale) to just better understand how useful a constant, fast linear change effects my comprehension of the data.

So far, my personal opinion is that when dealing with updating data similar to this, it is best to spend most of your no

Code to help Walter Gunter Jr. (@wegunterjr) with learning d3.js. based on: http://jsfiddle.net/wegunterjr/r92zG/

This is a variation of a stacked bar chart, where an additional dimension is mapped to width of the section. This additional dimension causes unnecessary complexity for the user.

Normal bar charts use a 1-dimensional area encoding (or redundantly encodes position and area), namely that the bars are all comparable in size, but fixed to one dimension.

By adding a second dimension (regardless of whether it is aesthetically pleasing), the usefulness of the encoding is still mapped to the area. Namely that the reader will interpret the smaller area as meaningful. Therefore it is recommended to map these dimensions with data that have a directly proportional relationship.

Template for creating bl.ocks.

This is an example of working with the selection.each() function in d3.js.

Implemented in response to: @dchud's question on twitter.

This is a six part series, taking you through stages of designing and creating reusable visualizations with d3.js

All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.

This is a six part series, taking you through stages of designing and creating reusable visualizations with d3.js

All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="./tooltip.js"></script>
	</head>
	<body>
	<div class="viz"></div>
	<script type="text/javascript">

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="src.js"></script>
	<div id="chart"></div>

	# Editor backup files
	*.bak
	*~