Skip to content

Instantly share code, notes, and snippets.

@majorgreys

majorgreys/index.html

Created October 29, 2012 18:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save majorgreys/31e48e69bdbc98acd99a to your computer and use it in GitHub Desktop.
Save majorgreys/31e48e69bdbc98acd99a to your computer and use it in GitHub Desktop.
Download ZIP
Experiment using D3.js to create a logo for HMNY 2013. View at http://bl.ocks.org/majorgreys/31e48e69bdbc98acd99a
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment