Skip to content

Instantly share code, notes, and snippets.

@yoon-gu
Forked from mbostock/.block
Last active January 31, 2017 05:15
Show Gist options
  • Save yoon-gu/91030e5dd44cda34f104f2bc434390ce to your computer and use it in GitHub Desktop.
Save yoon-gu/91030e5dd44cda34f104f2bc434390ce to your computer and use it in GitHub Desktop.
감성고기(양재/도곡/온라인) 매출 비교
license: gpl-3.0

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

date 양재점 바스킷점 온라인
2016-01-01 0.0 0.0 124300.0
2016-01-02 0.0 0.0 135000.0
2016-01-03 0.0 0.0 129900.0
2016-01-04 0.0 0.0 58000.0
2016-01-05 2160972.0 0.0 139800.0
2016-01-06 2558592.0 903407.0 279400.0
2016-01-07 1856585.0 1040674.0 201400.0
2016-01-08 3509398.0 1400766.0 229900.0
2016-01-10 0.0 0.0 49000.0
2016-01-11 2057318.0 745418.0 64000.0
2016-01-12 2645667.0 702770.0 186300.0
2016-01-13 2322549.0 1730515.0 487600.0
2016-01-14 2954231.0 1182268.0 164100.0
2016-01-15 3895208.0 1317548.0 416700.0
2016-01-16 5745945.0 774021.0 37800.0
2016-01-17 0.0 0.0 317800.0
2016-01-18 2346112.0 630670.0 517520.0
2016-01-19 5320296.0 1071250.0 1286940.0
2016-01-20 3848263.0 956424.0 1064740.0
2016-01-21 2997804.0 1252726.0 459440.0
2016-01-22 4737550.0 1844264.0 239200.0
2016-01-23 5376232.0 1364540.0 369120.0
2016-01-24 0.0 0.0 259100.0
2016-01-25 5474783.0 1141486.0 967380.0
2016-01-26 3965603.0 1179698.0 1160740.0
2016-01-27 6022194.0 2118550.0 904260.0
2016-01-28 11787242.0 5383178.0 1486080.0
2016-01-29 6508387.0 8753132.0 1167930.0
2016-01-30 11733696.0 3161392.0 1374220.0
2016-01-31 4610591.0 2321122.0 1824440.0
2016-02-01 8127825.0 2143080.0 2913390.0
2016-02-02 12397858.0 1677420.0 3315910.0
2016-02-03 13550466.0 2878758.0 633020.0
2016-02-04 10071881.0 2295198.0 20000.0
2016-02-08 0.0 0.0 48400.0
2016-02-11 0.0 0.0 262700.0
2016-02-12 2199353.0 985584.0 190920.0
2016-02-14 0.0 0.0 24900.0
2016-02-15 3245494.0 1790504.0 302400.0
2016-02-16 1272316.0 599902.0 246360.0
2016-02-17 1220936.0 830056.0 247200.0
2016-02-18 1684146.0 747476.0 423900.0
2016-02-19 3127168.0 1057920.0 211440.0
2016-02-20 3990397.0 1024462.0 54000.0
2016-02-21 0.0 0.0 67800.0
2016-02-22 1623977.0 778432.0 506440.0
2016-02-23 1778980.0 657468.0 368000.0
2016-02-24 2113964.0 575710.0 302220.0
2016-02-25 2074600.0 761212.0 359940.0
2016-02-26 2424971.0 907392.0 96000.0
2016-02-27 4913013.0 2082620.0 52920.0
2016-02-28 0.0 0.0 32400.0
2016-02-29 2628902.0 1219848.0 259320.0
2016-03-01 2395221.0 1868974.0 85500.0
2016-03-02 1826826.0 772148.0 106800.0
2016-03-03 4283340.0 2085157.0 378130.0
2016-03-04 3947487.0 1384520.0 124000.0
2016-03-05 5442910.0 2191930.0 183300.0
2016-03-06 0.0 0.0 266400.0
2016-03-07 2049563.0 688646.0 228500.0
2016-03-08 1733947.0 593114.0 194160.0
2016-03-09 1776972.0 1819500.0 206160.0
2016-03-10 1595096.0 1475787.0 52500.0
2016-03-11 3441655.0 1599846.0 231600.0
2016-03-13 0.0 0.0 263420.0
2016-03-14 1640429.0 847626.0 158600.0
2016-03-15 1127064.0 687252.0 637470.0
2016-03-16 2097524.0 1420180.0 558540.0
2016-03-17 1792368.0 1290564.0 393790.0
2016-03-18 3223364.0 1579416.0 361720.0
2016-03-21 2398339.0 686196.0 165300.0
2016-03-22 1458180.0 798486.0 713920.0
2016-03-23 1858458.0 771970.0 170000.0
2016-03-24 1148847.0 351284.0 219300.0
2016-03-25 3633252.0 2307652.0 42000.0
2016-03-27 0.0 0.0 232830.0
2016-03-28 1443561.0 1382794.0 96000.0
2016-03-29 2445210.0 755233.0 389340.0
2016-03-30 1407072.0 1120514.0 366520.0
2016-03-31 1599518.0 793668.0 749600.0
2016-04-01 9572727.0 5549461.0 274440.0
2016-04-02 3142583.0 1981053.0 265610.0
2016-04-03 0.0 0.0 244540.0
2016-04-04 2022044.0 1176880.0 104000.0
2016-04-05 1872079.0 647186.0 153840.0
2016-04-06 1294026.0 1469834.0 270900.0
2016-04-07 1309694.0 1315452.0 586760.0
2016-04-08 3228031.0 954776.0 30000.0
2016-04-09 3329961.0 1507282.0 284000.0
2016-04-10 0.0 0.0 275330.0
2016-04-11 1584680.0 733288.0 174000.0
2016-04-12 2518152.0 1216600.0 304560.0
2016-04-13 3545426.0 2101888.0 276520.0
2016-04-14 2238949.0 713820.0 158000.0
2016-04-17 0.0 0.0 192840.0
2016-04-18 3076052.0 1449462.0 314520.0
2016-04-19 2110670.0 1607010.0 309210.0
2016-04-21 3202170.0 1461800.0 492600.0
2016-04-22 3426026.0 1337816.0 269700.0
2016-04-23 3904936.0 1648868.0 19800.0
2016-04-24 0.0 0.0 163900.0
2016-04-25 1287537.0 1280500.0 55800.0
2016-04-27 1957891.0 1164382.0 68000.0
2016-04-28 1749049.0 962948.0 336300.0
2016-04-29 3121587.0 923886.0 323100.0
2016-04-30 4194346.0 1601754.0 133500.0
2016-05-01 0.0 0.0 341760.0
2016-05-02 1118824.0 1029200.0 1002380.0
2016-05-03 2243570.0 1129714.0 469720.0
2016-05-04 3466989.0 1657228.0 52800.0
2016-05-05 7341988.0 3330862.0 112500.0
2016-05-06 7578576.0 3308350.0 112500.0
2016-05-07 7410931.0 1906066.0 100920.0
2016-05-09 1266068.0 937196.0 377220.0
2016-05-10 1536902.0 787466.0 314800.0
2016-05-11 2514018.0 1321236.0 355140.0
2016-05-12 2373810.0 634416.0 600120.0
2016-05-14 4389694.0 1347718.0 184500.0
2016-05-15 0.0 0.0 67920.0
2016-05-16 1664218.0 1233012.0 287190.0
2016-05-17 1522299.0 1116130.0 128300.0
2016-05-18 2296533.0 733496.0 302540.0
2016-05-19 2154318.0 576278.0 508680.0
2016-05-21 2745704.0 2267284.0 52920.0
2016-05-22 0.0 0.0 18000.0
2016-05-24 1447679.0 935930.0 433800.0
2016-05-25 1542762.0 908202.0 466140.0
2016-05-26 2915670.0 954928.0 48000.0
2016-05-27 2405861.0 919566.0 212690.0
2016-05-29 0.0 0.0 20000.0
2016-05-30 1551076.0 1362572.0 452820.0
2016-05-31 1087530.0 887342.0 28800.0
2016-06-01 2099401.0 847422.0 473383.0
2016-06-02 1895346.0 1740326.0 401145.0
2016-06-04 3955076.0 1229380.0 15000.0
2016-06-07 1548878.0 1057482.0 197750.0
2016-06-08 2201918.0 643490.0 527591.0
2016-06-09 1588581.0 1512844.0 182000.0
2016-06-12 0.0 0.0 117800.0
2016-06-14 1560934.0 873112.0 568020.0
2016-06-15 1747755.0 1507344.0 433093.0
2016-06-16 2243518.0 1106864.0 445710.0
2016-06-17 3320589.0 1351538.0 150080.0
2016-06-20 1751426.0 894852.0 49685.0
2016-06-21 1591747.0 1140006.0 118200.0
2016-06-22 1494034.0 721110.0 492678.0
2016-06-23 6289164.0 2798862.0 219240.0
2016-06-26 0.0 0.0 254003.0
2016-06-27 1326620.0 870224.0 39400.0
2016-06-28 1880400.0 1068634.0 184640.0
2016-06-29 1419881.0 1646562.0 155263.0
2016-06-30 2178236.0 1033422.0 332919.0
2016-07-01 3013465.0 1533106.0 394180.0
2016-07-02 3461474.0 1160210.0 118998.0
2016-07-03 0.0 0.0 175500.0
2016-07-04 1365686.0 534004.0 37800.0
2016-07-05 1501312.0 441182.0 372543.0
2016-07-06 1056112.0 972912.0 525643.0
2016-07-07 2116094.0 994836.0 197840.0
2016-07-08 3167169.0 691726.0 151200.0
2016-07-11 1570052.0 557550.0 77650.0
2016-07-12 1305098.0 822820.0 527046.0
2016-07-13 1296898.0 1024486.0 191400.0
2016-07-14 1798383.0 2139774.0 295220.0
2016-07-18 1071636.0 981592.0 274068.0
2016-07-19 1162385.0 1076956.0 785880.0
2016-07-20 3378531.0 634930.0 481877.0
2016-07-21 1708136.0 639070.0 272563.0
2016-07-22 2488309.0 1072406.0 129200.0
2016-07-23 3347794.0 1135382.0 186400.0
2016-07-25 1213468.0 1458592.0 157903.0
2016-07-26 1302474.0 947454.0 0.0
2016-07-27 1706564.0 297324.0 456226.0
2016-07-28 9740563.0 3921892.0 799836.0
2016-07-29 10384889.0 2986060.0 254305.0
2016-07-30 7091751.0 1914710.0 49685.0
2016-08-01 1215408.0 509436.0 166830.0
2016-08-02 936880.0 1124308.0 119640.0
2016-08-03 1246152.0 711994.0 130250.0
2016-08-04 1329856.0 598380.0 0.0
2016-08-05 2614148.0 729908.0 169380.0
2016-08-08 1416338.0 1146204.0 85050.0
2016-08-09 1315876.0 537104.0 250050.0
2016-08-10 1793102.0 696834.0 85580.0
2016-08-11 1275694.0 644558.0 263980.0
2016-08-12 3038996.0 489596.0 81900.0
2016-08-14 0.0 0.0 109830.0
2016-08-15 1739856.0 1271014.0 140623.0
2016-08-16 1483048.0 760778.0 315910.0
2016-08-17 1767616.0 500978.0 561864.0
2016-08-18 2604807.0 949004.0 214213.0
2016-08-19 2151532.0 691796.0 104718.0
2016-08-21 0.0 0.0 163800.0
2016-08-22 1721634.0 575128.0 148320.0
2016-08-23 1154058.0 822816.0 103200.0
2016-08-24 1906525.0 728630.0 730827.0
2016-08-25 1178648.0 1160956.0 120263.0
2016-08-26 3055160.0 1470732.0 318580.0
2016-08-27 2898544.0 1463262.0 583247.0
2016-08-28 0.0 0.0 41940.0
2016-08-29 2463357.0 597304.0 206800.0
2016-08-30 4151236.0 11428568.0 715996.0
2016-08-31 2415484.0 731346.0 428836.0
2016-09-01 1547330.0 749828.0 794273.0
2016-09-02 3062986.0 1772416.0 1901278.0
2016-09-03 3428480.0 1522380.0 311500.0
2016-09-04 0.0 0.0 572509.0
2016-09-05 12657382.0 4004032.0 2925690.0
2016-09-06 4943998.0 27105198.0 549990.0
2016-09-07 7528018.0 3444389.0 2091930.0
2016-09-08 16869195.0 3656250.0 1523037.0
2016-09-09 6101442.0 4249907.0 753881.0
2016-09-12 11172018.0 4128217.0 124228.0
2016-09-15 0.0 0.0 141120.0
2016-09-16 0.0 0.0 165323.0
2016-09-17 0.0 0.0 489600.0
2016-09-20 2729236.0 834304.0 252023.0
2016-09-21 2926966.0 1092658.0 242650.0
2016-09-22 1416422.0 837636.0 130060.0
2016-09-23 1684703.0 1195192.0 229493.0
2016-09-24 2684098.0 1996422.0 119750.0
2016-09-26 1636136.0 462216.0 263835.0
2016-09-27 818675.0 911830.0 317423.0
2016-09-28 1601195.0 1000226.0 303140.0
2016-09-29 1105342.0 1263894.0 263661.0
2016-09-30 7852228.0 2908338.0 219235.0
2016-10-01 4968253.0 2439720.0 116250.0
2016-10-03 1532350.0 526832.0 196849.0
2016-10-04 1575994.0 746654.0 362943.0
2016-10-05 1543934.0 679848.0 415470.0
2016-10-06 1100900.0 1714650.0 124893.0
2016-10-07 2328938.0 1179450.0 387340.0
2016-10-10 944728.0 513536.0 438076.0
2016-10-11 1074836.0 518852.0 343336.0
2016-10-12 1757376.0 1731648.0 861824.0
2016-10-13 1505292.0 1312726.0 344320.0
2016-10-14 2215678.0 1185804.0 20800.0
2016-10-16 0.0 0.0 68585.0
2016-10-17 2014928.0 983124.0 335545.0
2016-10-18 1851298.0 845690.0 268796.0
2016-10-19 1387420.0 1371378.0 324886.0
2016-10-20 5463910.0 3121665.0 191304.0
2016-10-21 4257021.0 2498598.0 105315.0
2016-10-22 4894664.0 3060009.0 134600.0
2016-10-24 1594240.0 1529880.0 104950.0
2016-10-25 778369.0 489688.0 157120.0
2016-10-26 1941144.0 901322.0 112530.0
2016-10-27 1249834.0 861934.0 83800.0
2016-10-28 2517741.0 1488952.0 218403.0
2016-10-29 3049747.0 1556127.0 236930.0
2016-10-31 1172660.0 1327327.0 458049.0
2016-11-01 1814828.0 810564.0 190500.0
2016-11-02 1672679.0 1573296.0 30000.0
2016-11-03 1305918.0 1038778.0 22800.0
2016-11-04 2731902.0 1104390.0 127536.0
2016-11-05 3282153.0 1824112.0 158658.0
2016-11-06 0.0 0.0 191030.0
2016-11-07 1148266.0 1278302.0 187615.0
2016-11-08 1299682.0 1500560.0 196565.0
2016-11-09 1674956.0 1389688.0 415038.0
2016-11-10 2217834.0 1310938.0 92630.0
2016-11-11 10908382.0 5764510.0 224663.0
2016-11-16 4943904.0 2969036.0 131180.0
2016-11-17 3552156.0 2670252.0 75600.0
2016-11-19 3497783.0 2185006.0 55580.0
2016-11-20 0.0 0.0 178480.0
2016-11-21 924968.0 907040.0 98500.0
2016-11-23 1341176.0 1250324.0 689725.0
2016-11-24 1501020.0 727216.0 429150.0
2016-11-25 2222236.0 1324596.0 99173.0
2016-11-26 2401616.0 1794656.0 99015.0
2016-11-27 0.0 0.0 60000.0
2016-11-28 1733972.0 1553072.0 366638.0
2016-11-30 1102888.0 754248.0 144990.0
2016-12-01 1207566.0 1621900.0 707971.0
2016-12-05 1028406.0 1031866.0 177818.0
2016-12-06 1082990.0 1677548.0 168850.0
2016-12-07 1324798.0 1659126.0 244163.0
2016-12-08 1516532.0 1058670.0 445496.0
2016-12-11 0.0 0.0 243708.0
2016-12-12 783696.0 1392804.0 424705.0
2016-12-13 1190152.0 1039684.0 392356.0
2016-12-14 977550.0 1102638.0 370665.0
2016-12-15 957520.0 1492872.0 658766.0
2016-12-16 2625604.0 779720.0 260721.0
2016-12-17 2220768.0 2754952.0 120980.0
2016-12-18 0.0 0.0 374679.0
2016-12-19 929054.0 1415948.0 737387.0
2016-12-20 1212982.0 1931952.0 1787712.0
2016-12-21 785668.0 1234006.0 1893675.0
2016-12-22 1553682.0 1909720.0 1445112.0
2016-12-23 10339496.0 7533574.0 1049087.0
2016-12-24 10875396.0 7399018.0 40950.0
2016-12-25 0.0 0.0 194880.0
2016-12-26 1715822.0 1228446.0 295646.0
2016-12-27 1032070.0 2286054.0 1346543.0
2016-12-28 1609832.0 1578454.0 492790.0
2016-12-29 2139814.0 2023654.0 473556.0
2016-12-30 9193756.0 5172846.0 781798.0
2016-12-31 8561022.0 6754626.0 90635.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--x path {
/*display: none;*/
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y-%m-%d");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
// .defined(function(d) { return (d.revenue > 0.0); })
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.revenue); });
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
var products = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, revenue: d[id] / 1000000};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(products, function(c) { return d3.min(c.values, function(d) { return d.revenue; }); }),
d3.max(products, function(c) { return d3.max(c.values, function(d) { return d.revenue; }); })
]);
z.domain(products.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Revenue, ( 1M )");
var city = g.selectAll(".city")
.data(products)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.revenue) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});
function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment