majorgreys/index.html

## index.html
<html>
    <script src="http://d3js.org/d3.v2.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <style>
        body { font-family: 'Arvo', serif; }

        div#logo1 { font-family: 'Helvetica'; }
        div#logo2 { font-family: 'Arvo'; }
    </style>
    <body>
        <h1>Historical Materialism New York 2013</h1>
        <h2>Logos</h2>
        <h3>Option #1</h3>
        <div id="logo1"></div>
        <script>
            var chars = [
                {value : 'H', color: '#2850ad', textcolor : 'white'},
                {value : 'M', color: '#f66319', textcolor : 'white'},
                {value : 'N', color: '#fccc0a', textcolor : 'black'},
                {value : 'Y', color: '#00933c', textcolor : 'white'},
                {value : '2', color: '#ccc', textcolor : 'white'},
                {value : '0', color: '#ccc', textcolor : 'white'},
                {value : '1', color: '#ccc', textcolor : 'white'},
                {value : '3', color: '#ccc', textcolor : 'white'},
                // {value : '3', color: '#ee352e', textcolor : 'white'},
            ]

            var r = 20,
                padding = 5,
                w = (2 * r * chars.length) + (padding * (chars.length - 1)),
                h = r * 2 + padding * 2,
                xscale = d3.scale.linear().domain([0, chars.length]).range([0, w]),
                vis = d3.select("#logo1")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h)

            var g = vis.selectAll("circle")
                       .data(chars)
                       .enter().append("g").attr("transform", function(d, i) { return "translate(" + (xscale(i) + r) + "," + h/2 + ")"; });

            g.append("circle")
                .attr('r', r)
                .style('fill', function(d) {return d.color;})

            g.append("text")
                .attr("dy", ".35em")
                .attr("text-anchor", "middle")
                .text(function(d) { return d.value;})
                .style('fill', function(d) { return d.textcolor;})
                .style('font-size', 1.2*r)

        </script>
        <h3>Option #2</h3>
        <div id="logo2"></div>
        <script>
            var chars = [
                {value : 'H', color: '#333', textcolor : 'white'},
                {value : 'M', color: '#333', textcolor : 'white'},
                {value : '2', color: '#eee', textcolor : 'black'},
                {value : '0', color: '#eee', textcolor : 'black'},
                {value : 'N', color: '#333', textcolor : 'white'},
                {value : 'Y', color: '#333', textcolor : 'white'},
                {value : '1', color: '#eee', textcolor : 'black'},
                {value : '3', color: '#eee', textcolor : 'black'},
            ]

            var e = 80,
                padding = 0,
                w = (e + padding) * 4,
                h = (e + padding) * 2,
                xscale = d3.scale.linear().domain([0, 4]).range([0, w]),
                yscale = d3.scale.linear().domain([0, 2]).range([0, h])

            var karl = d3.select("#logo2").append("svg").attr("width", e*2).attr("height", e*2)
            karl.append("svg:image").attr("xlink:href", "http://openclipart.org/people/worker/marx.svg").attr("width", e*2).attr("height", e*2)

            var vis = d3.select("#logo2")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h)

            var g = vis.selectAll("rect")
                       .data(chars)
                       .enter().append("g").attr("transform", function(d, i) {return "translate(" + xscale(i % 4) + "," + yscale(Math.floor(i / 4)) + ")"; });

            g.append("rect")
                .attr('width', e)
                .attr('height', e)
                .style('fill', function(d) {return d.color;})

            g.append("text")
                .attr("dy", e/2)
                .attr("dx", e/2)
                .attr("text-anchor", "middle")
                .attr("alignment-baseline", "central")
                .text(function(d) { return d.value;})
                .style('fill', function(d) { return d.textcolor;})
                .style('font-size', .6*e)
                .style('font-weight', 'bold')


        </script>
    </body>
</html>
	<html>
	<script src="http://d3js.org/d3.v2.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
	<style>
	body { font-family: 'Arvo', serif; }

	div#logo1 { font-family: 'Helvetica'; }
	div#logo2 { font-family: 'Arvo'; }
	</style>
	<body>
	<h1>Historical Materialism New York 2013</h1>
	<h2>Logos</h2>
	<h3>Option #1</h3>
	<div id="logo1"></div>
	<script>
	var chars = [
	{value : 'H', color: '#2850ad', textcolor : 'white'},
	{value : 'M', color: '#f66319', textcolor : 'white'},
	{value : 'N', color: '#fccc0a', textcolor : 'black'},
	{value : 'Y', color: '#00933c', textcolor : 'white'},
	{value : '2', color: '#ccc', textcolor : 'white'},
	{value : '0', color: '#ccc', textcolor : 'white'},
	{value : '1', color: '#ccc', textcolor : 'white'},
	{value : '3', color: '#ccc', textcolor : 'white'},
	// {value : '3', color: '#ee352e', textcolor : 'white'},
	]

	var r = 20,
	padding = 5,
	w = (2 * r * chars.length) + (padding * (chars.length - 1)),
	h = r * 2 + padding * 2,
	xscale = d3.scale.linear().domain([0, chars.length]).range([0, w]),
	vis = d3.select("#logo1")
	.append("svg")
	.attr("width", w)
	.attr("height", h)

	var g = vis.selectAll("circle")
	.data(chars)
	.enter().append("g").attr("transform", function(d, i) { return "translate(" + (xscale(i) + r) + "," + h/2 + ")"; });

	g.append("circle")
	.attr('r', r)
	.style('fill', function(d) {return d.color;})

	g.append("text")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.value;})
	.style('fill', function(d) { return d.textcolor;})
	.style('font-size', 1.2*r)

	</script>
	<h3>Option #2</h3>
	<div id="logo2"></div>
	<script>
	var chars = [
	{value : 'H', color: '#333', textcolor : 'white'},
	{value : 'M', color: '#333', textcolor : 'white'},
	{value : '2', color: '#eee', textcolor : 'black'},
	{value : '0', color: '#eee', textcolor : 'black'},
	{value : 'N', color: '#333', textcolor : 'white'},
	{value : 'Y', color: '#333', textcolor : 'white'},
	{value : '1', color: '#eee', textcolor : 'black'},
	{value : '3', color: '#eee', textcolor : 'black'},
	]

	var e = 80,
	padding = 0,
	w = (e + padding) * 4,
	h = (e + padding) * 2,
	xscale = d3.scale.linear().domain([0, 4]).range([0, w]),
	yscale = d3.scale.linear().domain([0, 2]).range([0, h])

	var karl = d3.select("#logo2").append("svg").attr("width", e2).attr("height", e2)
	karl.append("svg:image").attr("xlink:href", "http://openclipart.org/people/worker/marx.svg").attr("width", e2).attr("height", e2)

	var vis = d3.select("#logo2")
	.append("svg")
	.attr("width", w)
	.attr("height", h)

	var g = vis.selectAll("rect")
	.data(chars)
	.enter().append("g").attr("transform", function(d, i) {return "translate(" + xscale(i % 4) + "," + yscale(Math.floor(i / 4)) + ")"; });

	g.append("rect")
	.attr('width', e)
	.attr('height', e)
	.style('fill', function(d) {return d.color;})

	g.append("text")
	.attr("dy", e/2)
	.attr("dx", e/2)
	.attr("text-anchor", "middle")
	.attr("alignment-baseline", "central")
	.text(function(d) { return d.value;})
	.style('fill', function(d) { return d.textcolor;})
	.style('font-size', .6*e)
	.style('font-weight', 'bold')


	</script>
	</body>
	</html>