Skip to content

Instantly share code, notes, and snippets.

@qharlie

qharlie/.block

Last active April 30, 2017 12:43
Show Gist options
  • Save qharlie/e0995aaea22e7495ac9753fc4754e407 to your computer and use it in GitHub Desktop.
Save qharlie/e0995aaea22e7495ac9753fc4754e407 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
app.js
/**
* Created by q on 4/26/17.
*/
window.charts =
{
pie1: null,
pie2: null,
pie3: null,
bubbles: null,
};
var DATA_COUNT = 5
var database =
{
'income': {
'blank': [
{"name": "$0", "value": 1},
{"name": "$1-24,999", "value": 1},
{"name": "$25,000-49,999", "value": 1},
{"name": "$50,000-74,999", "value": 1},
{"name": "$75,000-99,999", "value": 1},
{"name": "$100,000+", "value": 1}
],
'AA': [
{"name": "$0", "value": 144},
{"name": "$1-24,999", "value": 183},
{"name": "$25,000-49,999", "value": 678},
{"name": "$50,000-74,999", "value": 717},
{"name": "$75,000-99,999", "value": 483},
{"name": "$100,000+", "value": 596},
]
,
'A': [
{"name": "$0", "value": 124},
{"name": "$1-24,999", "value": 238},
{"name": "$25,000-49,999", "value": 861},
{"name": "$50,000-74,999", "value": 745},
{"name": "$75,000-99,999", "value": 378},
{"name": "$100,000+", "value": 347},
]
,
'B': [
{"name": "$0", "value": 170},
{"name": "$1-24,999", "value": 399},
{"name": "$25,000-49,999", "value": 1237},
{"name": "$50,000-74,999", "value": 881},
{"name": "$75,000-99,999", "value": 449},
{"name": "$100,000+", "value": 444},
]
,
'C': [
{"name": "$0", "value": 114},
{"name": "$1-24,999", "value": 556},
{"name": "$25,000-49,999", "value": 1762},
{"name": "$50,000-74,999", "value": 1195},
{"name": "$75,000-99,999", "value": 509},
{"name": "$100,000+", "value": 380},
]
,
'D': [
{"name": "$0", "value": 91},
{"name": "$1-24,999", "value": 628},
{"name": "$25,000-49,999", "value": 1678},
{"name": "$50,000-74,999", "value": 974},
{"name": "$75,000-99,999", "value": 316},
{"name": "$100,000+", "value": 220},
]
,
'E': [
{"name": "$0", "value": 44},
{"name": "$1-24,999", "value": 219},
{"name": "$25,000-49,999", "value": 821},
{"name": "$50,000-74,999", "value": 491},
{"name": "$75,000-99,999", "value": 170},
{"name": "$100,000+", "value": 91},
]
,
'HR': [
{"name": "$0", "value": 46},
{"name": "$1-24,999", "value": 384},
{"name": "$25,000-49,999", "value": 940},
{"name": "$50,000-74,999", "value": 375},
{"name": "$75,000-99,999", "value": 96},
{"name": "$100,000+", "value": 38},
]
},
'employment_status': {
'blank': [
{"name": "Full-time", "value": 1},
{"name": "Self-employed", "value": 1},
{"name": "Part-time", "value": 1},
{"name": "Retired", "value": 1},
{"name": "Not available", "value": 1},
{"name": "Not employed", "value": 1},
],
'C': [{"name": "Full-time", "value": 3952}, {
"name": "Not available",
"value": 749
}, {"name": "Not employed", "value": 32}, {"name": "Part-time", "value": 162}, {
"name": "Retired",
"value": 104
}, {"name": "Self-employed", "value": 283}]
,
'AA': [{"name": "Full-time", "value": 2334}, {
"name": "Not available",
"value": 460
}, {"name": "Not employed", "value": 22}, {"name": "Part-time", "value": 82}, {
"name": "Retired",
"value": 79
}, {"name": "Self-employed", "value": 319}]
,
'A': [{"name": "Full-time", "value": 2282}, {
"name": "Not available",
"value": 415
}, {"name": "Not employed", "value": 32}, {"name": "Part-time", "value": 92}, {
"name": "Retired",
"value": 50
}, {"name": "Self-employed", "value": 257}]
,
'B': [{"name": "Full-time", "value": 2993}, {
"name": "Not available",
"value": 545
}, {"name": "Not employed", "value": 31}, {"name": "Part-time", "value": 136}, {
"name": "Retired",
"value": 79
}, {"name": "Self-employed", "value": 365}]
,
'C': [{"name": "Full-time", "value": 3952}, {
"name": "Not available",
"value": 749
}, {"name": "Not employed", "value": 32}, {"name": "Part-time", "value": 162}, {
"name": "Retired",
"value": 104
}, {"name": "Self-employed", "value": 283}]
,
'D': [{"name": "Full-time", "value": 3433}, {
"name": "Not available",
"value": 865
}, {"name": "Not employed", "value": 37}, {"name": "Part-time", "value": 207}, {
"name": "Retired",
"value": 57
}, {"name": "Self-employed", "value": 200}]
,
'E': [{"name": "Full-time", "value": 1656}, {
"name": "Not available",
"value": 1042
}, {"name": "Not employed", "value": 14}, {"name": "Part-time", "value": 66}, {
"name": "Retired",
"value": 23
}, {"name": "Self-employed", "value": 83}]
,
'HR': [{"name": "Full-time", "value": 1674}, {
"name": "Not available",
"value": 1172
}, {"name": "Not employed", "value": 18}, {"name": "Part-time", "value": 80}, {
"name": "Retired",
"value": 32
}, {"name": "Self-employed", "value": 85}]
,
'NC': [{"name": "Not available", "value": 1}]
},
'is_homeowner': {
'blank': [{"name": 'True', "value": 1}, {"name": 'False', "value": 1}],
'C': [{"name": 'True', "value": 2761}, {"name": 'False', "value": 2888},]
,
'AA': [{"name": 'True', "value": 2626}, {"name": 'False', "value": 883},]
,
'A': [{"name": 'True', "value": 1838}, {"name": 'False', "value": 1477},]
,
'B': [{"name": 'True', "value": 2351}, {"name": 'False', "value": 2038},]
,
'C': [{"name": 'True', "value": 2761}, {"name": 'False', "value": 2888},]
,
'D': [{"name": 'True', "value": 1501}, {"name": 'False', "value": 3652},]
,
'E': [{"name": 'True', "value": 869}, {"name": 'False', "value": 2420},]
,
'HR': [{"name": 'True', "value": 618}, {"name": 'False', "value": 2890},]
,
'NC': [{"name": 'True', "value": 1}, {"name": 'False', "value": 140},]
}
}
function read_csv(file_name, f) {
d3.csv('data/' + file_name, function (error, dataset) { // NEW
// NEW
console.log(dataset)
f(dataset)
})
}
function update_all(id) {
update_pie(window.charts.pie1, database['income'][id]);
update_pie(window.charts.pie2, database['is_homeowner'][id]);
update_pie(window.charts.pie3, database['employment_status'][id]);
}
function init() {
init_bubbles();
window.charts.pie1 = create_pie("pie1", d3.scaleOrdinal(d3.schemePaired), database['income']['blank'],"Income Range")
window.charts.pie2 = create_pie("pie2", d3.scaleOrdinal(d3.schemeSet2), database['is_homeowner']['blank'],"Is Homeowner")
window.charts.pie3 = create_pie("pie3", d3.scaleOrdinal(d3.schemeDark2), database['employment_status']['blank'],"Employment Status")
// window.charts.pie1 = create_pie("pie1", d3.scaleOrdinal(d3.schemeCategory20), makeData(DATA_COUNT));
// window.charts.pie2 = create_pie("pie2", d3.scaleOrdinal(d3.schemeCategory20c), makeData(DATA_COUNT));
// window.charts.pie3 = create_pie("pie3", d3.scaleOrdinal(d3.schemeCategory20b), makeData(DATA_COUNT));
}
Raw
bubble.js
var creditGradeData = [
{
id: "AA",
value: 3509
},
{
id: "B", value: 4389
},
{
id: "C", value: 5649
},
{
id: "D", value: 5153
},
{
id: "E", value: 3289
},
{
id: "HR", value: 3508
},
{
id: "NC", value: 141
}
]
function createNodes(rawData) {
// Use map() to convert raw data into node data.
// Checkout http://learnjsdata.com/ for more on
// working with data.
var myNodes = rawData.map(function (d) {
return {
id: d.id,
value: d.value,
};
});
return myNodes;
}
var last_circle = null;
var last_label = '';
var color_map = {
'A': '#E79F6F', 'AA': '#F8C16E', 'B': '#575145',
'C': '#46B5AC', 'D': '#98CAAF', 'E': '#66C64D',
'HR': '#536878', 'NC': '#6E7F80'
}
function init_bubbles() {
var svg = d3.select("svg#one");
var width = svg.attr("width");
var height = svg.attr("height");
var format = d3.format(",d");
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
d3.csv("data/credit_grade.csv", function (d) {
d.value = d.value;
if (d.value) return d;
}, function (error, classes) {
if (error) throw error;
var root = d3.hierarchy({children: classes})
.sum(function (d) {
return d.value;
});
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
})
node.append("circle")
.attr("id", function (d) {
return d.id;
})
.attr("r", function (d) {
return d.r;
})
.style("fill", function (d) {
return color_map[d.data.id]
}).on("click", function (d, i) {
if (last_circle) {
d3.select(last_circle).style("fill", color_map[last_label]);
}
var circle = d3.select(this)
circle.style("fill","#AA4411")
last_label = circle._groups[0][0].__data__.data.id
last_circle = this;
update_all(d.data.id)
})
node.append("title")
.text(function (d) {
return d.data.id
});
node.append("text")
.text(function (d) {
return d.data.id
}).style("font-size", "24px").style("fill", "#FFFFFF");
console.log(node)
var simulation = d3.forceSimulation(node)
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter());
});
}
Raw
index.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
.tooltip { /* NEW */
background: #eee; /* NEW */
box-shadow: 0 0 5px #999999; /* NEW */
color: #333; /* NEW */
display: none; /* NEW */
font-size: 12px; /* NEW */
position: absolute;
padding: 10px; /* NEW */
text-align: center; /* NEW */
width: 80px; /* NEW */
z-index: 10; /* NEW */
}
.legend text
{
fill: black;
text-align: left;
font-size: 12px;
}
/* NEW */
</style>
</head>
<body>
<!--<div style="margin-left: 20%;margin-right: 20%;">-->
<div>
<div style="text-align: center;">
Credit Ratings<br/>
<svg id="one" width="600" height="460" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
</div>
<!--<div style="width: 1300px;text-align: center;" id="tooltips"></div>-->
<div style="width: 1400px;text-align: center;margin: 0 auto;">
<div style="" id="div_pie1">
<svg id="pie1" width="400" height="460" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<svg id="pie2" width="400" height="460" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<svg id="pie3" width="400" height="460" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
</div>
</div>
</div>
</body>
<script src="bubble.js"></script>
<script src="pie.js"></script>
<script src="app.js"></script>
<script type="text/javascript">
(function (d3) {
init()
})(window.d3);
</script>
</html>
Raw
pie.js
function makeData(size) {
return [
{ name: 'What', value: 304},
{name: "YES",value: 341},
{name:"HHHHAAAA", value: 1200 }
]
}
// function makeData(size) {
// return d3.range(size).map(function (item) {
// return Math.random() * 100;
// });
// }
function update_pie(pie_settings, data) {
// generate new random data
// add transition to new path
console.log("DATA in UPDATE")
console.log(data)
pie_settings.g.selectAll("path").data(pie_settings.pie(data)).transition().duration(1000).attrTween("d",
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function (t) {
return pie_settings.arc(i(t));
};
}
)
// add any new paths
pie_settings.g.selectAll("path")
.data(pie_settings.pie(data))
.enter().append("path")
.attr("class", "piechart")
.attr("fill", function (d, i) {
// return color(i);
})
.attr("x", function(x) { return x.name })
.attr("d", pie_settings.arc)
.each(function (d) {
this._current = d;
})
// remove data not being used
// pie_settings.g.datum(data).selectAll("path")
// .data(pie_settings.pie).exit().remove();
}
function create_pie(id, color, data, title ) {
console.log("DATA in CREATE")
console.log(data)
var pie_settings =
{
g: null,
pie: null,
arc: null,
width: 400,
height: 300,
legendRectSize : 48,
legendSpacing : 0
}
var width = pie_settings.width,
height = pie_settings.height; // adjust for height of input bar div
// draw and append the container
var svg = d3.select("svg#" + id)
.attr("width", width).attr("height", height);
// set the thickness of the inner and outer radii
svg.append("text")
.attr("x", (width / 2))
.attr("y", 35)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text(title);
var oRadius = 100;
var iRadius = 20;
// construct default pie laoyut
pie_settings.pie = d3.pie().value(function (d) {
return d.value;
}).sort(null);
var tooltip = d3.select('#div_' + id ) // NEW
.append('div') // NEW
.attr('class', 'tooltip'); // NEW
tooltip.append('div') // NEW
.attr('class', 'label'); // NEW
tooltip.append('div') // NEW
.attr('class', 'count'); // NEW
tooltip.append('div') // NEW
.attr('class', 'percent'); // NEW
// construct arc generator
pie_settings.arc = d3.arc()
.outerRadius(oRadius)
.innerRadius(iRadius);
// creates the pie chart container
// var g = svg.append('g')
pie_settings.g = svg.append('g')
.attr('transform', function () {
// Center this bad boy
if (window.innerWidth >= 960) var shiftWidth = width / 2;
if (window.innerWidth < 960) var shiftWidth = width / 3;
return 'translate(' + shiftWidth + ',' + height / 2 + ')';
})
// generate random data
// enter data and draw pie chart
var path = pie_settings.g.selectAll("path")
.data(pie_settings.pie(data))
.enter().append("path")
.attr("class", "piechart")
.attr("fill", function (d, i) {
return color(i);
})
.attr("x", function (x) {
console.log(x)
return x.value
})
.attr("d", pie_settings.arc)
.each(function (d) {
this._current = d;
})
var i = 0
var legend = svg.selectAll('.legend') // NEW
.data(color.domain()) // NEW
.enter() // NEW
.append('g') // NEW
.attr('class', 'legend') // NEW
.attr('transform', function (d, i) { // NEW
var horz = -2
var vert = (50 * i++)
return 'translate(' + horz + ',' + vert + ')'; // NEW
}); // NEW
legend.append('rect') // NEW
.attr('width', pie_settings.legendRectSize) // NEW
.attr('height', pie_settings.legendRectSize) // NEW
.style('fill', color) // NEW
.style('stroke', color); // NEW
legend.append('text') // NEW
.attr('x', pie_settings.legendRectSize + pie_settings.legendSpacing) // NEW
.attr('y', pie_settings.legendRectSize - pie_settings.legendSpacing) // NEW
.text(function (d,i) {
console.log(arguments)
return data[i].name;
});
var count = 0
path.on('mouseover', function(d) { // NEW
var total = d3.sum(data.map(function(d) { // NEW
return d.value; // NEW
})); // NEW
var percent = Math.round( (d.value / total) * 100 )
tooltip.select('.label').html(d.data.name); // NEW
tooltip.select('.count').html(d.data.value); // NEW
tooltip.select('.percent').html(percent + '%'); // NEW
tooltip.style('display', 'block'); // NEW
}); // NEW
//
path.on('mouseout', function() { // NEW
tooltip.style('display', 'none'); // NEW
});
// update_pie(pie_settings, data);
return pie_settings
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment