Skip to content

Instantly share code, notes, and snippets.

@DarienLiang

DarienLiang/.block

Created November 27, 2016 20:34
Show Gist options
  • Save DarienLiang/d0d2a9e46395a08c9a02a3c67555ab8b to your computer and use it in GitHub Desktop.
Save DarienLiang/d0d2a9e46395a08c9a02a3c67555ab8b to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
bar_chart1.csv
State acc_count
1 783
2 60
4 810
5 472
6 2925
8 506
9 253
10 122
11 23
12 2699
13 1327
15 86
16 198
17 914
18 756
19 282
20 322
21 694
22 674
23 144
24 472
25 291
26 893
27 375
28 604
29 802
30 204
31 218
32 296
33 103
34 522
35 269
36 1046
37 1275
38 111
39 1029
40 588
41 412
42 1102
44 41
45 909
46 115
47 884
48 3124
49 256
50 50
51 711
53 516
54 246
55 523
56 129
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
</style>
<body>
<input type="text" placeholder="please enter the sate" id="inputValue"/>
<input type="button" id="inputbutton" value="submit"/>
<div id="pieChart"></div>
<script src="d3pie.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
arg1=0;
arg2=0;
arg3=0;
find_state=1;
$('#inputbutton').click(function(){
var temp = $('#inputValue').val();//get the value
find_state=temp;
d3.csv("pie_chart1.csv",function(error,csvdata){
if(error){
console.log(error);
}
for( var i=0; i<csvdata.length; i++ ){
var state = csvdata[i].STATE;
var fatal_count = csvdata[i].FATAL_COUNT;
var total_count = csvdata[i].TOTAL_COUNT;
if(state==find_state && fatal_count==1)
arg1= total_count;
if(state==find_state && fatal_count==2)
arg2= total_count;
if(state==find_state && ">2"==fatal_count)
arg3= total_count;
}
console.log(arg1+"---"+arg2+"---"+arg3);
// secondStep(780,340,222);
});
});
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("bar_chart1.csv", function(error, data) {
if (error) throw error;
console.log(data);
var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
data.forEach(function(d) {
d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.State; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("acc_count");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
.on('click',function(){
// window.location.href='pie.html';
secondStep(parseInt(arg1),parseInt(arg2),parseInt(arg3));
});
state.selectAll("rect")
.data(function(d) { return d.ages; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); })
.on("mouseover",function(d,i){
d3.select(this)
.style("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.style("fill",color(d.name));
})
;
var legend = svg.selectAll(".legend")
.data(ageNames.slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
function secondStep( arg1, arg2, arg3){
console.log(arg1+"~~~"+arg2+"~~~"+arg3);
var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "STATE "+find_state,
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"text": "the fatal count",
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [
{
"label": "FATAL_COUNT=1",
"value": arg1,
"color": "#2484c1"
},
{
"label": "FATAL_COUNT=2",
"value": arg2,
"color": "#0c6197"
},
{
"label": "FATAL_COUNT>2",
"value": arg3,
"color": "#4daa4b"
}
]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 0
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
}
});
}
</script>
Raw
pie_chart1.csv
STATE FATAL_COUNT TOTAL_COUNT
1 1 732
1 2 40
1 >2 11
10 1 118
10 2 4
11 1 23
12 1 2516
12 2 147
12 >2 36
13 1 1241
13 2 74
13 >2 12
15 1 80
15 2 4
15 >2 2
16 1 182
16 2 14
16 >2 2
17 1 840
17 2 67
17 >2 7
18 1 703
18 2 45
18 >2 8
19 1 251
19 2 27
19 >2 4
2 1 56
2 2 3
2 >2 1
20 1 293
20 2 25
20 >2 4
21 1 647
21 2 35
21 >2 12
22 1 634
22 2 32
22 >2 8
23 1 135
23 2 7
23 >2 2
24 1 439
24 2 28
24 >2 5
25 1 276
25 2 15
26 1 831
26 2 55
26 >2 7
27 1 341
27 2 33
27 >2 1
28 1 543
28 2 51
28 >2 10
29 1 743
29 2 53
29 >2 6
30 1 189
30 2 10
30 >2 5
31 1 195
31 2 20
31 >2 3
32 1 271
32 2 21
32 >2 4
33 1 94
33 2 7
33 >2 2
34 1 486
34 2 32
34 >2 4
35 1 244
35 2 23
35 >2 2
36 1 987
36 2 48
36 >2 11
37 1 1189
37 2 72
37 >2 14
38 1 96
38 2 10
38 >2 5
39 1 958
39 2 63
39 >2 8
4 1 747
4 2 48
4 >2 15
40 1 542
40 2 38
40 >2 8
41 1 381
41 2 27
41 >2 4
42 1 1021
42 2 65
42 >2 16
44 1 37
44 2 4
45 1 859
45 2 40
45 >2 10
46 1 103
46 2 7
46 >2 5
47 1 826
47 2 48
47 >2 10
48 1 2840
48 2 213
48 >2 71
49 1 238
49 2 16
49 >2 2
5 1 428
5 2 34
5 >2 10
50 1 44
50 2 5
50 >2 1
51 1 673
51 2 34
51 >2 4
53 1 480
53 2 26
53 >2 10
54 1 227
54 2 16
54 >2 3
55 1 484
55 2 35
55 >2 4
56 1 115
56 2 12
56 >2 2
6 1 2725
6 2 164
6 >2 36
8 1 472
8 2 29
8 >2 5
9 1 240
9 2 13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment