Last active
November 10, 2021 19:18
-
-
Save iankronquist/c26f0c211aaf39b1fad9 to your computer and use it in GitHub Desktop.
A D3.js visualization of my resume
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> | |
| <html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <title>User content</title> | |
| <body> | |
| <script src="main.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
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
| "use strict"; // well this is stupid | |
| var apiUrl = "https://gist.githubusercontent.com/iankronquist/c26f0c211aaf39b1fad9/raw/d957ab4bfe60c97945ee2c5bc9e1c16c0965875c/resume.json" | |
| var height = window.innerHeight; | |
| var width = window.innerWidth; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .classed("timeline", true); | |
| var labelsContainer = d3.select("body").append("div"); | |
| var workNest = d3.nest() | |
| .key(function (d) { return d; }) | |
| .rollup(function (group) { | |
| return { | |
| count: group.length, | |
| earliestDate: group.map(function (d) { | |
| return Date(d.startDate); | |
| }).sort()[0], | |
| latestDate: group.map(function (d) { | |
| return Date(d.endDate); | |
| }).sort().pop() | |
| } | |
| }); | |
| console.log(workNest); | |
| var educationNest = d3.nest() | |
| .key(function (d) { return d; }) | |
| .rollup(function (group) { | |
| return { | |
| count: group.length, | |
| earliestDate: group.map(function (d) { | |
| return Date(d.startDate); | |
| }).sort()[0], | |
| latestDate: group.map(function (d) { | |
| return Date(d.endDate); | |
| }).sort().pop() | |
| } | |
| }); | |
| console.log(educationNest); | |
| // var layout = d3.layout.pack() | |
| // .value(function (d) { return d.count }) | |
| // .size([width, height]) | |
| // .padding(3); | |
| // | |
| // var happyColorScale = d3.scale.ordinal() | |
| // .domain([true, false, undefined]) | |
| // .range(["#76B472", "#D76058", "none"]); | |
| // | |
| // var textSizeScale = d3.scale.linear() | |
| // .domain([25, 100]) | |
| // .range([0.5, 1.0]) | |
| // .clamp(true); | |
| // | |
| // var productHappitude = []; | |
| function resize() { | |
| height = window.innerHeight; | |
| width = window.innerWidth; | |
| layout = layout.size([width, height]); | |
| svg.attr("width", width).attr("height", height); | |
| draw(); | |
| } | |
| window.onresize = resize; | |
| function draw() { | |
| var data = layout({ children: productHappitude }) | |
| .filter(function (d) { return d.parent !== null; }); | |
| var bubbles = svg.selectAll(".bubble") | |
| .data(data); | |
| bubbles.enter() | |
| .append("circle") | |
| .classed("bubble", true); | |
| bubbles | |
| .attr("cx", function (d) { return d.x; }) | |
| .attr("cy", function (d) { return d.y; }) | |
| .attr("r", function (d) { return d.r; } ) | |
| .attr("fill", function (d) { return happyColorScale(d.happy); }); | |
| bubbles.exit().remove(); | |
| var labels = labelsContainer.selectAll(".label") | |
| .data(data); | |
| labels.enter() | |
| .append("div") | |
| .classed("label", true); | |
| labels | |
| .text(function (d) { return d.product; } ) | |
| .style("left", function (d) { return d.x + "px"; }) | |
| .style("top", function (d) { return d.y + "px"; }) | |
| .style("text-align", "center") | |
| .style("max-width", function (d) { return (d.r * 2) / textSizeScale(d.r) + "px"; }) | |
| .style("position", "absolute") | |
| .style("transform", function (d) { return " translate(-50%, -50%) scale(" + textSizeScale(d.r) + ")" }); | |
| labels.exit().remove(); | |
| } | |
| d3.json(apiUrl, function(error, data) { | |
| console.log(data); | |
| educationNestData = educationNest.map(data.work, d3.map).values(); | |
| workNestData = workNest.map(data.education, d3.map).values(); | |
| //draw(workNestData, educationNestData); | |
| }); |
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
| { | |
| "bio": { | |
| "firstName": "Ian", | |
| "lastName": "Kronquist", | |
| "email": { | |
| "work": "iankronquist@osuosl.org", | |
| "personal": "iankronquist@gmail.com" | |
| }, | |
| "summary": "Enthusiastic and experienced student of computer science, enjoys solving the difficult problems which make the field fascinating. A quick learner, eager to apply new concepts and technologies.", | |
| "location": { | |
| "city": "Corvallis", | |
| "countryCode": "US", | |
| "state": "Oregon" | |
| }, | |
| "profiles": { | |
| "github": "github.com/iankronquist" | |
| } | |
| }, | |
| "work": [ | |
| { | |
| "company": "Mozilla", | |
| "position": "Summer Intern", | |
| "website": "mozilla.org", | |
| "startDate": "2014-06-30", | |
| "endDate": "2014-08-21", | |
| "summary": "Web engineer for input.mozilla.org. Wrote a Bayesian spam detection and filtering system for a Python Django web application as well as data visualizations of user feedback using Javascript and D3.js." | |
| }, | |
| { | |
| "company": "Oregon State University Open Source Lab", | |
| "position": "Developer", | |
| "website": "osuosl.org", | |
| "startDate": "2014-11-10", | |
| "endDate": "2014-06-13", | |
| "summary": "Wrote web back-end and deployment scripts for the Oregon Virtual School Districts websites. Designed and began implementing power supply management software for the lab's production data center. Contributed to Ganeti Web Manager Virtual Machine management software. Used Python, Flask, and Chef." | |
| }, | |
| { | |
| "company": "Reach Technology", | |
| "position": "Summer Intern", | |
| "website": "osuosl.org", | |
| "startDate": "2013-07-22", | |
| "endDate": "2014-09-27", | |
| "summary": "Wrote software for the customer development kit for a graphics display module running Linux. Wrote the company product wiki and documentation. Created customer video tutorials. Used C++, the Qt Framework, and QML languages" | |
| }, | |
| { | |
| "company": "Village Home Education Resource Center", | |
| "position": "Board Member and Student Representative", | |
| "website": "villagehome.org", | |
| "startDate": "2011-09", | |
| "endDate": "2012-06", | |
| "summary": "Represented the student body of a Beaverton based education non-profit. Was a member of the Technology Committee and the Finance Committee." | |
| } | |
| ], | |
| "education": [{ | |
| "institution": "Oregon State University", | |
| "area": "Corvallis, Oregon", | |
| "studyType": "Computer Science undergraduate", | |
| "startDate": "2013-09-21", | |
| "endDate": "" | |
| }, | |
| { | |
| "institution": "AFS Turkey", | |
| "area": "Adana, Turkey", | |
| "studyType": "International Study Abroad Program", | |
| "startDate": "2012-09-21", | |
| "endDate": "2013-07-11" | |
| } | |
| ], | |
| "awards": [{ | |
| "title": "Eagle Scout", | |
| "awardDate": "2013-08", | |
| "awarder": "The Boy Scouts of America" | |
| }], | |
| "skills": [{ | |
| "name": "Turkish Language", | |
| "level": "Proficient" | |
| }], | |
| "hobbies": [{ | |
| "name": "string", | |
| "keywords": [ | |
| "string" | |
| ] | |
| }], | |
| "references": "Please contact for references." | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment