Skip to content

Instantly share code, notes, and snippets.

@randomblink
Last active February 11, 2016 21:25
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 randomblink/1022589acfbbadb14576 to your computer and use it in GitHub Desktop.
Save randomblink/1022589acfbbadb14576 to your computer and use it in GitHub Desktop.
D3 objTimeline

Timeline

This is an attempt to create a timeline object that can be implemented quickly and easily on a webpage.

Canvas.js

The jsObject manages the canvas that the timeline is rendered on.

SVG.css

This is the style component.

The bl.ocks.org is located here.

function slCanvas(top, right, bottom, left, width, height)
{
this.setMargin("top", top);
this.setMargin("right", right);
this.setMargin("bottom", bottom);
this.setMargin("left", left);
this.negWidth = width - left - right;
this.posWidth = width + left + right;
this.negHeight = height - top - bottom;
this.posHeight = height + top + bottom;
}
slCanvas.prototype = {
constructor: slCanvas,
setMargin: function( targetedMargin, marginAmount )
{
this["_" + targetedMargin] = marginAmount;
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="style/svg.css">
</head>
<body>
</body>
<script src="js/canvas.js" charset="utf-8"></script>
<script src="js/objTimeline.js" charset="utf-8"></script>
<script>
var newLine = new objTimeline( "2014-01-01", "2015-12-31" );
</script>
</html>
function objTimeline(startDate, endDate)
{
// Set default Format
this.setFormat("%Y-%m-%d");
this.setStartDate( startDate );
this.setEndDate( endDate );
// Size the canvas
this.setMargin( 100, 100, 100, 100, 960, 500 );
// Set the Scale for the timeline
this.setScale();
// Build the SVG
this.buildSVG();
}
objTimeline.prototype = {
constructor: objTimeline,
// Set the format for the date display onscreen
// Example : this.setFormat("%Y-%m-%d");
setFormat: function( newFormat )
{
this._format = d3.time.format( newFormat );
},
// Set the visibly uppermost reach of the timeline
// Set the oldest date visible on the timeline
// datePoint should follow setFormat
setStartDate: function (datePoint)
{
this._startDate = this._format.parse(datePoint);
},
// Set the visibly lowermost reach of the timeline
// Set the newest date visible on the timeline
// datePoint should follow setFormat
setEndDate: function (datePoint)
{
this._endDate = this._format.parse(datePoint);
},
// Set the margins in bulk for the SVG Canvas
setMargin: function(top, right, bottom, left, width, height)
{
this._margin = new slCanvas( top, right, bottom, left, width, height );
},
// Set the scale for the timeline
// https://github.com/mbostock/d3/wiki/Time-Scales#_scale
setScale: function ()
{
this._scale = d3.time.scale()
.domain( [this._startDate, this._endDate] )
.nice( d3.time.week )
.range( [this._margin.negHeight, 0] );
},
buildSVG:function ()
{
this._svg = d3.select("body").append("svg")
.attr( "width", this._margin.posWidth )
.attr( "height", this._margin.posHeight )
.append( "g" )
.attr( "transform", "translate(" + this._margin._left + "," + this._margin._top + ")");
this._svg
.append( "g" )
.attr( "class", "x axis" )
.call( d3.svg.axis().scale(this._scale).orient("right"));
}
}
.axis text
{
font: 10px sans-serif;
}
.axis path, .axis line
{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
�PNG

IHDR�xid�tIME� 0�7��tEXtSoftwareGLDPNG ver 3.4q���tpNGGLD3J�)gAMA�� �abKGD��������IDATx��͑�8FY�&�Id��lv
d�p�jn{؃#���+~�D�Im�w�1 դ�g@������߿�xxB�е�TP��e�G�v���I�3s��EPx(P���P ��b�,�le���� ���ŧ�r���_����3�?>>��8�y@���e��U���X)�o"'���H�v����� �����k��n������R6 C�(G��m����S��}`#*��c.�hS.n����Ϡ�� �I�U�6�{��?���J�+j�y����w��*z�Rv\1xNe:�_��-^���@.Y�B�8P>�J�VVwZ�e����&�uv֙�e�0���_`F����n2�B���W�ȧ0�9�c)_���f��I�V�]��kɉ�iU�i�vs���7��ڌ�P&vЦ,�.��p[����g����Gp�j����9��~r7��U���Q���f2�\X_��B��O~�|\ŗm�1+;w,�c��3����G��gSo^e��es��/���U�9�������&��Pf����Ry�i+�u C��QX��ҍ@� s�Y��8�B(�^��Ot�'���(�8\KY]@M�S���,�e'?Ԃ��c�죳]Y94��.�� �*㺦s�6�\��=������'�G��a���`�ZI����k2�\����r���n�w���s�wV��2i1�'�~����j��o �;7}Q�+.�BعP M�S�%��qr�A��5y��w�D$|�LZ �vH�s����� �7;"��&�pVG�vP����=�r�á,L�%r�A�=6���Y��0M7�c���jjUo��1P����e��w�uV{�A�M(�Ԫ`vOGwg�ٕ�5��4Y����T?tt�}���p���<v7�����?����ea�9e�TBfХ�Z���n!�s:GsZ��kN ea�n4J�����\�U�
K �q�O�d]a�1M��( �x�J~�A�� �3z�ۀ�U�]���,��j�{WN>��0�-�v�Ԩ��0W ��q0N���[��6��L[�uSf�,lB�]<��o�T9^3�eagUC��b{�@��b�,e�( �@Y(�B1P���P ��blR6�~|���"+�\̳�0��J�铌�Pi��n�2��P�{,��٤���|5y�y��*_e5>-���a)?o�>n�� ���&?�#=��O��irߎ�}��r�Á��R��1�p雃���*��OD��Zo���l^��M� ~�/*p���e��H��ʾ �8^�l~��Jp��_�X���|}��[�tT=>�̘��~ui��q�@���+��fӺ_nxr�Tާ���͙�yֆ����K)��"�i�+���P ��b�,e�( �@Y(�B1P���P ��b�,e�( �@Y(�B1P���P ��b�,e�( �@Y(�B1P���P ��b�,e�( �@Y(�B1h�/�5<к_k�ۺ_����� ����Ϗî�Y��y2u}]������끼�n�����%�H�O��ur�s|>,R����%ee���Or��_ ;�c��e�ꄮu�P����7Ii%~����<�Ħ���d�e^^^������r�9y�
���N�����U���-�Ϻ_�ͭR�٧ֱ�ۯ5;7�q�~���(�B1P���P ��b�,e�( �@Y(�B1P���P ��b�,e�( �@Y(�B1P���P�#e�?�{ߓ�g�t) �P�,�e�����������!.t���wIEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment