Skip to content

Instantly share code, notes, and snippets.

@jsl6906

jsl6906/.block

Created July 27, 2017 17:06
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 jsl6906/f2d6ffeeba886e13950dc656c047619d to your computer and use it in GitHub Desktop.
Save jsl6906/f2d6ffeeba886e13950dc656c047619d to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.axis text {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script>
var data = [
{line: 1750, sum_trip: 109},
{line: 1751, sum_trip: 38},
{line: 1760, sum_trip: 165},
{line: 1770, sum_trip: 98},
{line: 1771, sum_trip: 41},
{line: 1900, sum_trip: 131},
{line: 1910, sum_trip: 39},
{line: 1950, sum_trip: 83},
{line: 1980, sum_trip: 5},
{line: 2110, sum_trip: 77},
{line: 2120, sum_trip: 8},
{line: 2130, sum_trip: 150},
{line: 2140, sum_trip: 15},
{line: 2150, sum_trip: 68},
{line: 2160, sum_trip: 4},
{line: 2170, sum_trip: 92},
{line: 2180, sum_trip: 3},
];
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var xRange = d3.scale.ordinal()
.rangeRoundBands([10, 500], 0.1)
.domain(data.map(function(d) { return d.line; }));
var xAxis = d3.svg.axis()
.scale(xRange)
.tickSubdivide(true);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, 250)')
.call(xAxis);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment