PB typeofgraphic

Learning to create a reusable chart function for a scatter plot, following Mike Bostock's "Towards Reusable Charts." Also includes a random data generator.

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

What are we trying to observe? Raw object data.

// Objects
var obj = { id: 2 };
obj.id = 3; // obj == { id: 3 }
 
// Arrays
var arr = ['foo', 'bar'];
arr.splice(1, 1, 'baz'); // arr == ['foo', 'baz'];

See in action http://bl.ocks.org/3766585

This simple column chart shows how to handle negative values on the y axis. It handles ordinal values for the X axis only.

I started with this gist from Mike Bostock: https://gist.github.com/2368837 see it on blocks: http://bl.ocks.org/2368837

borrowed a bit from the histogram example in D3: https://github.com/mbostock/d3/tree/master/examples/histogram

and used the reusable chart convention from: http://bost.ocks.org/mike/chart/

	#-------------------------------------------------------------------------------
	# Purpose: refresh Tableau packaged workbook file's underlying dataextract file from SQL
	# Author: jasonlopez01
	# Created: 05/08/2016
	# Note: could also load in from csv, Excel, etc.
	#-------------------------------------------------------------------------------

	import pyodbc, os, shutil, datetime, zipfile, time, sys
	import dataextract as tde

	{% comment %}

	A customized sidebar for this theme. If advanced tagging is enabled in
	theme settings, prepend your tags with "group" names (E.g. BRAND_) and your
	collection page will create groups of tags to sort by.

	Expansion of https://gist.github.com/darryn/8047749

	{% endcomment %}

	{% if template contains 'collection' and collection.all_tags.size > 1 %}

	<!-- A recursive loop to catch and filter out the different tag categories -->
	{% assign c = 0 %}
	{% for t in collection.all_tags %}
	{% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t \| split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t \| split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c \| plus: 1 %}{% endunless %}{% endcapture %}
	{% endfor %}

	<!-- create array of tag categories -->
	{% assign cat_array = cat \| split: '+' %}

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<style type="text/css">

	html, body, #map {
	width: 100%;

	<html>
	<head>
	<title>Animated Sparkline using SVG Path and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style>
	/* tell the SVG path to be a thin blue line without any area fill */
	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;