Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active December 12, 2017 07:28
Show Gist options
  • Save romsson/aaee1c6b22dfcbfb7b04693353e77eb1 to your computer and use it in GitHub Desktop.
Save romsson/aaee1c6b22dfcbfb7b04693353e77eb1 to your computer and use it in GitHub Desktop.
Download ZIP
wrangler crime data line chart
Raw
.block
license: mit
Raw
dataset.csv
year value state
2004 4029.3 Alabama
2005 3900 Alabama
2006 3937 Alabama
2007 3974.9 Alabama
2008 4081.9 Alabama
2004 3370.9 Alaska
2005 3615 Alaska
2006 3582 Alaska
2007 3373.9 Alaska
2008 2928.3 Alaska
2004 5073.3 Arizona
2005 4827 Arizona
2006 4741.6 Arizona
2007 4502.6 Arizona
2008 4087.3 Arizona
2004 4033.1 Arkansas
2005 4068 Arkansas
2006 4021.6 Arkansas
2007 3945.5 Arkansas
2008 3843.7 Arkansas
2004 3423.9 California
2005 3321 California
2006 3175.2 California
2007 3032.6 California
2008 2940.3 California
2004 3918.5 Colorado
2005 4041 Colorado
2006 3441.8 Colorado
2007 2991.3 Colorado
2008 2856.7 Colorado
2004 2684.9 Connecticut
2005 2579 Connecticut
2006 2575 Connecticut
2007 2470.6 Connecticut
2008 2490.8 Connecticut
2004 3283.6 Delaware
2005 3118 Delaware
2006 3474.5 Delaware
2007 3427.1 Delaware
2008 3594.7 Delaware
2004 4852.8 District of Columbia
2005 4490 District of Columbia
2006 4653.9 District of Columbia
2007 4916.3 District of Columbia
2008 5104.6 District of Columbia
2004 4182.5 Florida
2005 4013 Florida
2006 3986.2 Florida
2007 4088.8 Florida
2008 4140.6 Florida
2004 4223.5 Georgia
2005 4145 Georgia
2006 3928.8 Georgia
2007 3893.1 Georgia
2008 3996.6 Georgia
2004 4795.5 Hawaii
2005 4800 Hawaii
2006 4219.9 Hawaii
2007 4119.3 Hawaii
2008 3566.5 Hawaii
2004 2781 Idaho
2005 2697 Idaho
2006 2386.9 Idaho
2007 2264.2 Idaho
2008 2116.5 Idaho
2004 3174.1 Illinois
2005 3092 Illinois
2006 3019.6 Illinois
2007 2935.8 Illinois
2008 2932.6 Illinois
2004 3403.6 Indiana
2005 3460 Indiana
2006 3464.3 Indiana
2007 3386.5 Indiana
2008 3339.6 Indiana
2004 2904.8 Iowa
2005 2845 Iowa
2006 2870.3 Iowa
2007 2648.6 Iowa
2008 2440.5 Iowa
2004 4015.5 Kansas
2005 3806 Kansas
2006 3858.5 Kansas
2007 3693.8 Kansas
2008 3397 Kansas
2004 2540.2 Kentucky
2005 2531 Kentucky
2006 2621.9 Kentucky
2007 2524.6 Kentucky
2008 2677.1 Kentucky
2004 4419.1 Louisiana
2005 3696 Louisiana
2006 4088.5 Louisiana
2007 4196.1 Louisiana
2008 3880.2 Louisiana
2004 2413.7 Maine
2005 2419 Maine
2006 2546.1 Maine
2007 2448.3 Maine
2008 2463.7 Maine
2004 3640.7 Maryland
2005 3551 Maryland
2006 3481.2 Maryland
2007 3431.5 Maryland
2008 3516 Maryland
2004 2468.2 Massachusetts
2005 2358 Massachusetts
2006 2396 Massachusetts
2007 2399.2 Massachusetts
2008 2402 Massachusetts
2004 3066.1 Michigan
2005 3098 Michigan
2006 3226 Michigan
2007 3057.8 Michigan
2008 2945.7 Michigan
2004 3041.6 Minnesota
2005 3088 Minnesota
2006 3088.8 Minnesota
2007 3045 Minnesota
2008 2858.1 Minnesota
2004 3481.1 Mississippi
2005 3274 Mississippi
2006 3213 Mississippi
2007 3137.8 Mississippi
2008 2941.7 Mississippi
2004 3900.1 Missouri
2005 3929 Missouri
2006 3828.4 Missouri
2007 3828.2 Missouri
2008 3663.6 Missouri
2004 2936.1 Montana
2005 3146 Montana
2006 2863.4 Montana
2007 2863.6 Montana
2008 2720.9 Montana
2004 3519.6 Nebraska
2005 3432 Nebraska
2006 3364.9 Nebraska
2007 3142.8 Nebraska
2008 2878.3 Nebraska
2004 4210 Nevada
2005 4246 Nevada
2006 4099.6 Nevada
2007 3785.1 Nevada
2008 3456.4 Nevada
2004 2051.9 New Hampshire
2005 1839 New Hampshire
2006 2061.8 New Hampshire
2007 1968.6 New Hampshire
2008 2132.1 New Hampshire
2004 2433 New Jersey
2005 2337 New Jersey
2006 2278.4 New Jersey
2007 2205.5 New Jersey
2008 2293.4 New Jersey
2004 4198.4 New Mexico
2005 4132 New Mexico
2006 3947.5 New Mexico
2007 3846.7 New Mexico
2008 3817.4 New Mexico
2004 2192.5 New York
2005 2102 New York
2006 2063.2 New York
2007 1992.1 New York
2008 1993.7 New York
2004 4160.5 North Carolina
2005 4080 North Carolina
2006 4119.5 North Carolina
2007 4101.8 North Carolina
2008 4041.1 North Carolina
2004 1963.4 North Dakota
2005 2025 North Dakota
2006 2088.6 North Dakota
2007 1996.8 North Dakota
2008 2016.3 North Dakota
2004 3662.3 Ohio
2005 3668 Ohio
2006 3716.2 Ohio
2007 3461.6 Ohio
2008 3419.2 Ohio
2004 4242.1 Oklahoma
2005 4047 Oklahoma
2006 3625 Oklahoma
2007 3549.8 Oklahoma
2008 3456.6 Oklahoma
2004 4635.4 Oregon
2005 4402 Oregon
2006 3719.1 Oregon
2007 3530.1 Oregon
2008 3299.2 Oregon
2004 2417.3 Pennsylvania
2005 2422 Pennsylvania
2006 2451 Pennsylvania
2007 2364.4 Pennsylvania
2008 2412.4 Pennsylvania
2004 2886 Rhode Island
2005 2728 Rhode Island
2006 2614.6 Rhode Island
2007 2602.2 Rhode Island
2008 2845 Rhode Island
2004 4536.9 South Carolina
2005 4370 South Carolina
2006 4277.1 South Carolina
2007 4282.6 South Carolina
2008 4241.2 South Carolina
2004 1931.6 South Dakota
2005 1767 South Dakota
2006 1811.1 South Dakota
2007 1774 South Dakota
2008 1706.1 South Dakota
2004 4326.8 Tennessee
2005 4300 Tennessee
2006 4137.7 Tennessee
2007 4092.2 Tennessee
2008 4048.3 Tennessee
2004 4497.7 Texas
2005 4319 Texas
2006 4084.2 Texas
2007 4121.6 Texas
2008 3987 Texas
2004 4038.6 Utah
2005 3837 Utah
2006 3505.3 Utah
2007 3510.1 Utah
2008 3374 Utah
2004 2343.6 Vermont
2005 2370 Vermont
2006 2368 Vermont
2007 2339 Vermont
2008 2559.8 Vermont
2004 2678.2 Virginia
2005 2649 Virginia
2006 2479.6 Virginia
2007 2480 Virginia
2008 2531.8 Virginia
2004 4846.7 Washington
2005 4890 Washington
2006 4483.3 Washington
2007 4026 Washington
2008 3785 Washington
2004 2555.8 West Virginia
2005 2633 West Virginia
2006 2639.9 West Virginia
2007 2543.6 West Virginia
2008 2554.4 West Virginia
2004 2665.7 Wisconsin
2005 2669 Wisconsin
2006 2820 Wisconsin
2007 2842.8 Wisconsin
2008 2761.1 Wisconsin
2004 3338.5 Wyoming
2005 3158 Wyoming
2006 2989.1 Wyoming
2007 2883.2 Wyoming
2008 2724.2 Wyoming
Raw
index.html
<!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; }
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 100, bottom: 20, left: 100},
width = 460 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
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 + ")");
// var parseDate = d3.timeParse("%b %Y");
var parseDate = d3.timeParse("%Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
c = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
d3.text('dataset.csv', function(error, raw) {
var dsv = d3.dsvFormat(',')
var data = dsv.parse(raw);
// Nest stock values by symbol.
var symbols = d3.nest()
.key(function(d) { return d.state; })
.entries(data);
// Parse and caculate some values for each symbols
// "year","value","state"
symbols.forEach(function(s) {
s.values.forEach(function(d) {
d.date = parseDate(d.year);
d.price = +d.value;
});
s.maxPrice = d3.max(s.values, function(d) { return d.price; });
s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
svg.selectAll(".line").data(symbols).enter()
.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return c(d.key); });
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10));
var legend = svg.selectAll(".legend")
.data(c.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(250," + i * 8 + ")"; });
legend.append("rect")
.attr("x", 30)
.attr("width", 18)
.attr("height", 10)
.style("fill", c);
legend.append("text")
.attr("x", 50)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d) { return d; });
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment