Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/glena/d3-resume
D3.js based resume visualizer
https://github.com/glena/d3-resume
Last synced: 10 days ago
JSON representation
D3.js based resume visualizer
- Host: GitHub
- URL: https://github.com/glena/d3-resume
- Owner: glena
- License: gpl-2.0
- Created: 2014-01-07T01:05:56.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-04-08T12:24:33.000Z (over 9 years ago)
- Last Synced: 2024-10-06T04:43:16.409Z (30 days ago)
- Size: 182 KB
- Stars: 39
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-d3 - d3-resume - Resume visualizer (Miscellaneous)
- awesome-d3 - d3-resume - Resume visualizer (Miscellaneous)
README
d3-resume
=========
D3.js based resume visualizer
Demo
----
http://germanlena.com.ar/experience
How to
------
Just include the D3.js library
```
```
and then the resume.js
```
```
and finally, instanciate the graph:
```
var resume = new d3Resume({
width: 900,
height: 900,
wrapperSelector: "article.resume",
dataUrl: 'data.json',
getItemFillCollor: function (item) {
return '#' + (function co(lor){ return (lor +=
[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
&& (lor.length == 6) ? lor : co(lor); })('');
}
});
```
*getItemFillCollor* is a callback invoked to get the item color. It receives the experience or education item by param.
Data source
-----------
You need to create a file with your experience and studies formatted as json.
Format:
```
{
"experience":[
{
"type":"Work",
"institution":"First job institution",
"title":"The job title!",
"from":"2006-05-01",
"to":"2006-09-30",
"description":"all what i have done \n and this is a second line",
"default_item":false
},
{
"type":"Trainee",
"institution":"Seocond job institution",
"title":"The jon title!",
"from":"2006-05-01",
"to":null, /* because this is my current job, it doesn't have an end date */
"description":"all what i have done \n and this is a second line",
"default_item":true
}
],
"study":[
{
"type":"Study",
"institution":"Fist stydy",
"title":"My title",
"from":"2007-03-01",
"to":"2011-12-20",
"description":"",
"default_item":false
},
{
"type":"Study",
"institution":"Also, I study another thing",
"title":"IDK",
"from":"2013-08-30",
"to":null,
"description":"",
"default_item":false
}
]
}
```
Notes:
- type: is the text shown on the first line.
- to: if this attribute is null, it will count as an ongoing job/study and will be shown as an unfinished one.
- description: when a "\n" is found will generate a new line (because SVG does not support text wrapping at the moment).
- default_item: if this attribute is true, it will be the default text when there is no item selected.
[](http://germanlena.com.ar)