Skip to content

Instantly share code, notes, and snippets.

@jaellis

jaellis/crime_types_by_month.csv

Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaellis/b1f64f34b7bb6a0fc2a5 to your computer and use it in GitHub Desktop.
Save jaellis/b1f64f34b7bb6a0fc2a5 to your computer and use it in GitHub Desktop.
Download ZIP
Chicago Crime 2001-2013: Data by Month
Raw
crime_types_by_month.csv
Month KIDNAPPING PUBLIC PEACE VIOLATION INTERFERENCE WITH PUBLIC OFFICER PROSTITUTION LIQUOR LAW VIOLATION ROBBERY BURGLARY WEAPONS VIOLATION OTHER NARCOTIC VIOLATION HOMICIDE OBSCENITY OTHER OFFENSE CRIMINAL DAMAGE MOTOR VEHICLE THEFT THEFT OFFENSE INVOLVING CHILDREN GAMBLING PUBLIC INDECENCY ARSON OTHER OFFENSE NARCOTICS SEX OFFENSE INTIMIDATION DECEPTIVE PRACTICE BATTERY NON - CRIMINAL CRIMINAL TRESPASS STALKING ASSAULT CRIM SEXUAL ASSAULT NON-CRIMINAL
1 23 208 102 163 40 1092 1577 312 0 41 1 1602 2502 1466 5349 230 1 0 30 0 2913 83 5 1079 4041 0 740 11 1378 100 1
2 22 206 76 147 33 729 1169 225 0 13 2 1462 1874 1242 4459 190 13 0 21 1 2823 69 11 978 3579 0 658 6 1166 78 0
3 19 263 119 175 65 772 1243 238 0 15 1 1645 2497 1081 5215 212 13 0 33 0 3273 72 10 1093 4512 0 700 12 1381 97 1
4 12 295 131 156 35 850 1367 288 0 25 1 1560 2715 926 5462 163 54 1 31 0 2946 80 14 1118 4753 0 715 14 1576 78 0
5 26 367 129 176 47 977 1556 310 0 43 2 1590 2992 962 6029 195 81 1 45 0 3061 99 16 1112 5350 0 730 12 1822 99 1
6 27 329 122 119 59 989 1470 316 1 43 3 1505 2827 1038 6159 184 98 3 33 0 2661 81 8 949 5595 0 685 14 1730 108 0
7 21 293 110 151 28 1226 1558 300 0 47 4 1614 2841 1036 6990 176 102 1 40 0 2963 91 15 1026 5390 0 680 8 1615 120 0
8 26 256 129 123 29 1111 1764 329 2 50 2 1570 2878 1025 7045 150 81 0 36 0 3006 104 16 1025 5184 1 779 13 1563 122 0
9 18 281 111 140 45 1073 1628 271 1 42 1 1347 2650 955 6398 178 88 1 27 0 2636 83 10 933 4826 0 633 18 1592 99 0
10 12 288 86 112 29 993 1592 232 0 32 1 1330 2628 928 6053 166 55 0 22 0 2709 83 12 955 4572 1 679 12 1475 100 0
11 23 186 79 146 34 925 1467 201 0 28 2 1367 2371 890 5647 148 9 2 20 1 2719 51 8 1011 3875 0 610 12 1223 100 1
12 14 171 95 43 20 1076 1418 216 1 35 1 1244 2056 1010 5095 188 1 1 23 0 2192 43 10 900 3743 0 531 11 1096 69 3
Raw
crime_types_by_month_percents.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 11 should actually have 32 columns, instead of 33. in line 10.
Month,KIDNAPPING,PUBLIC PEACE VIOLATION,INTERFERENCE WITH PUBLIC OFFICER,PROSTITUTION,LIQUOR LAW VIOLATION,ROBBERY,BURGLARY,WEAPONS VIOLATION,OTHER NARCOTIC VIOLATION,HOMICIDE,OBSCENITY,OTHER OFFENSE,CRIMINAL DAMAGE,MOTOR VEHICLE THEFT,THEFT,OFFENSE INVOLVING CHILDREN,GAMBLING,PUBLIC INDECENCY,ARSON,OTHER OFFENSE ,NARCOTICS,SEX OFFENSE,INTIMIDATION,DECEPTIVE PRACTICE,BATTERY,NON - CRIMINAL,CRIMINAL TRESPASS,STALKING,ASSAULT,CRIM SEXUAL ASSAULT,NON-CRIMINAL
1,9.465020576131687,6.6178810054088455,7.91311093871218,9.872804360993337,8.620689655172415,9.24405316177093,8.855073277556292,9.635577516985794,0.0,9.903381642512077,4.761904761904762,8.981834492038574,8.115208718497616,11.672903893622104,7.652251040757643,10.55045871559633,0.16778523489932887,0.0,8.310249307479225,0.0,8.592413426936464,8.839190628328009,3.7037037037037037,8.859512275227852,7.2915914832190545,0.0,9.090909090909092,7.6923076923076925,7.8219901231764775,8.547008547008547,14.285714285714286
2,9.053497942386832,6.55424753420299,5.896043444530644,8.903694730466384,7.112068965517241,6.1711673579954285,6.564096804986243,6.948733786287832,0.0,3.140096618357488,9.523809523809524,8.196905135680646,6.078297817132107,9.889322398280118,6.37902175934536,8.715596330275229,2.1812080536912752,0.0,5.8171745152354575,50.0,8.326942363282402,7.348242811501597,8.148148148148149,8.030215945479924,6.457957416095272,0.0,8.083538083538084,4.195804195804196,6.618607027303173,6.666666666666667,0.0
3,7.818930041152264,8.367801463569839,9.231962761830877,10.599636583888552,14.008620689655173,6.53517311436553,6.979617047560223,7.350216182828906,0.0,3.6231884057971016,4.761904761904762,9.222919937205651,8.098991275015406,8.607373198503065,7.460551351196693,9.724770642201834,2.1812080536912752,0.0,9.141274238227147,0.0,9.65429768155271,7.667731629392971,7.407407407407407,8.974464241727564,8.141465175027067,0.0,8.5995085995086,8.391608391608392,7.839019129250156,8.290598290598291,14.285714285714286
4,4.938271604938271,9.385937002863507,10.162916989914663,9.448818897637794,7.543103448275862,7.195462625920596,7.675894210792296,8.894379246448425,0.0,6.038647342995169,4.761904761904762,8.746355685131196,8.80607181083974,7.373198503065531,7.813908241656057,7.477064220183486,9.060402684563758,10.0,8.587257617728532,0.0,8.689752816942953,8.519701810436635,10.37037037037037,9.179735610477051,8.576326236015879,0.0,8.783783783783784,9.79020979020979,8.94590452403928,6.666666666666667,0.0
5,10.699588477366255,11.67674196627426,10.007757951900699,10.660205935796487,10.129310344827585,8.270549394734614,8.737155370879892,9.573810994441013,0.0,10.38647342995169,9.523809523809524,8.91455483292218,9.704518179754144,7.659845529102635,8.625055435544557,8.944954128440367,13.590604026845638,10.0,12.465373961218837,0.0,9.028965842723144,10.543130990415335,11.851851851851851,9.130470481977174,9.653554673403104,0.0,8.968058968058967,8.391608391608392,10.342283022080945,8.461538461538462,14.285714285714286
6,11.11111111111111,10.46770601336303,9.464701318851823,7.207752877044215,12.71551724137931,8.372132396512317,8.25425346734797,9.759110562075355,20.0,10.38647342995169,14.285714285714286,8.437990580847723,9.169342544841232,8.264989250736523,8.811032746312643,8.440366972477063,16.44295302013423,30.0,9.141274238227147,0.0,7.849094448705091,8.626198083067093,5.925925925925926,7.79210115773052,10.095633345362685,0.0,8.415233415233415,9.79020979020979,9.820060169154793,9.23076923076923,0.0
7,8.641975308641975,9.322303531657653,8.533747090768037,9.145972138098122,6.0344827586206895,10.378396681621942,8.748385647706217,9.264978381717109,0.0,11.352657004830919,19.047619047619047,9.049114151154967,9.214751386591418,8.249064415956685,9.999856940530178,8.073394495412844,17.114093959731544,10.0,11.0803324099723,0.0,8.73989735118872,9.691160809371672,11.11111111111111,8.424336973478939,9.72573078311079,0.0,8.353808353808354,5.594405594405594,9.167281602997106,10.256410256410257,0.0
8,10.699588477366255,8.145084314349347,10.007757951900699,7.450030284675954,6.25,9.404892914585625,9.905104160817563,10.16059295861643,40.0,12.077294685990339,9.523809523809524,8.802422067728191,9.334760468359768,8.16147782466757,10.078539648932061,6.8807339449541285,13.590604026845638,0.0,9.97229916897507,0.0,8.86673352604566,11.075612353567625,11.851851851851851,8.41612611872896,9.354023818116204,50.0,9.57002457002457,9.090909090909092,8.872112164386673,10.427350427350428,0.0
9,7.407407407407407,8.940502704422526,8.61132660977502,8.479709267110842,9.698275862068966,9.083213408956235,9.141445336627548,8.36936380481779,20.0,10.144927536231885,4.761904761904762,7.552141735815205,8.595245045571016,7.604108607373199,9.152944879186277,8.1651376146789,14.765100671140939,10.0,7.479224376731302,0.0,7.775352486578963,8.839190628328009,7.407407407407407,7.660727481730849,8.708047636232408,0.0,7.776412776412776,12.587412587412587,9.036725889765567,8.461538461538462,0.0
10,4.938271604938271,9.163219853643016,6.671838634600466,6.783767413688674,6.25,8.405993397104885,8.93930035375372,7.1649166151945645,0.0,7.729468599033816,4.761904761904762,7.456828885400314,8.523888294249295,7.38912333784537,8.659389708301742,7.614678899082569,9.228187919463087,0.0,6.094182825484765,0.0,7.990679015987258,8.839190628328009,8.88888888888889,7.8413662862303966,8.249729339588596,50.0,8.341523341523342,8.391608391608392,8.372594652892094,8.547008547008547,0.0,0
11,9.465020576131687,5.917912822144448,6.12878200155159,8.84312537855845,7.327586206896552,7.8303563870312365,8.237408052108485,6.207535515750463,0.0,6.763285024154589,9.523809523809524,7.664274501009195,7.690311699263728,7.086551477028426,8.078568260826025,6.7889908256880735,1.5100671140939597,20.0,5.54016620498615,50.0,8.020175800837709,5.431309904153355,5.925925925925926,8.301174152229247,6.992060627932155,0.0,7.493857493857494,8.391608391608392,6.942158142703071,8.547008547008547,14.285714285714286,0
12,5.761316872427984,5.440661788100541,7.370054305663305,2.6044821320411873,4.310344827586207,9.108609159400661,7.9622662698635525,6.670784434836318,20.0,8.454106280193237,4.761904761904762,6.974657995066158,6.668612759884532,8.042041563818776,7.288879987410767,8.623853211009175,0.16778523489932887,10.0,6.371191135734072,0.0,6.465695239218925,4.579339723109691,7.407407407407407,7.389769274981526,6.753879465896788,0.0,6.523341523341523,7.6923076923076925,6.221263552250667,5.897435897435898,42.857142857142854,0
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;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.line.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;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.line:hover {
-ms-transition: .1s;
-o-transition: .5s;
-transition: .75s;
stroke-width: 7.5px;
}
.line.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>
<body>
<!-- <div id="option">
<input name="updateButton"
type="button"
value="Crime Data by Day of Week"
onclick="getDaily()"
/> -->
</div id= "option">
<input name = "updateButton"
type="button"
value="Monthly Crimes (Percentages)"
onclick="updateData()"
/>
</div id= "option">
<input name = "updateButton"
type="button"
value="Monthly Crimes (Raw)"
onclick="origData()"
/>
<!-- <div> do we need this div? -->
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//Get Original Data up on the screen
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseMonth = d3.time.format("%m").parse;
var parseDay = d3.time.format("%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.Month); })
.y(function(d) { return y(d.measurement); });
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("crime_types_by_month.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
console.log(data)
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points)
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
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("Avg. Number of Commited Crimes per Month");
var time_point = svg.selectAll(".time_point")
.data(time_points)
.enter().append("g")
.attr("class", "time_point")
var box = d3.select("body").append("path")
.attr("class", "tooltip")
.style("opacity", 0)
time_point.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); })
.on("mouseover",function(d){
box.transition()
.duration(200)
.style("opacity", .9)
.text(d.name)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
console.log(d.name)
})
.on("mouseout", function(d) {
box.transition()
.duration(500)
.style("opacity", 0)
})
time_point.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.Month) + "," + y(d.value.measurement) + ")"; })
.attr("x", 3)
.attr("dy", ".71em")
.text(function(d) { return d.name; })
.on("mouseover",function(d){
console.log(d.name)
})
});
/////////////////////////////////////////////////////////////////////////////////////////
function updateData() {
// Get the data (new data)
d3.csv("crime_types_by_month_percents.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points_norm = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points_norm)
console.log(data)
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points_norm, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points_norm, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
//Select the section we want to apply changes to
var svg = d3.select("body").transition();
// 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("Percentage within Crime Type");
// Join new data
var time_point_norm = d3.selectAll(".time_point")
.data(time_points_norm)
.transition()
// .attr("transform", function (d) { return "translate" })
.attr("text", function(d) { return "translate(" + x(d.Month) + "," + y(d.measurement) + ")"; });
var line_text = d3.selectAll("text")
.transition();
// line_text.select("")
// var newlines = d3.selectAll("path")
// .data(data)
// .transition();
time_point_norm.select("path")
.duration(750)
.attr("d", function(d) { return line(d.values); });
// Make Changes to graph
svg.select(".line") // change the line
.duration(750)
.attr("d",line(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)
.attr("g","Percentage within Crime Type")
});
}
/////////////////////////////////////////////////////////////////////////////////////////
function getDaily() {
d3.csv("crime_times_weekday_noheader.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Day"; }));
//console.log(data)
data.forEach(function(d) {
d.Day = parseDay(d.Day);
});
var weekday = new Array(7);
weekday[0]= "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var time_points = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Day: weekday[d[0]], measurement: +d[name]};
})
};
})
x.domain(d3.extent(data, function(d) { return weekday[d.Day]; }));
y.domain([
d3.min(time_points, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); }) ]);
// 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", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
// .text("text","Avg. Number of Commited Crimes per Day");
});
}
/////////////////////////////////////////////////////////////////////////////////////////
function origData() {
// Get the data (orig data)
d3.csv("crime_types_by_month.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points_norm = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points_norm)
console.log(data)
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points_norm, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points_norm, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
//Select the section we want to apply changes to
var svg = d3.select("body").transition();
// Join new data
var time_point_norm = d3.selectAll(".time_point")
.data(time_points_norm)
.transition();
// var newlines = d3.selectAll("path")
// .data(data)
// .transition();
time_point_norm.select("path")
.duration(750)
.attr("d", function(d) { return line(d.values); });
// Make Changes to graph
svg.select(".line") // change the line
.duration(750)
.attr("d",line(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)
});
}
</script>
</body>
Raw
multi_lines_button.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.line.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;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.line:hover {
-ms-transition: .1s;
-o-transition: .5s;
-transition: .75s;
stroke-width: 7.5px;
}
.line.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>
<body>
<!-- <div id="option">
<input name="updateButton"
type="button"
value="Crime Data by Day of Week"
onclick="getDaily()"
/> -->
</div id= "option">
<input name = "updateButton"
type="button"
value="Monthly Crimes (Percentages)"
onclick="updateData()"
/>
</div id= "option">
<input name = "updateButton"
type="button"
value="Monthly Crimes (Raw)"
onclick="origData()"
/>
<!-- <div> do we need this div? -->
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//Get Original Data up on the screen
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseMonth = d3.time.format("%m").parse;
var parseDay = d3.time.format("%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.Month); })
.y(function(d) { return y(d.measurement); });
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("crime_types_by_month.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
console.log(data)
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points)
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
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("Avg. Number of Commited Crimes per Month");
var time_point = svg.selectAll(".time_point")
.data(time_points)
.enter().append("g")
.attr("class", "time_point")
var box = d3.select("body").append("path")
.attr("class", "tooltip")
.style("opacity", 0)
time_point.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); })
.on("mouseover",function(d){
box.transition()
.duration(200)
.style("opacity", .9)
.text(d.name)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
console.log(d.name)
})
.on("mouseout", function(d) {
box.transition()
.duration(500)
.style("opacity", 0)
})
time_point.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.Month) + "," + y(d.value.measurement) + ")"; })
.attr("x", 3)
.attr("dy", ".71em")
.text(function(d) { return d.name; })
.on("mouseover",function(d){
console.log(d.name)
})
});
/////////////////////////////////////////////////////////////////////////////////////////
function updateData() {
// Get the data (new data)
d3.csv("crime_types_by_month_percents.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points_norm = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points_norm)
console.log(data)
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points_norm, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points_norm, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
//Select the section we want to apply changes to
var svg = d3.select("body").transition();
// 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("Percentage within Crime Type");
// Join new data
var time_point_norm = d3.selectAll(".time_point")
.data(time_points_norm)
.transition()
// .attr("transform", function (d) { return "translate" })
.attr("text", function(d) { return "translate(" + x(d.Month) + "," + y(d.measurement) + ")"; });
var line_text = d3.selectAll("text")
.transition();
// line_text.select("")
// var newlines = d3.selectAll("path")
// .data(data)
// .transition();
time_point_norm.select("path")
.duration(750)
.attr("d", function(d) { return line(d.values); });
// Make Changes to graph
svg.select(".line") // change the line
.duration(750)
.attr("d",line(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)
.attr("g","Percentage within Crime Type")
});
}
/////////////////////////////////////////////////////////////////////////////////////////
function getDaily() {
d3.csv("crime_times_weekday_noheader.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Day"; }));
//console.log(data)
data.forEach(function(d) {
d.Day = parseDay(d.Day);
});
var weekday = new Array(7);
weekday[0]= "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var time_points = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Day: weekday[d[0]], measurement: +d[name]};
})
};
})
x.domain(d3.extent(data, function(d) { return weekday[d.Day]; }));
y.domain([
d3.min(time_points, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); }) ]);
// 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", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
svg.select(".x.axis") // change the x axis
.duration(750)
.call(xAxis);
svg.select(".y.axis") // change the y axis
.duration(750)
.call(yAxis);
// .text("text","Avg. Number of Commited Crimes per Day");
});
}
/////////////////////////////////////////////////////////////////////////////////////////
function origData() {
// Get the data (orig data)
d3.csv("crime_types_by_month.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Month"; }));
data.forEach(function(d) {
d.Month = parseMonth(d.Month);
});
var time_points_norm = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return { Month: d.Month, measurement: +d[name] };
})
};
});
console.log(time_points_norm)
console.log(data)
// Scale the range of the data again
x.domain(d3.extent(data, function(d) { return d.Month; }));
y.domain([
d3.min(time_points_norm, function(c) { return d3.min(c.values, function(v) { return v.measurement; }); }),
d3.max(time_points_norm, function(c) { return d3.max(c.values, function(v) { return v.measurement; }); })
]);
//Select the section we want to apply changes to
var svg = d3.select("body").transition();
// Join new data
var time_point_norm = d3.selectAll(".time_point")
.data(time_points_norm)
.transition();
// var newlines = d3.selectAll("path")
// .data(data)
// .transition();
time_point_norm.select("path")
.duration(750)
.attr("d", function(d) { return line(d.values); });
// Make Changes to graph
svg.select(".line") // change the line
.duration(750)
.attr("d",line(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)
});
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment