Built with blockbuilder.org
Last active
January 20, 2016 05:21
-
-
Save N0taN3rd/9c18cc951d46d2267903 to your computer and use it in GitHub Desktop.
better
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{ | |
"Year":2012, | |
"City":"London", | |
"Country":"Great Britain", | |
"Countries":205, | |
"Participants":10519, | |
"Men":"5864", | |
"Women":"4655", | |
"Sports":32, | |
"Events":302 | |
}, | |
{ | |
"Year":2008, | |
"City":"Beijing", | |
"Country":"China", | |
"Countries":204, | |
"Participants":10901, | |
"Men":"6290", | |
"Women":"4611", | |
"Sports":34303, | |
"Events":null | |
}, | |
{ | |
"Year":2004, | |
"City":"Athina", | |
"Country":"Greece", | |
"Countries":201, | |
"Participants":10561, | |
"Men":"6257", | |
"Women":"4304", | |
"Sports":34, | |
"Events":301 | |
}, | |
{ | |
"Year":2000, | |
"City":"Sydney", | |
"Country":"Australia", | |
"Countries":200, | |
"Participants":10648, | |
"Men":"6579", | |
"Women":"4068", | |
"Sports":34, | |
"Events":300 | |
}, | |
{ | |
"Year":1996, | |
"City":"Atlanta", | |
"Country":"United States", | |
"Countries":197, | |
"Participants":10342, | |
"Men":"6819", | |
"Women":"3520", | |
"Sports":31, | |
"Events":271 | |
}, | |
{ | |
"Year":1992, | |
"City":"Barcelona", | |
"Country":"Spain", | |
"Countries":169, | |
"Participants":9386, | |
"Men":"6659", | |
"Women":"2721", | |
"Sports":29, | |
"Events":257 | |
}, | |
{ | |
"Year":1988, | |
"City":"Seoul", | |
"Country":"South Korea", | |
"Countries":159, | |
"Participants":8453, | |
"Men":"6249", | |
"Women":"2202", | |
"Sports":27, | |
"Events":237 | |
}, | |
{ | |
"Year":1984, | |
"City":"Los Angeles", | |
"Country":"United States", | |
"Countries":140, | |
"Participants":6799, | |
"Men":"5224", | |
"Women":"1567", | |
"Sports":26, | |
"Events":221 | |
}, | |
{ | |
"Year":1980, | |
"City":"Moskva", | |
"Country":"Soviet Union", | |
"Countries":80, | |
"Participants":5259, | |
"Men":"4135", | |
"Women":"112\"", | |
"Sports":23, | |
"Events":203 | |
}, | |
{ | |
"Year":1976, | |
"City":"Montréal", | |
"Country":"Canada", | |
"Countries":92, | |
"Participants":6073, | |
"Men":"4812", | |
"Women":"1260", | |
"Sports":23, | |
"Events":198 | |
}, | |
{ | |
"Year":1972, | |
"City":"München", | |
"Country":"West Germany", | |
"Countries":121, | |
"Participants":7113, | |
"Men":"6052", | |
"Women":"1060", | |
"Sports":23, | |
"Events":195 | |
}, | |
{ | |
"Year":1968, | |
"City":"Ciudad de México", | |
"Country":"Mexico", | |
"Countries":112, | |
"Participants":5558, | |
"Men":"4775", | |
"Women":"783", | |
"Sports":20, | |
"Events":172 | |
}, | |
{ | |
"Year":1964, | |
"City":"Tokyo", | |
"Country":"Japan", | |
"Countries":93, | |
"Participants":5137, | |
"Men":"4457", | |
"Women":"680", | |
"Sports":21, | |
"Events":163 | |
}, | |
{ | |
"Year":1960, | |
"City":"Roma", | |
"Country":"Italy", | |
"Countries":83, | |
"Participants":5351, | |
"Men":"4738", | |
"Women":"613", | |
"Sports":19, | |
"Events":150 | |
}, | |
{ | |
"Year":1956, | |
"City":"Melbourne", | |
"Country":"Australia", | |
"Countries":67, | |
"Participants":3189, | |
"Men":"2818", | |
"Women":"371", | |
"Sports":18, | |
"Events":145 | |
}, | |
{ | |
"Year":1952, | |
"City":"Helsinki", | |
"Country":"Finland", | |
"Countries":69, | |
"Participants":4932, | |
"Men":"4411", | |
"Women":"521", | |
"Sports":19, | |
"Events":149 | |
}, | |
{ | |
"Year":1948, | |
"City":"London", | |
"Country":"Great Britain", | |
"Countries":59, | |
"Participants":4397, | |
"Men":"3951", | |
"Women":"445", | |
"Sports":21, | |
"Events":149 | |
}, | |
{ | |
"Year":1936, | |
"City":"Berlin", | |
"Country":"Germany", | |
"Countries":49, | |
"Participants":4484, | |
"Men":"4124", | |
"Women":"360", | |
"Sports":24, | |
"Events":143 | |
}, | |
{ | |
"Year":1932, | |
"City":"Los Angeles", | |
"Country":"United States", | |
"Countries":47, | |
"Participants":1921, | |
"Men":"1719", | |
"Women":"202", | |
"Sports":18, | |
"Events":126 | |
}, | |
{ | |
"Year":1928, | |
"City":"Amsterdam", | |
"Country":"Netherlands", | |
"Countries":46, | |
"Participants":3248, | |
"Men":"2,936", | |
"Women":"312", | |
"Sports":17, | |
"Events":120 | |
}, | |
{ | |
"Year":1924, | |
"City":"Paris", | |
"Country":"France", | |
"Countries":45, | |
"Participants":3256, | |
"Men":"3100", | |
"Women":"156", | |
"Sports":20, | |
"Events":130 | |
}, | |
{ | |
"Year":1920, | |
"City":"Antwerpen", | |
"Country":"Belgium", | |
"Countries":29, | |
"Participants":2677, | |
"Men":"2,599", | |
"Women":"78", | |
"Sports":25, | |
"Events":160 | |
}, | |
{ | |
"Year":1912, | |
"City":"Stockholm", | |
"Country":"Sweden", | |
"Countries":29, | |
"Participants":2424, | |
"Men":"2356", | |
"Women":"53", | |
"Sports":17, | |
"Events":107 | |
}, | |
{ | |
"Year":1908, | |
"City":"London", | |
"Country":"Great Britain", | |
"Countries":22, | |
"Participants":2024, | |
"Men":"1980", | |
"Women":"44", | |
"Sports":24, | |
"Events":109 | |
}, | |
{ | |
"Year":1906, | |
"City":"Athina", | |
"Country":"Greece", | |
"Countries":21, | |
"Participants":841, | |
"Men":"835", | |
"Women":"6", | |
"Sports":13, | |
"Events":74 | |
}, | |
{ | |
"Year":1904, | |
"City":"St. Louis", | |
"Country":"United States", | |
"Countries":15, | |
"Participants":650, | |
"Men":"644", | |
"Women":"6", | |
"Sports":18, | |
"Events":95 | |
}, | |
{ | |
"Year":1900, | |
"City":"Paris", | |
"Country":"France", | |
"Countries":31, | |
"Participants":1224, | |
"Men":"1201", | |
"Women":"23", | |
"Sports":20, | |
"Events":95 | |
}, | |
{ | |
"Year":1896, | |
"City":"Athina", | |
"Country":"Greece", | |
"Countries":12, | |
"Participants":176, | |
"Men":"176", | |
"Women":"0", | |
"Sports":9, | |
"Events":43 | |
} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
svg { width:100%; height: 100% } | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
// Feel free to change or delete any of the code you see! | |
var margin = {top: 20, right: 80, bottom: 30, left: 50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d) { return x(d.Year); }) | |
.y(function(d) { return y(d.Events); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
console.log("you are now rocking with d3", d3); | |
d3.json('data.json',function(error,json){ | |
if(error){ | |
console.log(error); | |
throw(error); | |
} | |
x.domain(d3.extent(json,function(d){return d.Year;})); | |
y.domain([43,303]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Temperature (ºF)"); | |
city.append("path") | |
.attr("class", "line") | |
.attr("d", function(d) { return line(d.values); }) | |
.style("stroke", function(d) { return color(d.name); }); | |
//json.forEach(function(elem){console.log(elem.Year);}); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment