Skip to content

Instantly share code, notes, and snippets.

@yoon-gu

yoon-gu/.block

Forked from mbostock/.block
Last active January 31, 2017 14:36
Show Gist options
  • Save yoon-gu/3db0395f733f4b413521234314176a99 to your computer and use it in GitHub Desktop.
Save yoon-gu/3db0395f733f4b413521234314176a99 to your computer and use it in GitHub Desktop.
Download ZIP
양재/도곡 상품별 분석 차트
Raw
.block
license: gpl-3.0
height: 2242
Raw
README.md

This example demonstrates how to use selection.each to create a context to access parent and child data simultaneously. The donut multiples are sized such that the area of each donut is proportionate to the total population, such that the area of the arcs is comparable across states.

This is a technical demonstration rather than a design recommendation; you probably don’t want to use this visual form. A normalized stacked bar chart is better at comparing the age distribution across states, and a stacked or grouped bar chart is better at comparing absolute values.

Raw
data.csv
product 양재점 바스킷점
구이세트 17882800.0 12866300.0
돈LA갈비(냉동) 1658570.0
돈가브리살(냉장) 2014770.0 567060.0
돈갈매기살(냉장) 511680.0 108780.0
돈갈비(냉장) 3603014.0 937486.0
돈다짐육(냉장) 120588.0 60983.0
돈등갈비(냉장) 8177817.0 3645241.0
돈등뼈(냉장) 1479719.0 413622.0
돈등심(냉장) 2227050.0 430396.0
돈목살(냉장) 35345407.0 11203268.0
돈미니족(냉장) 21000.0 33000.0
돈사태(냉장) 454300.0 312936.0
돈삼겹살(냉장) 64852494.0 19037779.0
돈안심(냉장) 990090.0 206952.0
돈육감사 11400.0
돈장족(냉동) 57488.0
돈전지(앞다리)(냉장) 12210768.0 4888711.0
돈정육(냉장) 64152.0 59914.0
돈찌게용(냉장) 4320399.0 895350.0
돈카츠소스 85000.0 5000.0
돈항정살(냉장) 2765350.0 1482980.0
돈후지(뒷다리)(냉동) 2286065.0
돈후지(뒷다리)(냉장) 168071.0
돼지갈비양념 90000.0
매콤한 돼지불고기양념 67500.0
바베큐와인삼겹(냉장) 11840.0 1600.0
보냉팩 25500.0
선물포장 7000.0
소갈비양념 82500.0 5000.0
소고기장조림(냉장) 84400.0
소불고기 122500.0
수제와인돈까츠(냉동) 240144.0
수제와인돈까츠(냉장) 9646652.0 3796048.0
스테이크세트 10915000.0 16000.0
스테이크소스 189000.0 27000.0
실속세트 37660320.0 2590200.0
양념돼지갈비(냉장) 975996.0
와인간장제육(냉장) 6941488.0 2774104.0
와인고추장제육(냉장) 7577137.0 2475906.0
와인스튜(냉동) 50000.0
와인스튜(냉장) 3187500.0 3912500.0
육우L본(냉장) 29216810.0 37696064.0
육우T본(냉장) 29376725.0 21888890.0
육우갈비살(냉장) 9290520.0 2516240.0
육우감사 12020.0 300600.0
육우꼬리(냉동) 5084400.0
육우꼬리(냉장) 1330000.0
육우꽃등심(냉장) 106549980.0 40143395.0
육우꽃살 2711654.0
육우꾸리살(냉동) 8880.0
육우꾸리살(냉장) 791388.0 250998.0
육우다짐육(냉동) 2105560.0
육우다짐육(냉장) 409640.0 65440.0
육우도가니(냉동) 853968.0
육우도가니(냉장) 373886.0
육우등심(냉장) 44113700.0 12158314.0
육우등심불고기 976000.0
육우등심새우살 592280.0
육우럼프스테이크(냉동) 1461838.0
육우럼프스테이크(냉장) 6005048.0
육우몸보신세트(냉동) 15756.0
육우몸보신세트(냉장) 4027700.0 140800.0
육우부채살(냉장) 6464106.0 1324312.0
육우불고기(냉동) 60000.0
육우불고기(냉장) 35265592.0 10541890.0
육우사골(냉동) 2788038.0
육우사골(냉장) 696244.0
육우사골곰탕 612000.0
육우사태(냉장) 15557063.0 11120746.0
육우사태스테이크(냉장) 1796074.0 198000.0
육우살치살(냉장) 14166700.0 3272200.0
육우삼겹양지(냉동) 45612.0
육우샤브샤브(냉동) 7605344.0
육우샤브샤브(냉장) 3495572.0
육우스지(냉동) 1673776.0
육우스지(냉장) 47520.0 691552.0
육우안심(냉장) 75996278.0 44831190.0
육우안창살(냉장) 14973840.0 5889600.0
육우양지(냉장) 35381600.0 17055836.0
육우업진살(냉장) 7058080.0 4010628.0
육우우둔(냉장) 16298476.0 8821108.0
육우우족(냉동) 1657824.0
육우우족(냉장) 549396.0
육우육전(냉동) 1754264.0
육우육전(냉장) 421020.0
육우육회(냉장) 8550760.0 493164.0
육우이유식(냉장) 18084.0
육우잡뼈(냉동) 964381.0
육우잡뼈(냉장) 351608.0
육우정육(냉장) 9600.0 21988520.0
육우제비추리(냉장) 4069580.0 2347380.0
육우진갈비살(냉장) 3648850.0 1439360.0
육우찜갈비(냉동) 20753400.0
육우찜갈비(냉장) 17985000.0
육우차돌박이(냉동) 12126460.0
육우차돌박이(냉장) 2662784.0
육우채끝(냉장) 57768158.0 55951458.0
육우채끝꽃살 6510700.0
육우치마살 (냉장) 16979320.0 11319070.0
육우치마양지(냉장) 15189794.0 7304686.0
육우토시살(냉장) 5507620.0 3428130.0
육우포터하우스(냉장) 27540852.0 21864270.0
육우홍두깨(냉장) 3495318.0 2386466.0
종합세트 69423700.0 47123500.0
참소스 377500.0 197500.0
택배비 186000.0 38000.0
포장비 530500.0 145000.0
한우감사 0.0 34200.0
함박스테이크(냉동) 2253000.0
함박스테이크(냉장) 315000.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
svg {
padding: 10px 0 0 10px;
}
.legend {
vertical-align: top;
}
.label {
text-anchor: middle;
}
.label-name {
font-weight: bold;
}
</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.15.min.js"></script>
<script>
var formatSum = d3.format(".3s");
var padding = 10;
var radius = d3.scaleSqrt()
.range([0, 220]);
var color = d3.scaleOrdinal()
.range(["#8a89a6", "#d0743c"]);
var arc = d3.arc()
.padRadius(50);
var pie = d3.pie()
.sort(null)
.padAngle(0.02)
.value(function(d) { return d.population; });
d3.csv("data.csv", function(d, i, columns) {
return {
product: d.product,
sum: d3.sum(columns.slice(1), function(key) { return +d[key]; }),
ages: columns.slice(1).map(function(key) {
return {
age: key,
population: +d[key]
};
})
};
}, function(error, data) {
if (error) throw error;
radius.domain([0, d3.max(data, function(d) { return d.sum; })]);
color.domain(data.columns.slice(1));
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", 120)
.attr("height", (data.columns.length - 1) * 20)
.selectAll("g")
.data(data.columns.slice(1).reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
var svg = d3.select("body").selectAll(".pie")
.data(data.sort(function(a, b) { return b.sum - a.sum; }))
.enter().append("svg")
.attr("class", "pie")
.each(multiple)
.select("g");
var label = svg.append("text")
.attr("class", "label");
label.append("tspan")
.attr("class", "label-name")
.attr("x", 0)
.attr("dy", "-.2em")
.text(function(d) { return d.product; });
label.append("tspan")
.attr("class", "label-value")
.attr("x", 0)
.attr("dy", "1.1em")
.text(function(d) { return formatSum(d.sum); });
function multiple(d) {
var r = radius(d.sum);
var svg = d3.select(this)
.attr("width", r * 2)
.attr("height", r * 2)
.append("g")
.attr("transform", "translate(" + r + "," + r + ")");
svg.selectAll(".arc")
.data(function(d) { return pie(d.ages); })
.enter().append("path")
.attr("class", "arc")
.attr("d", arc.outerRadius(r).innerRadius(r * 0.6))
.style("fill", function(d) { return color(d.data.age); });
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment