Skip to content

Instantly share code, notes, and snippets.

@erlenstar

erlenstar/README.md

Forked from mbostock/.block
Last active August 29, 2015 13:56
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 erlenstar/8968926 to your computer and use it in GitHub Desktop.
Save erlenstar/8968926 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

First shot at a data-driven homepage for Todd and Co's new project.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<style>
body {
background: #212931;
margin: 0;
padding: 0;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
display: none;
fill: none;
stroke: #222a32;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #525a6b;
}
.boundary {
fill: none;
stroke: #313949;
stroke-width: .5px;
}
.points circle {
fill: #6fbee2;
opacity: 0.6;
stroke: #535f66;
stroke-width: 1px;
}
.points text {
font: 11px sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.route {
fill: none;
opacity: 0.95;
stroke: #fff;
stroke-width: 1px;
}
path.group {
fill: #6fbee2;
}
path.link {
fill: #6fbee2;
}
div.hero {
/*background-color: rgba(82, 90, 107, 0.8);*/
position: absolute;
text-align: center;
margin-left: 70%;
top: 75%;
width: 300px;
}
.hero p {
color: #fff;
font: 18px "Open Sans Condensed", sans-serif;
margin: 0 auto;
padding: 0;
text-transform: uppercase;
}
.hero h1 {
color: #6fbee2;
font: 30px "Open Sans Condensed", sans-serif;
font-weight: normal;
margin: 0 auto;
padding: 0;
text-transform: uppercase;
}
</style>
<body>
<div class="hero">
<p>design, experience and strategy</p>
<h1>converge in 2014</h1>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
/*
var width = 960,
height = 570;
*/
var width = parseInt(d3.select("body").style("width")),
height = window.innerHeight;
var places = {
MSP: [-93.0852, 44.9441],
DVS: [-121.7381, 38.5539],
LHR: [0.4614, 51.4775],
CHA: [-85.2039, 35.0353]
};
var route = {
featureCollection: [
{
type: "LineString",
coordinates: [
places.DVS,
places.MSP
]
},
{
type: "LineString",
coordinates: [
places.LHR,
places.MSP
]
},
{
type: "LineString",
coordinates: [
places.CHA,
places.MSP
]
}
]
};
// @debug scale, rotation and translate are guess and check to match projection choice
var projection = d3.geo.peirceQuincuncial()
.scale(390)
.rotate([60, -15])
.translate([width * .45, height * .8])
.precision(.1);
/*
var projection = d3.geo.kavrayskiy7()
.scale(170)
.rotate([0, -0])
.translate([width * .5, height * .5])
.precision(.1);
*/
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
/*
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
*/
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
/*
svg.append("path")
.datum(route)
.attr("class", "route")
.attr("d", path);
*/
svg.append("g")
.attr("class", "route-wrap")
.selectAll("path")
.data(route.featureCollection)
.enter().append("path")
.attr("class", "route")
.attr("d", path);
var point = svg.append("g")
.attr("class", "points")
.selectAll("g")
.data(d3.entries(places))
.enter().append("g")
.attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });
point.append("circle")
.attr("r", 6);
/*
point.append("text")
.attr("y", 10)
.attr("dy", ".71em")
.text(function(d) { return d.key; });
*/
d3.json("world-50m.json", function(error, world) {
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
// chord diagram
// matrix is strategy, ux, design
var matrix = [
[65,15,20],
[12,70,18],
[18,13,79]
];
var chord = d3.layout.chord()
.padding(0.05)
.sortSubgroups(d3.descending)
.matrix(matrix);
var circlosWidth = 300,
circlosHeight = 300,
innerRadius = Math.min(circlosWidth, circlosHeight) * .41,
outerRadius = innerRadius + 8;
var fill = d3.scale.ordinal()
.domain(d3.range(3))
.range(["#a56cdb", "#a3db6a","#dcac4b"]);
var context = svg.append("g");
context.attr("transform", "translate(" + width * 0.80 + "," + height * 0.55 + ")")
.attr("class","circlos")
.attr("height",circlosHeight)
.attr("width",circlosWidth)
.selectAll("path")
.data(chord.groups)
.enter().append("path")
.attr("class","group")
//.style("fill", function(d) { return fill(d.index); })
//.style("stroke", function(d) { return fill(d.index); })
.style("opacity", 0.7)
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius));
context.selectAll("path.link")
.data(chord.chords)
.enter().append("path")
.attr("class","link")
//.style("fill", function(d) { return fill(d.target.index); })
.style("opacity", 0.4)
.attr("d", d3.svg.chord().radius(innerRadius))
</script>
Display the source blob
Display the rendered blob
Raw
world-50m.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment