Skip to content

Instantly share code, notes, and snippets.

@yoon-gu

yoon-gu/.block

Forked from mbostock/.block
Last active January 5, 2017 05:17
Show Gist options
  • Save yoon-gu/72b2c07be555b2bb5dcee41885a01c2c to your computer and use it in GitHub Desktop.
Save yoon-gu/72b2c07be555b2bb5dcee41885a01c2c to your computer and use it in GitHub Desktop.
Download ZIP
2016년도 감성고기 총 매출
Raw
.block
license: gpl-3.0
Raw
README.md

A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.

Raw
data.tsv
date price
2016-01-05 2160972
2016-01-06 3461999
2016-01-07 2897259
2016-01-08 4910164
2016-01-09 7106737
2016-01-11 2802736
2016-01-12 3348437
2016-01-13 4053064
2016-01-14 4136499
2016-01-15 5212756
2016-01-16 6519966
2016-01-18 2976782
2016-01-19 6391546
2016-01-20 4804687
2016-01-21 4250530
2016-01-22 6581814
2016-01-23 6740772
2016-01-25 6616269
2016-01-26 5145301
2016-01-27 8140744
2016-01-28 17170420
2016-01-29 15261519
2016-01-30 14895088
2016-01-31 6931713
2016-02-01 10270905
2016-02-02 14075278
2016-02-03 16429224
2016-02-04 12367079
2016-02-05 24241344
2016-02-06 19697632
2016-02-07 7810825
2016-02-12 3184937
2016-02-13 5726987
2016-02-15 5035998
2016-02-16 1872218
2016-02-17 2050992
2016-02-18 2431622
2016-02-19 4185088
2016-02-20 5014859
2016-02-22 2402409
2016-02-23 2436448
2016-02-24 2689674
2016-02-25 2835812
2016-02-26 3332363
2016-02-27 6995633
2016-02-29 3848750
2016-03-01 4264195
2016-03-02 2598974
2016-03-03 6368497
2016-03-04 5332007
2016-03-05 7634840
2016-03-07 2738209
2016-03-08 2327061
2016-03-09 3596472
2016-03-10 3070883
2016-03-11 5041501
2016-03-12 5807294
2016-03-14 2488055
2016-03-15 1814316
2016-03-16 3517704
2016-03-17 3082932
2016-03-18 4802780
2016-03-19 5870644
2016-03-21 3084535
2016-03-22 2256666
2016-03-23 2630428
2016-03-24 1500131
2016-03-25 5940904
2016-03-26 5371105
2016-03-28 2826355
2016-03-29 3200443
2016-03-30 2527586
2016-03-31 2393186
2016-04-01 15122188
2016-04-02 5123636
2016-04-04 3198924
2016-04-05 2519265
2016-04-06 2763860
2016-04-07 2625146
2016-04-08 4182807
2016-04-09 4837243
2016-04-11 2317968
2016-04-12 3734752
2016-04-13 5647314
2016-04-14 2952769
2016-04-15 3845392
2016-04-16 5485136
2016-04-18 4525514
2016-04-19 3717680
2016-04-20 3384512
2016-04-21 4663970
2016-04-22 4763842
2016-04-23 5553804
2016-04-25 2568037
2016-04-26 2509496
2016-04-27 3122273
2016-04-28 2711997
2016-04-29 4045473
2016-04-30 5796100
2016-05-02 2148024
2016-05-03 3373284
2016-05-04 5124217
2016-05-05 10672850
2016-05-06 10886926
2016-05-07 9316997
2016-05-09 2203264
2016-05-10 2324368
2016-05-11 3835254
2016-05-12 3008226
2016-05-13 5248833
2016-05-14 5737412
2016-05-16 2897230
2016-05-17 2638429
2016-05-18 3030029
2016-05-19 2730596
2016-05-20 4998268
2016-05-21 5012988
2016-05-23 2419500
2016-05-24 2383609
2016-05-25 2450964
2016-05-26 3870598
2016-05-27 3325427
2016-05-28 6136916
2016-05-30 2913648
2016-05-31 1974872
2016-06-01 2946823
2016-06-02 3635672
2016-06-03 5279138
2016-06-04 5184456
2016-06-06 2540488
2016-06-07 2606360
2016-06-08 2845408
2016-06-09 3101425
2016-06-10 3073262
2016-06-11 5306763
2016-06-13 2429956
2016-06-14 2434046
2016-06-15 3255099
2016-06-16 3350382
2016-06-17 4672127
2016-06-18 4607015
2016-06-20 2646278
2016-06-21 2731753
2016-06-22 2215144
2016-06-23 9088026
2016-06-24 9966801
2016-06-25 9468431
2016-06-27 2196844
2016-06-28 2949034
2016-06-29 3066443
2016-06-30 3211658
2016-07-01 4546571
2016-07-02 4621684
2016-07-04 1899690
2016-07-05 1942494
2016-07-06 2029024
2016-07-07 3110930
2016-07-08 3858895
2016-07-09 4436265
2016-07-11 2127602
2016-07-12 2127918
2016-07-13 2321384
2016-07-14 3938157
2016-07-15 3402582
2016-07-16 3651304
2016-07-18 2053228
2016-07-19 2239341
2016-07-20 4013461
2016-07-21 2347206
2016-07-22 3560715
2016-07-23 4483176
2016-07-25 2672060
2016-07-26 2249928
2016-07-27 2003888
2016-07-28 13662455
2016-07-29 13370949
2016-07-30 9006461
2016-08-01 1724844
2016-08-02 2061188
2016-08-03 1958146
2016-08-04 1928236
2016-08-05 3344056
2016-08-06 3208856
2016-08-08 2562542
2016-08-09 1852980
2016-08-10 2489936
2016-08-11 1920252
2016-08-12 3528592
2016-08-13 3921072
2016-08-15 3010870
2016-08-16 2243826
2016-08-17 2268594
2016-08-18 3553811
2016-08-19 2843328
2016-08-20 3624972
2016-08-22 2296762
2016-08-23 1976874
2016-08-24 2635155
2016-08-25 2339604
2016-08-26 4525892
2016-08-27 4361806
2016-08-29 3060661
2016-08-30 15579804
2016-08-31 3146830
2016-09-01 2297158
2016-09-02 4835402
2016-09-03 4950860
2016-09-05 16661414
2016-09-06 32049196
2016-09-07 10972407
2016-09-08 20525445
2016-09-09 10351349
2016-09-10 13546238
2016-09-11 4947940
2016-09-12 15300235
2016-09-13 21915817
2016-09-14 10942178
2016-09-19 2540176
2016-09-20 3563540
2016-09-21 4019624
2016-09-22 2254058
2016-09-23 2879895
2016-09-24 4680520
2016-09-26 2098352
2016-09-27 1730505
2016-09-28 2601421
2016-09-29 2369236
2016-09-30 10760566
2016-10-01 7407973
2016-10-03 2059182
2016-10-04 2322648
2016-10-05 2223782
2016-10-06 2815550
2016-10-07 3508388
2016-10-08 3680528
2016-10-10 1458264
2016-10-11 1593688
2016-10-12 3489024
2016-10-13 2818018
2016-10-14 3401482
2016-10-15 4319163
2016-10-17 2998052
2016-10-18 2696988
2016-10-19 2758798
2016-10-20 8585575
2016-10-21 6755619
2016-10-22 7954673
2016-10-24 3124120
2016-10-25 1268057
2016-10-26 2842466
2016-10-27 2111768
2016-10-28 4006693
2016-10-29 4605874
2016-10-31 2499987
2016-11-01 2625392
2016-11-02 3245975
2016-11-03 2344696
2016-11-04 3836292
2016-11-05 5106265
2016-11-07 2426568
2016-11-08 2800242
2016-11-09 3064644
2016-11-10 3528772
2016-11-11 16672892
2016-11-12 4469226
2016-11-14 2089478
2016-11-15 2830821
2016-11-16 7912940
2016-11-17 6222408
2016-11-18 4586596
2016-11-19 5682789
2016-11-21 1832008
2016-11-22 1678218
2016-11-23 2591500
2016-11-24 2228236
2016-11-25 3546832
2016-11-26 4196272
2016-11-28 3287044
2016-11-29 2854456
2016-11-30 1857136
2016-12-01 2829466
2016-12-02 5066772
2016-12-03 4279740
2016-12-05 2060272
2016-12-06 2760538
2016-12-07 2983924
2016-12-08 2575202
2016-12-09 3399189
2016-12-10 4118618
2016-12-12 2176500
2016-12-13 2229836
2016-12-14 2080188
2016-12-15 2450392
2016-12-16 3405324
2016-12-17 4975720
2016-12-19 2345002
2016-12-20 3144934
2016-12-21 2019674
2016-12-22 3463402
2016-12-23 17873070
2016-12-24 18274414
2016-12-26 2944268
2016-12-27 3318124
2016-12-28 3188286
2016-12-29 4163468
2016-12-30 14366602
2016-12-31 15315648
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;*/
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: steelblue;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 50, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse,
bisectDate = d3.bisector(function(d) { return d.date; }).left,
formatValue = d3.format(",.2d"),
formatCurrency = function(d) { return "₩" + formatValue(d); };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.week, 3)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
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.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.price = +d.price;
});
data.sort(function(a, b) {
return a.date - b.date;
});
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.price; }));
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("Revenue (₩)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.price) + ")");
focus.select("text").text(formatCurrency(d.price));
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment