Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/_.md

Created August 10, 2013 08:23
Show Gist options
  • Save enjalot/6199585 to your computer and use it in GitHub Desktop.
Save enjalot/6199585 to your computer and use it in GitHub Desktop.
Download ZIP
bart lines - get station offsets
Raw
_.md
Display the source blob
Display the rendered blob
Raw
bart.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
config.json
{"description":"bart lines - get station offsets","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bart.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stations.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/iKuKTIT.png"}
Raw
inlet.js
//from original map: http://upload.wikimedia.org/wikipedia/commons/c/c5/Revised_BART_map.svg
var svg = d3.select("svg")
var width = 694.36;
var height = 552.46;
tributary.duration = 4000;
var stations = tributary.stations;
stations.forEach(function(d) {
if(!d.x) d.x = Math.random() * width;
if(!d.y) d.y = Math.random() * height;
if(!d.nameX) d.nameX = 0;
if(!d.nameY) d.nameY = 0;
if(!d.offsets) d.offsets = {};
});
var gstations = svg.selectAll("g.station")
.data(stations)
function transform(d) {
return "translate(" + [d.x,d.y] +")";
}
var enter = gstations.enter()
.append("g").classed("station", true)
//.attr("transform", transform);
var circle = enter.append("circle")
.attr({
cx: function(d) { return d.x },
cy: function(d) { return d.y },
r: 8
,fill: "#9B9B9B"
})
.style({
"stroke-width": 3
,"stroke": "#E6E6E6"
})
var names = enter.append("text")
.text(function(d) { return d.name })
.attr("x", function(d) { return d.x + d.nameX })
.attr("y", function(d) { return d.y + d.nameY })
var dragCircle = d3.behavior.drag()
.on("drag", function(d) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr({
cx: function(d) { return d.x },
cy: function(d) { return d.y }
})
d3.select(this.parentNode).select("text")
.attr("x", function(d) { return d.x + d.nameX })
.attr("y", function(d) { return d.y + d.nameY })
}).on("dragend", function() {
updateStations();
})
circle.call(dragCircle)
var dragName = d3.behavior.drag()
.on("drag", function(d) {
d.nameX += d3.event.dx;
d.nameY += d3.event.dy;
d3.select(this)
.attr("x", function(d) { return d.x + d.nameX })
.attr("y", function(d) { return d.y + d.nameY })
}).on("dragend", function() {
updateStations();
})
names.call(dragName)
//this saves back into the stations json
function updateStations() {
var cm = tributary.getCodeEditor("stations.json");
console.log(stations[0]);
cm.setValue(JSON.stringify(stations, null, 2));
}
var dist = function(a, b) {
var dx = b.x - a.x;
var dy = b.y - a.y;
return Math.sqrt(dx*dx + dy*dy);
}
var currp = svg.append("circle").classed("current", true)
.attr("r", 13)
var line = "red";
var path = d3.select("#" + line).node();
var len = path.getTotalLength();
var min = Infinity
var minp;
tributary.run = function(g,t) {
var p = path.getPointAtLength(t * len);
currp.attr({cx: p.x, cy: p.y })
min = Infinity
for(var i = 0; i < stations.length; i++) {
var distance = dist(p, stations[i])
if(distance < min) {
min = distance;
if(distance < 10) {
minp = stations[i];
minp.offsets[line] = t;
console.log(t*len);
}else { minp = null; }
}
}
d3.selectAll(".station circle")
.style("fill", "#CCCCCC")
.filter(function(d) {
return d === minp
})
.style("fill", "#ff0000")
}
Raw
stations.json
[
{
"code": "RM",
"name": "Richmond",
"x": 337.2519027299527,
"y": 97.24952566866301,
"nameX": -53,
"nameY": -17,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 670.6939608764649,
"orange": 0
}
},
{
"code": "EN",
"name": "El Cerrito Del Norte",
"x": 378.7681505397055,
"y": 96.61348564588465,
"nameX": -2,
"nameY": -16,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 637.0583560180663,
"orange": 30.488238525390628
}
},
{
"code": "EP",
"name": "El Cerrito Plaza",
"x": 406.7192649880145,
"y": 109.35490167293699,
"nameX": -99,
"nameY": 7,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 608.8044479370118,
"orange": 73.1717724609375
}
},
{
"code": "NB",
"name": "North Berkeley",
"x": 409.03110342553816,
"y": 129.85777184832375,
"nameX": -96,
"nameY": 4,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 589.4639751434325,
"orange": 91.46471557617187
}
},
{
"code": "BK",
"name": "Berkeley",
"x": 409.4475327723846,
"y": 147.93217596529985,
"nameX": -59,
"nameY": 2,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 569.7871463012696,
"orange": 109.75765869140625
}
},
{
"code": "AS",
"name": "Ashby",
"x": 407.04815876570535,
"y": 169.29698920819445,
"nameX": -51,
"nameY": 3,
"routes": [
"orange",
"red"
],
"offsets": {
"red": 550.1103174591065,
"orange": 134.14824951171875
}
},
{
"code": "MA",
"name": "MacArthur",
"x": 407.35532210963777,
"y": 191.98105409529992,
"nameX": -70,
"nameY": 2,
"routes": [
"orange",
"red",
"yellow"
],
"offsets": {
"red": 527.7426402282715,
"orange": 158.53884033203124
}
},
{
"code": "19",
"name": "19th Street Oakland",
"x": 406.4762217817083,
"y": 211.281455807928,
"nameX": 10,
"nameY": 3,
"routes": [
"orange",
"red",
"yellow"
],
"offsets": {
"red": 507.8976333618164,
"orange": 176.83178344726562
}
},
{
"code": "12",
"name": "12th Street / Oakland City Center",
"x": 406.72745221162216,
"y": 231.4813762536133,
"nameX": 10,
"nameY": 4,
"routes": [
"orange",
"red",
"yellow"
],
"offsets": {
"red": 488.5571605682373,
"orange": 195.1247265625,
"yellow": 507.9115513305664
}
},
{
"code": "LM",
"name": "Lake Merritt",
"x": 420.1784636294283,
"y": 284.6640022135573,
"nameX": 15,
"nameY": 5,
"routes": [
"orange",
"green",
"blue"
],
"offsets": {
"orange": 250.0035559082031,
"blue": 272.0680917666626,
"green": 357.25103759765625
}
},
{
"code": "FV",
"name": "Fruitvale",
"x": 448.22722799262965,
"y": 306.6533642988233,
"nameX": 18,
"nameY": 3,
"routes": [
"orange",
"green",
"blue"
],
"offsets": {
"orange": 292.68708984375,
"blue": 241.6294870063782,
"green": 321.52593383789065
}
},
{
"code": "CL",
"name": "Coliseum / Oakland Airport",
"x": 471.8996493296977,
"y": 335.59136392283256,
"nameX": 12,
"nameY": -5,
"routes": [
"orange",
"green",
"blue"
],
"offsets": {
"orange": 335.3706237792969,
"blue": 202.8743235684204,
"green": 285.800830078125
}
},
{
"code": "SL",
"name": "San Leandro",
"x": 495.4028909328207,
"y": 358.8716192563297,
"nameX": 16,
"nameY": 1,
"routes": [
"orange",
"green",
"blue"
],
"offsets": {
"orange": 359.76121459960933,
"blue": 166.78045890731812,
"green": 256.1489939575195
}
},
{
"code": "BF",
"name": "Bayfair",
"x": 514.6943613496702,
"y": 379.86474627215415,
"nameX": 19,
"nameY": 0,
"routes": [
"orange",
"green",
"blue"
],
"offsets": {
"orange": 390.249453125,
"blue": 134.5944208984375,
"green": 228.6406640625
}
},
{
"code": "HY",
"name": "Hayward",
"x": 541.1807193209604,
"y": 412.7951991516957,
"nameX": -63,
"nameY": 8,
"routes": [
"orange",
"green"
],
"offsets": {
"orange": 426.8353393554687,
"green": 184.52016091918944
}
},
{
"code": "SH",
"name": "South Hayward",
"x": 577.610563062653,
"y": 445.74010956377725,
"nameX": -102,
"nameY": 13,
"routes": [
"orange",
"green"
],
"offsets": {
"orange": 475.61652099609375,
"green": 128.61037353515624
}
},
{
"code": "UC",
"name": "Union City",
"x": 632.3352013461757,
"y": 499.1954842959484,
"nameX": -75,
"nameY": 10,
"routes": [
"orange",
"green"
],
"offsets": {
"orange": 560.9835888671876,
"green": 50.01514526367188
}
},
{
"code": "FM",
"name": "Fremont",
"x": 670.2401071316656,
"y": 538.0354696054292,
"nameX": 20,
"nameY": 4,
"routes": [
"orange",
"green"
],
"offsets": {
"orange": 609.7647705078125,
"green": 0
}
},
{
"code": "CN",
"name": "Concord",
"x": 557.924535712367,
"y": 79.22608115762478,
"nameX": 16,
"nameY": 7,
"routes": [
"yellow"
],
"offsets": {
"yellow": 746.3555411682129
}
},
{
"code": "PH",
"name": "Pleasant Hill",
"x": 535.3732558397669,
"y": 98.47572374612093,
"nameX": 16,
"nameY": 3,
"routes": [
"yellow"
],
"offsets": {
"yellow": 719.9059576416016
}
},
{
"code": "WC",
"name": "Walnut Creek",
"x": 517.3768656339869,
"y": 115.95939369412139,
"nameX": 14,
"nameY": 7,
"routes": [
"yellow"
],
"offsets": {
"yellow": 696.8371479492188
}
},
{
"code": "LF",
"name": "Lafayette",
"x": 495.41654099955224,
"y": 140.1603028003825,
"nameX": 13,
"nameY": 6,
"routes": [
"yellow"
],
"offsets": {
"yellow": 663.6260167541504
}
},
{
"code": "OR",
"name": "Orinda",
"x": 475.8728397351224,
"y": 159.32197172119288,
"nameX": 13,
"nameY": 12,
"routes": [
"yellow"
],
"offsets": {
"yellow": 633.7956593933105
}
},
{
"code": "RR",
"name": "Rockridge",
"x": 445.36074513683093,
"y": 165.3618431656249,
"nameX": -20,
"nameY": -18,
"routes": [
"yellow"
],
"offsets": {
"yellow": 600.5845281982422
}
},
{
"code": "OW",
"name": "West Oakland",
"x": 350.1908433724288,
"y": 239.84746471214112,
"nameX": -70,
"nameY": -13,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 440.79460166931153,
"yellow": 451.432741394043,
"blue": 358.0613084938049,
"green": 435.8462658691406
}
},
{
"code": "EM",
"name": "Embarcadero",
"x": 242.86626160625372,
"y": 248.8465810839366,
"nameX": -79,
"nameY": -8,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 314.4929054260254,
"yellow": 338.6739905700684,
"blue": 471.6655000308228,
"green": 543.0215771484375
}
},
{
"code": "MT",
"name": "Montgomery Street",
"x": 222.53345882618805,
"y": 268.8065262252371,
"nameX": -117,
"nameY": -6,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 292.2934062194824,
"yellow": 308.8436332092285,
"blue": 499.2764748406983,
"green": 571.60166015625
}
},
{
"code": "PL",
"name": "Powell Street",
"x": 205.01421027183534,
"y": 285.4042817873834,
"nameX": -91,
"nameY": 2,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 267.0667025756836,
"yellow": 282.39404968261715,
"blue": 521.7311832704162,
"green": 593.0367224121094
}
},
{
"code": "CC",
"name": "Civic Center",
"x": 191.4310487190727,
"y": 305.76649480127264,
"nameX": -85,
"nameY": 4,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 238.8127944946289,
"yellow": 259.1263709411621,
"blue": 535.3187194824219,
"green": 614.4717846679688
}
},
{
"code": "16",
"name": "16th Street Mission",
"x": 188.67462086226791,
"y": 327.0067256691307,
"nameX": -119,
"nameY": 4,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 210.8952424621582,
"yellow": 236.0575612487793,
"blue": 568.8029053860473,
"green": 635.9068469238281
}
},
{
"code": "24",
"name": "24th Street Mission",
"x": 184.64212326612324,
"y": 347.66754772265904,
"nameX": -120,
"nameY": 4,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 191.38659164428708,
"yellow": 212.78988250732422,
"blue": 588.850591430664,
"green": 664.4869299316407
}
},
{
"code": "GP",
"name": "Glen Park",
"x": 169.1385176723171,
"y": 363.5643937920547,
"nameX": 13,
"nameY": 8,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 177.25963760375978,
"yellow": 196.28375143432618,
"blue": 610.3856987744141,
"green": 685.9219921875
}
},
{
"code": "BP",
"name": "Balboa Park",
"x": 158.79430814798923,
"y": 379.53695317035545,
"nameX": -82,
"nameY": -6,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 151.86475593566894,
"yellow": 173.0160726928711,
"blue": 627.0876428222656,
"green": 700.2120336914062
}
},
{
"code": "DC",
"name": "Daly City",
"x": 156.3311665538605,
"y": 397.1604901606404,
"nameX": -62,
"nameY": 4,
"routes": [
"red",
"yellow",
"blue",
"green"
],
"offsets": {
"red": 132.52428314208984,
"yellow": 150.74273919677734,
"blue": 646.4795634355163,
"green": 714.5020751953125
}
},
{
"code": "CM",
"name": "Colma",
"x": 160.98419984665702,
"y": 425.4218602246791,
"nameX": 16,
"nameY": 2,
"routes": [
"red",
"yellow",
"blue"
],
"offsets": {
"red": 101.41134864807128,
"yellow": 125.88410806274415,
"blue": 672.9721044921876
}
},
{
"code": "CV",
"name": "Castro Valley",
"x": 577.5645999231376,
"y": 395.7569965145458,
"nameX": 4,
"nameY": -14,
"routes": [
"blue"
],
"offsets": {
"blue": 73.415138671875
}
},
{
"code": "ED",
"name": "Dublin / Pleasanton",
"x": 644.9518940068036,
"y": 397.96949249867816,
"nameX": 14,
"nameY": 3,
"routes": [
"blue"
],
"offsets": {
"blue": 0
}
},
{
"code": "NC",
"name": "North Concord / Martinez",
"x": 576.5643980837334,
"y": 61.740233782883735,
"nameX": 16,
"nameY": 3,
"routes": [
"yellow"
],
"offsets": {
"yellow": 776.1858985290528
}
},
{
"code": "WP",
"name": "Pittsburg / Baypoint",
"x": 596.3787407822348,
"y": 40.58420126937335,
"nameX": 17,
"nameY": 3,
"routes": [
"yellow"
],
"offsets": {
"yellow": 792.890898651123
}
},
{
"code": "SS",
"name": "South San Francisco",
"x": 177.56221861569213,
"y": 446.7829217383964,
"nameX": 16,
"nameY": 3,
"routes": [
"red",
"yellow",
"blue"
],
"offsets": {
"red": 73.49379661560059,
"yellow": 92.87184591674806,
"blue": 703.5617456054688
}
},
{
"code": "SB",
"name": "San Bruno",
"x": 202.6848707394954,
"y": 469.8093068131293,
"nameX": -72,
"nameY": 13,
"routes": [
"red",
"yellow",
"blue"
],
"offsets": {
"red": 26.572127838134765,
"yellow": 62.84261950683594,
"blue": 726.5039764404297
}
},
{
"code": "MB",
"name": "Millbrae",
"x": 221.54718851863413,
"y": 496.68394520164,
"nameX": -57,
"nameY": 14,
"routes": [
"red",
"yellow",
"blue"
],
"offsets": {
"red": 5.718052825927735,
"blue": 757.0936175537109
}
},
{
"code": "SO",
"name": "San Francisco International Airport",
"x": 263.39984044084326,
"y": 469.4198474137625,
"nameX": 0,
"nameY": 24,
"routes": [
"red",
"yellow",
"blue"
],
"offsets": {
"yellow": 6.562678619384766
}
},
{
"code": "WD",
"name": "West Dublin / Pleasanton",
"x": 614.27280872887,
"y": 398.3866290775128,
"nameX": 2,
"nameY": 22,
"routes": [
"blue"
],
"offsets": {
"blue": 35.17808728027344
}
}
]
Raw
style.css
#richmond {
}
#richmondfremont {
}
#pbbaypoint {
}
.station text {
cursor: default;
font-size: 12px;
}
.current {
fill: #ff0000;
fill-opacity: 0.3;
stroke: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment