Use only Javascript and SVG to produce a data analysis / visualization report.
This report is prepared by
<rect x="0"
y="0"
height="158.66575281817254"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="10"
y="0"
height="149.44992756247734"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="20"
y="0"
height="172.7923704016223"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="30"
y="0"
height="133.31682655211728"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="40"
y="0"
height="115.14681525183"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="50"
y="0"
height="134.77009091567862"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="60"
y="0"
height="145.14575378538512"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="70"
y="0"
height="141.31709758131777"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="80"
y="0"
height="201.22192793687577"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="90"
y="0"
height="121.69831246802728"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="100"
y="0"
height="143.5902475848636"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="110"
y="0"
height="163.00791419348118"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="120"
y="0"
height="118.22147835153376"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="130"
y="0"
height="139.35788758316625"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="140"
y="0"
height="182.5745738412081"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="150"
y="0"
height="152.46957291436158"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="160"
y="0"
height="159.08494127025062"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="170"
y="0"
height="149.20389054939974"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="180"
y="0"
height="154.766291230893"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="190"
y="0"
height="119.86620104359126"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="200"
y="0"
height="152.65970934752707"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="210"
y="0"
height="144.98595463195096"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="220"
y="0"
height="172.96759296459038"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="230"
y="0"
height="165.67460967602958"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="240"
y="0"
height="154.6861672278339"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="250"
y="0"
height="144.3986447723066"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="260"
y="0"
height="100.26832490547127"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="270"
y="0"
height="134.5129094631483"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="280"
y="0"
height="157.78648191158524"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="290"
y="0"
height="125.62223068749122"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="300"
y="0"
height="147.74259047750897"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="310"
y="0"
height="142.1526307361079"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="320"
y="0"
height="142.7198283511059"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="330"
y="0"
height="156.0757560604079"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="340"
y="0"
height="140.770570171273"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="350"
y="0"
height="179.3616498555338"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="360"
y="0"
height="147.90042238253653"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="370"
y="0"
height="127.94819520946541"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="380"
y="0"
height="162.99145545952535"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="390"
y="0"
height="129.52278445624825"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="400"
y="0"
height="160.94798159061187"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="410"
y="0"
height="128.51169627220415"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="420"
y="0"
height="188.70863040300833"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="430"
y="0"
height="182.49207754384614"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="440"
y="0"
height="143.3010537992235"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="450"
y="0"
height="124.78360655737704"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="460"
y="0"
height="152.21359199040447"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="470"
y="0"
height="125.27936709173383"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="480"
y="0"
height="140.5458629126058"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="490"
y="0"
height="168.26458783198524"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="500"
y="0"
height="111.44838937220784"
width="10"
style="fill:green;
stroke-width:3;
stroke:rgb(0,0,0)" /><rect x="${d.x}"
y="${d.y}"
height="${d.height}"
width="${d.width}"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />var S = _.filter(data,function(x){
return _.contains(x["Area Type"], "State") && _.contains(x["Ownership"],"Total Covered");
});
var group = _.groupBy(S, function(x){
return x["St Name"];
});
var a = _.map(group, function(x,values){
})
var map = _.map(group, function(x,value){
var est = _.pluck(x,"Annual Average Establishment Count");
var emp = _.pluck(x,"Annual Average Employment");
var str_est = est.toString();
var str_emp = emp.toString();
var est_n = _.parseInt(str_est.split(",").join(""));
var emp_n = _.parseInt(str_emp.split(",").join(""));
var diff = emp_n/est_n;
return {"state": value, "est": diff};
});
console.log(map);
function computeX(d, i) {
return i*10;
}
function computeHeight(d, i) {
return d.est *10 ;
}
function computeWidth(d, i) {
return 10;
}
function computeY(d, i) {
return 0;
}
function computeColor(d, i) {
return 'green'
}
var viz = _.map(map, function(d, i){
return {
x: computeX(d, i),
y: computeY(d, i),
height: computeHeight(d, i),
width: computeWidth(d, i),
color: computeColor(d, i)
}
})
console.log(viz)
var result = _.map(viz, function(d){
// invoke the compiled template function on each viz data
return template({d: d});
})
return result.join('\n')<rect x="0"
y="0"
height="20"
width="73.591"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="0"
y="20"
height="20"
width="63.44"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="0"
y="40"
height="20"
width="60.325"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="0"
y="60"
height="20"
width="59.858"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" />
<rect x="0"
y="80"
height="20"
width="58.676"
style="fill:red;
stroke-width:3;
stroke:rgb(0,0,0)" /><rect x="${d.x}"
y="${d.y}"
height="${d.height}"
width="${d.width}"
style="fill:${d.color};
stroke-width:3;
stroke:rgb(0,0,0)" />var coloCounties = _.filter(data,function(n){
return (_.includes(n["Area"],"County") ) && ( n["Ownership"] == "Total Covered") && ( n["St Name"] == "Colorado")
})
counties = _.groupBy(coloCounties, function(n){
return n["Area"]
})
pay = _.mapValues(counties, function(n){
var y = _.pluck(n,"Annual Average Pay")
y = y.toString()
var x = _.parseInt(y.split(',').join(''))
return x
})
// Finally, convert object to array type and sort by pay
var sortPay =
_.sortByOrder(
_.pairs(pay),
function(d) {return d[1]},
'desc')
var top5 = _.take(sortPay, 5)
function computeX(d, i) {
return 0
}
function computeHeight(d, i) {
return 20
}
function computeWidth(d, i) {
// return 20 * i + 100
return d[1]/1000
}
function computeY(d, i) {
return 20 * i
}
function computeColor(d, i) {
return 'red'
}
function computeLabel(d, i) {
name = d[0].split(' ')
return name[0]+': $'+d[1]
}
var viz = _.map(top5, function(d, i){
return {
x: computeX(d, i),
y: computeY(d, i),
height: computeHeight(d, i),
width: computeWidth(d, i),
color: computeColor(d, i),
label: computeLabel(d, i)
}
})
//console.log(viz)
var result = _.map(viz, function(d){
// invoke the compiled template function on each viz data
return template({d: d})
})
return result.join('\n')