Built with blockbuilder.org
forked from anonymous‘s block: fresh block
forked from mforando‘s block: Hospital Margins
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin:0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0; }
.axis1 {
stroke: rgb(0,0,0);
opacity:.2;}
circle {
opacity: .75;
stroke: black;
stroke-width: .5px;}
circle:hover {
opacity: 1;
stroke-width: 3px;
stroke:black}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()" />
</div>
<script>
var width = 900;
var height = 225;
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var offset = 50;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("BillData2.csv", function(err, data) {
var x = d3.scaleLinear().rangeRound([0+offset, width-offset]);
x.domain([-.5,.5]);
var r = d3.scaleLinear().rangeRound([1, 20]);
r.domain(d3.extent(data, function(d,i) { return Number(data[i].Value2015); }));
var xAxis = d3.axisBottom(x).tickSize(0);;
var axisElements = d3.select('svg').append('g')
.attr('class','axis1')
.attr('transform', 'translate(0,'+height/2+')')
.call(xAxis);
axisElements.selectAll("text").remove();
axisElements.selectAll("tick").remove()
var xAxis2 = d3.axisBottom(x);
var axisElements2 = d3.select('svg').append('g')
.attr('class','axis2')
.call(xAxis2);
axisElements2.selectAll("path").remove();
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d,i) { return x(Number(data[i].Value2015)); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(5.1))
.stop();
//console.log(data)
for (var i = 0; i < 500; ++i) simulation.tick();
var color = d3.scaleOrdinal(d3.schemeCategory10);
svg.selectAll("body").append("g").data(data).enter()
.append("circle")
.attr("r", 2)
.attr("cx", function(d,i) { return data[i].x; })
.attr("cy", function(d,i) { return height/2; })
.style("fill", function(d,i) {return color(data[i].Color2015)})
.transition()
.duration(750)
.delay(500)
.ease(d3.easeCubic)
.attr("r", function(d,i) { return 5; })
.attr("cx", function(d,i) { return data[i].x; })
.attr("cy", function(d,i) { return data[i].y; })
.on("mouseover", mouseover)
})
function updateData() {
// Get the data again
d3.csv("BillData2.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Select the section we want to apply our changes to
var svg = d3.select("body").transition();
// Make the changes
svg.select(".line") // change the line
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
});
}
function mouseover(d, i, nodes) {
console.log(d)
}
</script>
</body>
PROV_NO_CUR,Value2012,Value2015
330003,0.030,-0.139
330004,0.062,0.014
330005,0.018,0.015
330006,-0.011,-0.046
330008,0.125,0.020
330009,0.007,0.028
330011,0.117,-0.010
330013,0.055,0.039
330014,0.037,-0.072
330019,0.090,-0.054
330023,0.044,0.107
330024,0.097,0.034
330027,-0.041,-0.193
330028,0.008,0.015
330030,0.036,0.054
330033,0.023,0.038
330043,-0.002,-0.036
330044,0.015,0.008
330045,0.044,0.008
330046,0.002,0.059
330047,0.068,-0.019
330049,0.092,0.134
330055,0.003,0.010
330056,0.015,0.009
330057,0.051,0.069
330058,0.157,0.062
330059,0.049,0.004
330061,0.061,-0.035
330065,0.081,0.046
330073,0.046,0.041
330074,-0.035,0.018
330078,0.029,-0.008
330079,-0.034,0.057
330080,-0.129,0.158
330084,0.014,-0.073
330085,-0.040,-0.087
330086,-0.055,-0.091
330088,0.000,-0.044
330090,0.020,-0.042
330094,-0.002,0.019
330096,0.057,-0.032
330100,0.034,-0.041
330101,0.085,0.056
330102,0.031,0.038
330103,0.014,0.023
330104,0.007,-0.013
330106,0.076,0.017
330107,0.013,0.011
330108,0.087,-0.514
330111,0.053,0.062
330115,-0.031,-0.010
330119,0.021,0.006
330125,0.034,0.032
330126,-0.062,0.015
330127,-0.301,0.069
330128,-0.150,-0.084
330132,0.112,-0.030
330135,-0.018,0.023
330136,-0.001,-0.005
330140,0.027,-0.004
330141,0.001,0.001
330144,0.264,-15.483
330151,-0.063,-0.072
330153,0.025,0.005
330154,0.044,0.067
330157,0.043,0.001
330158,0.007,0.125
330160,0.063,0.044
330162,0.036,0.046
330163,0.018,0.019
330164,0.019,-0.061
330166,-0.134,-0.174
330167,-0.015,-0.007
330169,0.051,-0.133
330175,-0.037,-0.067
330180,0.093,0.029
330181,0.041,-0.099
330182,0.083,0.068
330184,-0.135,-0.116
330185,-0.003,-0.004
330188,0.018,-0.032
330191,0.023,-0.010
330193,-0.052,-0.066
330194,0.017,-0.002
330195,0.016,0.024
330196,0.000,0.040
330197,0.041,0.034
330198,-0.009,0.006
330199,-0.052,-0.135
330201,-0.020,-0.004
330202,-0.220,0.047
330203,-0.019,0.002
330204,-0.105,0.159
330205,0.011,-0.590
330208,0.013,-0.032
330211,0.027,0.006
330214,0.031,0.130
330215,0.004,-0.008
330218,0.008,-0.045
330219,0.029,0.006
330221,0.017,0.002
330222,0.085,0.047
330223,-0.050,0.016
330224,-0.127,-0.182
330226,0.021,-0.055
330229,-0.031,-0.168
330231,-0.336,-0.037
330232,0.036,-0.129
330233,-0.200,-0.096
330234,0.018,0.029
330235,0.010,0.061
330236,0.074,0.111
330238,-0.018,0.047
330239,0.003,0.010
330240,-0.156,0.059
330241,-0.034,0.116
330245,-0.012,-0.020
330246,0.049,-0.008
330250,-0.007,-0.009
330259,0.046,0.031
330261,0.044,0.013
330264,-0.031,-0.050
330265,-0.064,0.015
330267,0.052,0.068
330268,0.036,0.023
330270,0.043,0.079
330273,0.053,0.039
330276,0.053,0.020
330277,0.295,0.042
330279,0.039,0.008
330285,0.044,0.024
330286,0.026,0.052
330304,0.027,0.052
330306,0.014,-0.002
330307,0.018,-0.130
330331,0.022,0.014
330332,-0.076,-0.050
330340,0.020,0.002
330350,-0.115,0.179
330353,0.057,-0.018
330354,-0.016,0.033
330372,0.029,-0.069
330385,-0.147,-0.040
330386,-0.083,-0.025
330393,0.014,0.015
330394,0.040,0.025
330395,0.005,-0.016
330396,-0.197,0.191
330397,-0.130,-0.055
330399,-0.015,-0.046
330401,-0.013,0.147
330403,0.002,-0.061
330404,0.048,-0.303
330405,-0.048,0.110
330406,0.085,0.041
330408,0.050,0.045
331301,-0.116,0.017
331302,0.079,0.092
331303,0.433,0.518
331304,-0.018,-0.184
331305,0.035,0.074
331306,-0.002,0.003
331307,-0.035,-0.134
331309,-0.017,-0.063
331310,0.051,0.063
331311,0.011,-0.035
331312,0.016,0.049
331313,-0.040,-0.062
331314,-0.005,-0.032
331315,-0.113,-0.071
331316,0.000,0.016
331317,-0.167,-0.102
331318,-0.147,-0.039
331990,-0.034,-0.186
332006,-0.174,-0.035
332008,0.481,-0.593
332014,-0.423,-0.088
332016,0.357,-0.560
332022,0.028,0.028
334002,-0.032,0.021
334022,0.259,0.011
334026,-0.022,0.040
334027,-0.075,-0.082
334048,0.095,-0.906
334049,-0.014,0.077