Skip to content

Instantly share code, notes, and snippets.

@fabiomainardi

fabiomainardi/FrequentSkills.csv

Last active June 23, 2018 04:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save fabiomainardi/4169694a746dffcf1762 to your computer and use it in GitHub Desktop.
Save fabiomainardi/4169694a746dffcf1762 to your computer and use it in GitHub Desktop.
Download ZIP
Frequent skills required for data science jobs
Raw
FrequentSkills.csv
Skills Value Category
SQL 488 DatabaseSoftware
Python 367 ProgrammingLanguage
R 194 StatisticSoftware
SAS 163 StatisticSoftware
Pig 123 CloudSoftware
SPSS 110 StatisticSoftware
Hadoop 94 CloudSoftware
Java/Javascript 73 ProgrammingLanguage
MapReduce/Elastic MapReduce 72 CloudSoftware
NoSQL 64 CloudSoftware
Ruby 55 ProgrammingLanguage
Hive 49 CloudSoftware
mySQL 42 DatabaseSoftware
Teradata 26 DatabaseSoftware
C/C++/C#/Objective-C 22 ProgrammingLanguage
STATA 21 StatisticSoftware
MatLab 8 StatisticSoftware
Oracle 7 DatabaseSoftware
HTML/HTML5 7 ProgrammingLanguage
Hive 3 CloudSoftware
Perl 2 ProgrammingLanguage
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.legend {
margin-left:10px;
margin-top:10px;
fill:black;
stroke:black;
opacity:0.8;
width:190px;
}
.chart rect {
fill:steelblue;
background-color: steelblue;
}
.chart text {
font: 11px sans-serif;
}
</style>
<svg class="chart"></svg>
<svg class="legend" >
<rect width="18" height="18" style="fill: rgb(255, 127, 14); stroke: rgb(255, 127, 14);"></rect>
<text x="22" y="14">Programming Language</text>
</svg>
<svg class="legend" >
<rect width="18" height="18" style="fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180);"></rect>
<text x="22" y="14">Database Software</text>
</svg>
<svg class="legend" >
<rect width="18" height="18" style="fill: rgb(44, 164, 44); stroke: rgb(44, 164, 44);"></rect>
<text x="22" y="14">Statistic Software</text>
</svg>
<svg class="legend">
<rect width="18" height="18" style="fill: rgb(214, 39, 40); stroke: rgb(214, 39, 40);"></rect>
<text x="22" y="14">Cloud Software</text>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 1250,
barHeight = 20;
var x = d3.scale.linear()
.range([10, width/2]);
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.category10();
var chart = d3.select(".chart")
.attr("width", width);
//Title
chart.append("text")
.attr("x", (width )/2)
.attr("y", 150)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Frequent skills required for data scientists");
var data = [
{Skills: "SQL", Value:488,Category:"DatabaseSoftware" },
{Skills: "Python", Value:367,Category:"ProgrammingLanguage" },
{Skills: "R", Value:194,Category:"StatisticSoftware" },
{Skills: "SAS", Value:163,Category:"StatisticSoftware" },
{Skills: "Pig", Value:123,Category:"CloudSoftware" },
{Skills: "SPSS", Value:110,Category:"StatisticSoftware" },
{Skills: "Hadoop", Value:94, Category:"CloudSoftware" },
{Skills: "Java/Javascript", Value:73, Category:"ProgrammingLanguage" },
{Skills: "MapReduce/Elastic MapReduce", Value:72, Category:"CloudSoftware" },
{Skills: "NoSQL", Value:64, Category:"CloudSoftware" },
{Skills: "Ruby", Value:55, Category:"ProgrammingLanguage" },
{Skills: "Hive", Value:49, Category:"CloudSoftware" },
{Skills: "mySQL", Value:42, Category:"DatabaseSoftware" },
{Skills: "Teradata", Value:26, Category:"DatabaseSoftware" },
{Skills: "C/C++/C#/Objective-C", Value:22, Category:"ProgrammingLanguage" },
{Skills: "STATA", Value:21, Category:"StatisticSoftware" },
{Skills: "MatLab", Value:8, Category:"StatisticSoftware" },
{Skills: "Oracle", Value:7, Category:"DatabaseSoftware" },
{Skills: "HTML/HTML5", Value:7, Category:"ProgrammingLanguage" },
{Skills: "Hive", Value:3, Category:"CloudSoftware" },
{Skills: "Perl", Value:2, Category:"ProgrammingLanguage" },
];
function render(data,category){
// d3.csv("FrequentSkills.csv", type, function(error, data) {
x.domain([0, d3.max(data, function(d) { return d.Value; })]);
chart.attr("height", barHeight * data.length);
var legend = chart.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('recta')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.data(data)
.transition()
.delay(function (d, i) { return i*100; })
.attr("width", function(d) { return x(d.Value); })
.attr("height", barHeight - 1)
.style("fill",function(d){return color(d.Category);});
bar.append("text")
.attr("x", function(d) { return x(d.Value) -2; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill","white")
.attr("text-anchor","end")
.style("font-weight","bold")
.text(function(d) { return d.Value; });
bar.append("text")
.attr("x", function(d) { return x(d.Value) +5; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill","black")
.attr("text-anchor","start")
.transition()
.delay(function (d, i) { return i*100; })
.text(function(d) { return d.Skills; });
/* bar.selectAll("rect")
.filter(function (d, i) {
return d.Category == category;
})
.style("fill","red");*/
// .classed("selected", true);
//.style("fill","red") ;
//});
}
render(data);
function select(category) {
render(data,category);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment