Skip to content

Instantly share code, notes, and snippets.

@senthilthyagarajan

senthilthyagarajan/block.md

Created August 19, 2017 15:12
Show Gist options
  • Save senthilthyagarajan/f6de6d3cc989f4e4859ff6d07deaf558 to your computer and use it in GitHub Desktop.
Save senthilthyagarajan/f6de6d3cc989f4e4859ff6d07deaf558 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
block.md

license: mit

Raw
index.html
<html>
<meta charset="utf-8">
<style>
body {
width: 960px;
margin: 0 auto;
}
.map {
width: 100%;
height: 400px;
}
path {
fill: none;
stroke: #000;
stroke-linejoin: round;
stroke-linecap: round;
}
.major_road { stroke: #776; }
.minor_road { stroke: #ccb; }
.highway { stroke: #666; stroke-width: 1.5px; }
.rail { stroke: #999; }
.water, .ocean, .riverbank {
fill: #C7DBFF;
stroke: none;
}
.tick line {
stroke: black;
}
.tick text {
font-size: 10px;
}
</style>
<body>
<div class="map"></div>
<div class="controls"></div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
<script>
/*
Map
*/
var width = 960,
height = 500;
var tiler = d3.geo.tile()
.size([width, height]);
var center = [-71.07, 42.355];
var projection = d3.geo.mercator()
.center(center)
.scale((1 << 22) / 2 / Math.PI)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var w = d3.select('.map').style('width').replace('px',''),
h = d3.select('.map').style('height').replace('px','');
var svg = d3.selectAll('.map').append('svg')
.attr('width', w)
.attr('height', h);
svg.selectAll('g')
.data(tiler
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0])))
.enter().append('g')
.each(function(d) {
var g = d3.select(this);
// d3.json('http://' + ['a', 'b', 'c'][(d[0] * 31 + d[1]) % 3] + '.tile.openstreetmap.us/vectiles-water-areas/' + d[2] + '/' + d[0] + '/' + d[1] + '.json', function(error, json) {
d3.json('http://' + ['a', 'b', 'c'][(d[0] * 31 + d[1]) % 3] + '.tile.openstreetmap.us/vectiles-all/' + d[2] + '/' + d[0] + '/' + d[1] + '.json', function(error, json) {
});
});
// Features
d3.json('points.json', function(err, raw) {
// Add dummy data for force, angle, quality
var data = raw;
data.features.forEach(function(p) {
p.angle = Math.floor(Math.random() * 360) + 1;
p.force = Math.floor(Math.random() * 10) + 1;
p.quality = Math.floor(Math.random() * 10) + 1;
});
d3.selectAll('svg')
.selectAll('.sensor')
.data(data.points)
.enter()
.append('g')
.attr('class', function(d, i) {return 'sensor ' + i;})
.attr('transform', function(d) {return 'translate(' + projection(d.coordinates)[0] + ',' + projection(d.coordinates)[1] + ')';});
var colors = {
worst: '#fee6ce',
middle: '#fdae6b',
best: '#e6550d'
};
/*
Bubbles + slider
*/
var line = d3.svg.line(),
x = function(d) {return d.force*5 * Math.cos(d.angle * (Math.PI/180));},
y = function(d) {return d.force*5 * Math.sin(d.angle * (Math.PI/180));};
var wind = d3.selectAll('.sensor')
.append('circle')
.attr('class', 'area')
.attr('r', function(d) {return d.force * 2;})
.style('fill', function(d) {
return d.quality < 4 ? colors.worst : (d.quality < 8 ? colors.middle : colors.best);
})
.style('opacity', 0.8)
;
var parse = d3.time.format("%X %x").parse,
formatter = d3.time.format('%I %p');
var domain = ['1992', '2017'],
xScale = d3.time.scale()
.domain([parse(domain[0]), parse(domain[1])])
.range([0, 500])
.clamp(true),
xAxis = d3.svg.axis().scale(xScale)
.tickFormat(function(d) {
var t = formatter(d);
return t.charAt(0) == '0' ? t.substring(1) : t;
});
var g = d3.select('.controls').append('svg').append("g")
.attr("transform", "translate(30,40)");
g.append('g').attr('class', 'x axis').call(xAxis);
var brush = d3.svg.brush()
.x(xScale)
.extent([0, 0])
.on("brush", brushed)
;
var height = 40;
var slider = g.append("g")
.attr("class", "slider")
.attr('transform', 'translate(0,'+(-height/2)+')')
.call(brush);
slider.selectAll(".extent,.resize")
.remove();
slider.select(".background")
.attr("height", height);
var handle = slider.append("circle")
.attr("class", "handle")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("r", 5);
slider.on('mousemove', function() {
var value = xScale.invert(d3.mouse(this)[0]),
nearestHour = d3.time.hour.round(value);
brush.extent([nearestHour, nearestHour]);
brushed();
});
var lastHour;
function brushed() {
var nearestHour = d3.time.hour.round(brush.extent()[0]);
brush.extent([nearestHour, nearestHour]);
if (+nearestHour !== +lastHour) {
lastHour = nearestHour;
handle.attr("cx", xScale(nearestHour));
d3.selectAll('.map circle').attr('r', function(d) {return d.force*Math.random()*4;});
}
}
});
</script>
</html>
Display the source blob
Display the rendered blob
Raw
points.json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"SEASON": 2016,
"WINNERS": "Chelsea ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.191034,
51.4816
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2015,
"WINNERS": "Leicester City",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-1.14217,
52.6203
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2014,
"WINNERS": "Chelsea ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.191034,
51.4816
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2013,
"WINNERS": "Manchester City ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.20024,
53.483
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2012,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2011,
"WINNERS": "Manchester City ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.20024,
53.483
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2010,
"WINNERS": "Manchester United ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2009,
"WINNERS": "Chelsea ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.191034,
51.4816
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2008,
"WINNERS": "Manchester United",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2007,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2006,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2005,
"WINNERS": "Chelsea ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.191034,
51.4816
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2004,
"WINNERS": "Chelsea ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.191034,
51.4816
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2003,
"WINNERS": "Arsenal ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.108436,
51.5549
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2002,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2001,
"WINNERS": "Arsenal ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.108436,
51.5549
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 2000,
"WINNERS": "Manchester United ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1999,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1998,
"WINNERS": "Manchester United  ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1997,
"WINNERS": "Arsenal ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-0.108436,
51.5549
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1996,
"WINNERS": "Manchester United ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1995,
"WINNERS": "Manchester United",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1994,
"WINNERS": "Blackburn Rovers ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.48937,
53.7286
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1993,
"WINNERS": "Manchester United ",
"": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
},
{
"type": "Feature",
"properties": {
"SEASON": 1992,
"WINNERS": "Manchester United "
},
"geometry": {
"type": "Point",
"coordinates": [
-2.29139,
53.4631
]
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment