blehman · April 6, 2018 17:58
diff --git a/Readme.md b/Readme.md
diff --git a/app.js b/app.js
 (function() {
  // call the heatmap constructor
  var iChartType = ChartType();
 // list data files
  var files = ["example1.csv", "example2.json"]
    , promises = [];
  // get data in v5
  files.forEach(function(url) {
      var ext = url.split(".").pop()
        , parser = (ext=="csv")? d3.csv:d3.json;
      promises.push(parser(url))
  });
  Promise.all(promises).then(runApp)
  function runApp(d){
    var full_set = [{
      "example1":d[0]
      ,"example2":d[1]
    }]
    var container = d3.select("#viz-container");
        container.select("svg").selectAll("viz-object")
            .data(full_set).enter()
            .append("g")
            .attr('id',"viz-object")
            .call(iChartType);
  }
 }())
diff --git a/chartType.js b/chartType.js
 function ChartType(){
  var svg
    , anything="a";
  function chart(selection){
    // note: selection is passed in from the .call(iChartType), which is the same as myHeatmap(d3.select('.stuff')) -- ??
    selection.each(function(dataObject){
        console.log(dataObject)
        svg = d3.select("#viz")
        .append("g")
          .attr("transform", "translate(480,250)");;
        // create circle layout
        var g = svg.selectAll("g")
            .data(d3.range(0, 360, 2))
          .enter().append("g")
            .attr("transform", function(d) { return "rotate(" + d + ")"; });

        var circle = g.selectAll("circle")
            .data(d3.range(10))
          .enter().append("circle")
            .attr("cx", d3.scaleLinear().domain([0, 9]).range([180, 240]))
            .attr("r", 4.5)
            .attr("fill", d3.scaleLinear().domain([0, 9]).range(["brown", "steelblue"]))
            .attr("stroke", "black");
    // end selection
    })
  // end chart
  }
  chart.anything = function(x) {
    if (!arguments.length) { return anything; }
    anything = x;
    return chart;
  };
  return chart
 }
diff --git a/example1.csv b/example1.csv
diff --git a/example2.json b/example2.json
 [{"name":"Brian","career-direction":"data visualization"},{"name":"Buddy","career-direction":"catching frisbee"}]
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- D3 -->
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <!-- Chart -->
        <script src="chartType.js" type="text/javascript"></script>
        <!-- CSS -->
        <link href="stylesheet.css" type="text/css" rel="stylesheet">
        <style>
        /* CSS */
        </style>
    </head>
    <body>
        <div id="viz-container">
            <svg id="viz"
              preserveAspectRatio="xMinYMin meet"
              viewBox= "0 0 960 500"
              >
            </svg>
        </div>
        <script src="app.js" type="text/javascript">
        </script>
    </body>
 </html>
diff --git a/stylesheet.css b/stylesheet.css

 .testing_pallate {
  .activation: #ad6364,
  .highlight-against-gray: #3e3b35,
  .stable:#6ab39b,
  .col1: #80bd88,
  .col2: #d3b67c,
  .col3: #5eaec0,
  .col4: #986535,
  .col5: #56542d,
  .col6: #b9b09e,
  .col7: #97ac63
 }
 #main-body{
 }
 #viz-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: top;
  overflow: hidden;
 }
 #viz{
 /*
  onmouseover="document.body.style.overflow='hidden';"
  onmouseout="document.body.style.overflowY='auto'; document.body.style.overflowX='hidden';"
  preserveAspectRatio="xMinYMin meet"
  width="650"
  height="550"
  viewBox= "0 0 650 550"
 */

  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;

 }
 #legend{
 }
 /*
  Main
 */
 .mainBody-background{
  background-color: #2B3033;
 }
 /*
  Container
 */
 .container-stroke{
  stroke:#767678;
 }
 /*
  title
 */
 .title-font-family{
  font-family: Arial,Helvetica,"san-serif";
 }
 .title-size-font{
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.2em;
 }
 .title-color-font{
  color: #2B3033;
 }
 .title-color-background{
  background:#6D6E71;
 }
 /*
  font
 */
 .general-font-family{
  font-family: "TiemposTextWeb-Regular","Georgia";
 }
 .general-size-font{
  font-size: 2vw;
  line-height: 3vw;
 }
 .general-color-font{
  color:#bdbdc1;
 }
 .small-size-font{
  font-size: 0.40vw;
 }
 /*
  objects
 */
 .vizObj-General-outline{
  stroke:#bdbdc1;
 }
 .vizObj-Stable-optional{
  stroke: #6ab39b;
 }
 .vizObj-Active-stroke{
  stroke: #ad6364;
 }
 .vizObj-col1{
  fill: #80bd88;
 }
 .vizObj-col2{
  fill: #d3b67c;
 }
 .vizObj-col3{
  fill: #5eaec0;
 }
diff --git a/thumbnail.png b/thumbnail.png
	(function() {
	// call the heatmap constructor
	var iChartType = ChartType();
	// list data files
	var files = ["example1.csv", "example2.json"]
	, promises = [];
	// get data in v5
	files.forEach(function(url) {
	var ext = url.split(".").pop()
	, parser = (ext=="csv")? d3.csv:d3.json;
	promises.push(parser(url))
	});
	Promise.all(promises).then(runApp)
	function runApp(d){
	var full_set = [{
	"example1":d[0]
	,"example2":d[1]
	}]
	var container = d3.select("#viz-container");
	container.select("svg").selectAll("viz-object")
	.data(full_set).enter()
	.append("g")
	.attr('id',"viz-object")
	.call(iChartType);
	}
	}())
	function ChartType(){
	var svg
	, anything="a";
	function chart(selection){
	// note: selection is passed in from the .call(iChartType), which is the same as myHeatmap(d3.select('.stuff')) -- ??
	selection.each(function(dataObject){
	console.log(dataObject)
	svg = d3.select("#viz")
	.append("g")
	.attr("transform", "translate(480,250)");;
	// create circle layout
	var g = svg.selectAll("g")
	.data(d3.range(0, 360, 2))
	.enter().append("g")
	.attr("transform", function(d) { return "rotate(" + d + ")"; });

	var circle = g.selectAll("circle")
	.data(d3.range(10))
	.enter().append("circle")
	.attr("cx", d3.scaleLinear().domain([0, 9]).range([180, 240]))
	.attr("r", 4.5)
	.attr("fill", d3.scaleLinear().domain([0, 9]).range(["brown", "steelblue"]))
	.attr("stroke", "black");
	// end selection
	})
	// end chart
	}
	chart.anything = function(x) {
	if (!arguments.length) { return anything; }
	anything = x;
	return chart;
	};
	return chart
	}
row_name	c0	c1	c2	c3	c4	c5	c6	c7	c8	c9
BYOB	-0.3768676174	0.33986063	-0.4560061111	-0.6338553185	-0.9787854505	0.3791164167	0.1319010482	0.7686667752	-0.6463068054	-0.23308059
Bro-country	-1.825092936	-1.473007802	-0.2040391542	0	-1.040716408	1.711669874	0	-0.9131733948	0	0
Cumulus.com	0	0	0	0	0	1.241339927	0	0	0	0.8009931775
at home	-0.1464325905	0.2245497835	-1.107832067	-0.2976752345	-0.5282885389	-0.06992443433	0.01386911158	0.7727479752	0.2772754021	0.2589787827
bar	0.4421837213	0.258734471	-0.9783220814	0.4170901011	-0.5055928244	0.2029946332	-0.06199025491	-0.1245843927	-0.3260431118	0.1204553024
barbecue	0.2890968285	-1.078070816	-1.979298073	-1.31496452	-2.838549649	0.9820850107	-0.8115724183	0.8666471836	0.3843007542	0.1113002318
bbq	-0.123048409	-0.5699831353	-0.8725540549	-0.3283972533	-0.9008569086	0.7182072732	-0.280152506	0.4397556384	0.3098339599	0.09402334199
beer	-0.9875339065	-1.655381511	0.8277349305	0.4206116606	-1.598783067	0.4301481755	-1.839084116	0.07660237115	0.3506055054	-0.850542362
burger	0.3812925628	0.5287803089	-0.5543817322	-0.7462498608	-0.9694830579	0.203462205	0.02683254598	-0.4967341278	-0.556961705	0.2673229211
celebrate	-0.2362933794	0.3453627658	-1.034325733	-0.5333717371	-0.2397055391	-0.09641073532	0.757983102	-0.07942263911	-0.1216767277	-0.1174811951
concert	-0.04835754156	0.06282188369	1.162665948	-0.1914480518	-1.201926856	-0.4186580536	-0.9459695925	-0.6949998933	-0.03199376816	-1.550798499
day	-0.3221480211	-0.1958335746	-0.8810225076	-0.3569108836	-0.1548482088	0.2353925321	0.4629842779	0.1462122639	-0.1333182039	0.07076332987
friends	-0.1759847367	0.6627547539	-1.02982867	-0.920612154	-1.063447011	0.1189843882	0.3910528371	0.2366087586	0.7623933322	-0.05865576823
game	-0.6232566555	0.5913938108	-0.8402156575	-0.1195898879	0.09306640924	-0.3721849442	0.1741741184	-0.04042140945	-0.09125722392	0.3158764459
gamer	-0.8043116323	1.249920812	-2.187506389	-1.258009628	-0.8672329646	-0.3743285348	0.4283758726	-0.9115402081	0.3476348607	0.2485976375
gaming	-0.9315651255	0.7735395805	-0.34520797	0.05113806034	-1.85193669	-0.09738034405	-0.155201146	0.1514489101	-0.6031673127	0.1773027979
gourmet	-0.3824077978	1.054866604	-1.665519096	-0.5216124632	0	0.8135275205	-0.4490032771	-0.0170319627	-1.344994166	-0.1208377347
holiday	-0.2016668194	0.3826710628	-1.642803269	-0.7517650669	0.8219640801	0.04320661529	0.3001169517	0.4071885706	0.2103724293	0.1005705471
iHeartRadio	0.1122047146	0.5663830733	-1.289259257	-0.6308604405	-0.2618729447	0.1782733623	0.787012114	-0.3067849659	-0.3228400321	-0.4239551714
mash-up	-1.007135954	2.034814838	-2.63687186	-2.195681859	0.5780184189	-0.9685133583	-0.05572317684	-1.412198974	-0.09095147611	-0.5285013855
mashup	-1.160470263	2.062001337	-2.849046669	-2.712185131	-0.1339536827	-0.4124486303	0.2204797794	-1.715128146	-0.2069401456	-1.160047549
night	-0.4683724824	-0.5489702489	0.3104120802	0.4379426068	-0.4209318796	-0.2357490629	-0.5570410041	0.1922901724	-0.2613735974	0.130035326
party	-0.8086374996	0.008444177846	0.4259126494	0.2048944895	-1.290001378	-0.4456812379	-0.4388438981	-0.4709842304	-0.6964178676	0.2640370249
restaurant	-0.6332077673	0.1101887272	-1.750651943	1.359672842	-1.182481867	0.528715421	-0.3986981538	-1.050898444	-0.4531218573	-0.3852433563
weekend	-0.02306523693	-0.07365731214	-0.6561756511	-0.04119768727	-0.8393674413	0.1955570146	0.1721770543	-0.1244458429	-0.1319228547	0.2358293702
youtube	1.625148575	0.8950027338	-1.333039694	-0.8785955866	1.834246255	-0.4023159424	-2.023229906	-1.608747608	1.075019928	-0.09858517528
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- D3 -->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<!-- Chart -->
	<script src="chartType.js" type="text/javascript"></script>
	<!-- CSS -->
	<link href="stylesheet.css" type="text/css" rel="stylesheet">
	<style>
	/* CSS */
	</style>
	</head>
	<body>
	<div id="viz-container">
	<svg id="viz"
	preserveAspectRatio="xMinYMin meet"
	viewBox= "0 0 960 500"
	>
	</svg>
	</div>
	<script src="app.js" type="text/javascript">
	</script>
	</body>
	</html>

	.testing_pallate {
	.activation: #ad6364,
	.highlight-against-gray: #3e3b35,
	.stable:#6ab39b,
	.col1: #80bd88,
	.col2: #d3b67c,
	.col3: #5eaec0,
	.col4: #986535,
	.col5: #56542d,
	.col6: #b9b09e,
	.col7: #97ac63
	}
	#main-body{
	}
	#viz-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: top;
	overflow: hidden;
	}
	#viz{
	/*
	onmouseover="document.body.style.overflow='hidden';"
	onmouseout="document.body.style.overflowY='auto'; document.body.style.overflowX='hidden';"
	preserveAspectRatio="xMinYMin meet"
	width="650"
	height="550"
	viewBox= "0 0 650 550"
	*/

	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;

	}
	#legend{
	}
	/*
	Main
	*/
	.mainBody-background{
	background-color: #2B3033;
	}
	/*
	Container
	*/
	.container-stroke{
	stroke:#767678;
	}
	/*
	title
	*/
	.title-font-family{
	font-family: Arial,Helvetica,"san-serif";
	}
	.title-size-font{
	font-size: 4vw;
	font-weight: bold;
	line-height: 1.2em;
	}
	.title-color-font{
	color: #2B3033;
	}
	.title-color-background{
	background:#6D6E71;
	}
	/*
	font
	*/
	.general-font-family{
	font-family: "TiemposTextWeb-Regular","Georgia";
	}
	.general-size-font{
	font-size: 2vw;
	line-height: 3vw;
	}
	.general-color-font{
	color:#bdbdc1;
	}
	.small-size-font{
	font-size: 0.40vw;
	}
	/*
	objects
	*/
	.vizObj-General-outline{
	stroke:#bdbdc1;
	}
	.vizObj-Stable-optional{
	stroke: #6ab39b;
	}
	.vizObj-Active-stroke{
	stroke: #ad6364;
	}
	.vizObj-col1{
	fill: #80bd88;
	}
	.vizObj-col2{
	fill: #d3b67c;
	}
	.vizObj-col3{
	fill: #5eaec0;
	}