Skip to content

Instantly share code, notes, and snippets.

@joshuarrrr

joshuarrrr/index.html

Last active Aug 29, 2015
Embed
What would you like to do?
Global Semiconductor Billings (3 Months Moving Averages)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
margin: auto;
position: relative;
width: 940px;
}
.chart {
background: rgb(191,1,102);
color: rgb(253,253,253);
}
.axis path {
display: none;
}
.axis line {
fill: none;
stroke: rgb(253,253,253);
shape-rendering: crispEdges;
}
.chart .axis text, .label text, .tooltip text, .callout circle, .callout path {
fill: rgb(253,253,253);
}
.axis .tick:first-child {
display: none;
}
.axis .tick line {
stroke: rgb(191,1,102);
}
.label path, .tooltip rect {
fill: rgb(191,1,102);
}
.chart .selected rect, .tooltip rect {
stroke: rgb(253,253,253);
stroke-width: 2;
}
.description text {
display: none;
}
.description.active text {
display: block;
}
.tt-button {
cursor: pointer;
}
</style>
<div class="chart">
<img alt="" class="mobile-only" src="http://spectrum.ieee.org/img/dataflow-may-2014-1398360200937.jpg" />
</div>
<!--
<div class="callout" style="position: absolute; top: 25%; left: 38%; background: rgb(254,254,254); width: 160px; height: 160px; -webkit-border-radius: 80px; border-radius: 80px; text-align: center; vertical-align: middle; -webkit-box-shadow: -5px 5px 5px 0 rgba(0,0,0,.5); box-shadow: -5px 5px 5px 0 rgba(0,0,0,.5);">
<div style="margin-top: 2em;">Semiconductor<br>sales are seasonal,<br>peaking in the run-up<br>to the winter holiday<br>shopping season and<br>then falling in<br>January.</div></div>
-->
<div>
<p>Derived from: &ldquo;<a href="http://spectrum.ieee.org/semiconductors/devices/the-semiconductor-boom">The Semiconductor Boom</a>&rdquo;, <em>IEEE Spectrum</em></p>
<p>Data source: <a href="https://www.wsts.org/">WSTS</a></p>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 40, right: 40, bottom: 40, left: 50},
width = 940 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var parseDate = d3.time.format("%y-%b").parse,
formatLabels = d3.time.format("%b %Y");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.domain(["Americas", "Europe", "Japan", "Asia Pacific"])
.range(["rgb(82,18,128)","rgb(253,253,253)","rgb(253,179,29)","rgb(123,191,42)"]);
var callouts = [
{ "x": "09-Jan",
"y": 12,
"description":
"The decline in/semiconductor sales/after the global economic/crisis was most keenly felt in the/Asia Pacific market, where sales/fell by 65 percent compared with/the high in September 2008./The Americas suffered only a/25 percent decline in the/same period.",
"r": 116,
"angle": -90
},
{ "x": "11-Sep",
"y": 24,
"description":
"Semiconductor/sales are seasonal,/peaking in the run-up/to the winter holiday/shopping season and/then falling in/January.",
"r": 80,
"angle": 45
},
{ "x": "14-Jan",
"y": 23,
"description":
"Sales remained/strong follow-/ing 2013; another/record-breaking year/is predicted, with 2014/global sales expected to/reach a total of over/$316 billion.",
"r": 93,
"angle": 45
}
];
var svg = d3.select(".chart").html("").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("semiconductors-3mma.csv", function(data) {
data = color.domain().map(function (region) {
var y0 = 0;
return data.map(function (d) {
return { region: region, x: d.Month, y: +d[region] / 1e6 };
});
});
var nest = d3.nest()
.key(function (d) { return d.x; })
.entries(data.reduce(function(a, b) {
return a.concat(b);
}));
nest.forEach(function (d) {
var y0 = 0,
total = 0;
d.key = parseDate(d.key);
d.values.forEach(function (d, i) {
d.y0 = y0;
y0 += d.y;
});
d.total = y0;
});
x.domain([d3.min(nest.map(function (d) { return d.key.getYear() + (d.key.getMonth()/12); })),d3.max(nest.map(function (d) { return d.key.getYear() + ((d.key.getMonth() + 1)/12); }))]);
y.domain([0, d3.max(nest, function (d) {
return d.total;
})]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width,0);
var month = svg.selectAll(".month")
.data(nest)
.enter().append("g")
.attr("class", "month")
.attr("transform", function (d, i) {
return "translate(" + x(d.key.getYear() + (d.key.getMonth()/12)) + ",0)";
});
var rect = month.selectAll("rect")
.data(function (d) { return d.values; })
.enter().append("rect")
.attr("x", 0)
.attr("y", height)
.attr("width", (width / nest.length) - 2)
.attr("height", 0)
.style("fill", function (d, i) { return color(d.region); });
rect.transition()
.delay(function(d, i) { return i * 10; })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.call(endall, addCallouts);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.text("U.S. $, Billions")
.attr("x", -20)
.attr("y", y(23));
var label = svg.selectAll(".label")
.data(nest.filter(function (d) {
return (d.key.getMonth() === 0);
}))
.enter().append("g")
.attr("class", "label")
.attr("transform", "translate(0,"+ height +")");
label.append("text")
.attr("x", function (d) { return x(d.key.getYear()); })
.attr("y", 0)
.attr("text-anchor", "middle")
.attr("dy", "1em")
.text(function (d) { return formatLabels(d.key); });
label.append("path")
.attr("d", function (d) { return "M " + (x(d.key.getYear()) - 2) + " 2 l "+ ((width / nest.length) + 1) +" 0 l 0 -"+ ((width / nest.length) + 1) +" z"; })
.attr("stroke-width", 0)
.attr("dy", "1em")
.attr("class", ".yearMarker");
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + (i * 16) + ")"; });
legend.append("text")
.attr("x", -20)
.attr("y", -30)
.attr("dy", "1em")
.text(function (d) { return d; })
.style("fill", function (d) { return color(d); });
function addCallouts () {
var filter = svg.append("filter")
.attr("id","dropshadow")
.attr("height", "130%");
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation","3");
filter.append("feOffset")
.attr("dx","-2")
.attr("dy","2")
.attr("result","offsetblur");
filter.append("feComponentTransfer")
.append("feFuncA")
.attr("type", "linear")
.attr("slope", 0.8);
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode");
feMerge.append("feMergeNode")
.attr("in","SourceGraphic");
var callout = svg.selectAll(".callout")
.data(callouts)
.enter().append("g")
.attr("class","callout")
.attr("transform",function (d) { return "translate("+ ((x(parseDate(d.x).getYear() + (parseDate(d.x).getMonth()/12))) + ((width / nest.length) / 2) - 1) +","+ y(d.y) +")"; })
.style("filter","url(#dropshadow)");
var pointer = callout.append("path")
.attr("d","M 0 0 l 10 0 l -10 0 l -10 0 z")
.attr("transform", function (d) { return "rotate("+ d.angle +")"; })
.attr("pointer-events", "none");
callout.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 15)
.attr("class", "tt-circle")
.attr("pointer-events", "none");
callout.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 15)
.attr("class", "tt-button");
callout.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.attr("pointer-events", "none")
.text("╋")
.attr("class", "tt-button-text");
var description = callout.append("g")
.attr("transform", function (d) { return "translate("+ -(Math.sin(d.angle * Math.PI / 180) * d.r * 1.5) +","+ ((Math.cos(d.angle * Math.PI / 180) * d.r * 1.5) - (d.description.split("/").length * 16 / 2)) +")"; })
.attr("class", "description")
.attr("pointer-events", "none");
description.selectAll(".tt-expanded")
.data(function (d) { return d.description.split("/"); })
.enter().append("text")
.attr("text-anchor", "middle")
.attr("class","tt-expanded")
.text(function (d) { return d.trim() })
.attr("y", function (d, i) { return ((i + 0) * 16);})
.attr("dy", "1em")
.attr("display", "none");
callout
.on("mouseover", function (d) {
var selected = d3.select(this);
selected.select(".tt-circle")
.transition()
.duration(80)
.attr("r", function (d) { return d.r; })
.attr("cx", function (d) { return -(Math.sin(d.angle * Math.PI / 180) * d.r * 1.5); })
.attr("cy", function (d) { return (Math.cos(d.angle * Math.PI / 180) * d.r * 1.5); })
.call(endall, showDesc);
function showDesc () {
selected.select(".description")
.classed("active", true);
}
selected.selectAll(".tt-expanded")
.transition()
.delay(100)
.attr("display", null);
selected.select("path")
.transition()
.duration(100)
.attr("d", function (d) { return "M 0 "+ (d.r * 1.5) +" l "+ (d.r / 3) +" 0 l -"+ (d.r / 3) +" -"+ (d.r * 1.5) +" l -"+ (d.r / 3) +" "+ (d.r * 1.5) +" z"; });
selected.select(".tt-button-text")
.transition()
.duration(100)
.attr("transform", function (d) { return "rotate(45)"; });
})
.on("mouseout", function (d) {
var selected = d3.select(this);
selected.select(".tt-circle")
.transition()
.duration(40)
.attr("r", 15)
.attr("cx", 0)
.attr("cy", 0);
selected.select("path")
.transition()
.duration(40)
.attr("d", "M 0 0 l 10 0 l -10 0 l -10 0 z");
selected.select(".description")
.classed("active", false);
selected.select(".tt-button-text")
.transition()
.duration(40)
.attr("transform","rotate(0)");
})
var tooltip = svg.append("g")
.attr("class", "tooltip");
month
.on("mouseover", function (d) {
var selected = d3.select(this)
.classed("selected", true);
var xLocation = x(d.key.getYear() + (d.key.getMonth()/12)),
boxWidth = 180,
boxHeight = 16 * (color.domain().length + 2);
//console.log(d);
tooltip
.attr("transform", function () {
var boxPosition;
if (xLocation > boxWidth) {
boxPosition = - boxWidth;
}
else {
boxPosition = (width / nest.length) - 2;
}
return "translate("+ (xLocation + boxPosition) +","+ y(d.total) +")";
});
tooltip.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", boxWidth)
.attr("height", boxHeight)
.attr("opacity", .7)
.attr("class", "temp");
tooltip.append("text")
.attr("x", boxWidth / 2)
.attr("y", 6)
.attr("dy", "1em")
.attr("text-anchor", "middle")
.text(formatLabels(d.key) + ": US$ " + d3.round(d.total, 1) + " billion");
tooltip.selectAll(".region-totals")
.data(d.values)
.enter().append("text")
.text(function (d) { return d.region + ": " + d3.round(d.y, 1); })
.attr("x", boxWidth / 2)
.attr("y", function (d, i) { return (boxHeight - ((i + 1) * 16) - 8); })
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("class", "region-totals")
.style("fill", function (d) { return color(d.region) });
})
.on("mouseout", function(d) {
d3.select(this).classed("selected", false);
d3.selectAll(".tooltip *").remove();
});
}
});
function endall(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each("end", function() { if (!--n) callback.apply(this, arguments); });
}
</script>
Month Americas Europe Japan Asia Pacific Worldwide
8-Jan 3444588 3438869.333 4098857 10487069.33 21469383.67
8-Feb 3260745 3307355.667 3969247 9808072.667 20345420.33
8-Mar 3320914.333 3353023.333 4221568.333 10039965.33 20935471.33
8-Apr 3312776.333 3336242.333 4245049.333 9981734.333 20875802.33
8-May 3377158 3327416 4239049.667 10515903.67 21459527.33
8-Jun 3402334.333 3368896 3948995.333 10847094.67 21567320.33
8-Jul 3347257 3393275.667 4105632.667 11338933.67 22185099
8-Aug 3320501 3446949 4219344.667 11724041 22710835.67
8-Sep 3207073.667 3477701 4257731.333 12016257 22958763
8-Oct 3206417.333 3419972.667 4228918.333 11635054.67 22490363
8-Nov 3079576 3169930.333 4052219.667 10565853.67 20867579.67
8-Dec 2696524.667 2550208.667 3737721.667 8421594.333 17406049.33
9-Jan 2535989.667 2265478.667 3226288.667 7256688.333 15284445.33
9-Feb 2443285 2107738.667 2777715 6783361.667 14112100.33
9-Mar 2575345.667 2172410.667 2513121.667 7305048.667 14565926.67
9-Apr 2648269.667 2169038 2565415.333 8296037.333 15678760.33
9-May 2790101.333 2193146.333 2763276 8954651.333 16701175
9-Jun 2945084.333 2219454 3004159 9314312.333 17483009.67
9-Jul 3108824.333 2330690.667 3238666 9745303.667 18423484.67
9-Aug 3290173.667 2413520.667 3373364.667 10304182.33 19381241.33
9-Sep 3486144 2619253 3636412.667 11218731.67 20960541.33
9-Oct 3678648.667 2808780.333 3748647.667 11726438.67 21962515.33
9-Nov 3886301 3019923.333 3843491.333 11960912 22710627.67
9-Dec 3833365.333 2943916.667 3612978.667 12038050.33 22428311
10-Jan 3778987.333 2928104.667 3492451.667 12192585.67 22392129.33
10-Feb 3696601 2871297 3464201 12153438.33 22185537.33
10-Mar 3966755.333 3066264 3616955.333 12615956.33 23265931
10-Apr 4110749.333 3072333 3675861.667 12877303 23736247
10-May 4379110.333 3124419.333 3709422 13488508 24701459.67
10-Jun 4563474 3083941.667 3748710 13413212.67 24809338.33
10-Jul 4729742 3110354 3866080.333 13418549.67 25124726
10-Aug 4818699 3118975.333 4028304.667 13631480.67 25597459.67
10-Sep 4788913.667 3232897.333 4187615 13999669.67 26209095.67
10-Oct 4789866.333 3340073 4199573 13870847.67 26200360
10-Nov 4705016 3418764 4158966.667 13644543.67 25927290.33
10-Dec 4572640 3301494.667 3966973.667 13312898.33 25154006.67
11-Jan 4689812 3298082.667 3797561.667 13625177.67 25410634
11-Feb 4612587.667 3246243.333 3598826.333 13219674.33 24677331.67
11-Mar 4727740 3342076.333 3608421.667 13633481.33 25311719.33
11-Apr 4581437 3295677.667 3415885.667 13491056.33 24784056.67
11-May 4628285.667 3289280.333 3339621.667 13984297.33 25241485
11-Jun 4700695 3209629.333 3304074 13671962 24886360.33
11-Jul 4635078.333 3131385.333 3467393.333 13627516 24861373
11-Aug 4578978.333 3068168 3644681.667 13812489 25104317
11-Sep 4609361.333 3133427 3797034.667 14270011.33 25809834.33
11-Oct 4668063.333 3081850.333 3882275.667 14172999 25805188.33
11-Nov 4585139 3026346.333 3818023 13789534 25219042.33
11-Dec 4361341.667 2778579 3591333 13101278.33 23832532
12-Jan 4319558.333 2770475.333 3437800 12631658.67 23159492.33
12-Feb 4408685.667 2723047.333 3378678 12415366.67 22925777.67
12-Mar 4452560.667 2825570.667 3419255.333 12580242.67 23277629.33
12-Apr 4557059 2818133.333 3376688 13308691 24060571.33
12-May 4470906.333 2837762.667 3363044.667 13725503.33 24397217
12-Jun 4305535.667 2817157.333 3431384 13810440 24364517
12-Jul 4131105 2819170.667 3604957.667 13735491.33 24290724.67
12-Aug 4174458.667 2766783.667 3639717.333 13738376 24319335.67
12-Sep 4416678.333 2786446.667 3645337 13961629 24810091
12-Oct 4774996.333 2792222 3531782.333 14138000.67 25237001.33
12-Nov 5018696.333 2803650.333 3411483 14277376.33 25511206
12-Dec 4944826.333 2625163 3189262.333 13975883 24735134.67
13-Jan 4768697.667 2656827.667 2999220 13723092.67 24147838
13-Feb 4471517 2691666.333 2848206.667 13217243 23228633
13-Mar 4386217.333 2845790 2804337 13446763.33 23483107.67
13-Apr 4358175.667 2829529.333 2722571.333 13712457.67 23622734
13-May 4601868.333 2838243.333 2744782 14506942.67 24691836.33
13-Jun 4763098 2840365.333 2719668.667 14558509.33 24881641.33
13-Jul 5020561.667 2849285.667 2934163.667 14728346 25532357
13-Aug 5189745.333 2912793.667 3046212.667 14834639.33 25983391
13-Sep 5549529.333 2983517 3147876.667 15169700 26850623
13-Oct 5713632.667 3048880.667 3106527.667 15217864.67 27086905.67
13-Nov 5874509.333 3077402 3073177.333 15164108 27189196.67
13-Dec 5799655.667 2958129 2926539 14961592.33 26645916
14-Jan 5591755.667 2951884.667 2857420.667 14863578 26264639
14-Feb 5278349.667 2948935.333 2841861.333 14801357.33 25870503.67
Month Americas Europe Japan Asia Pacific
8-Jan 3100604 3063307 3690441 9256369
8-Feb 2877532 3132229 3822103 8667192
8-Mar 3984607 3863534 5152161 12196335
8-Apr 3076190 3012964 3760884 9081676
8-May 3070677 3105750 3804104 10269700
8-Jun 4060136 3987974 4281998 13189908
8-Jul 2910958 3086103 4230796 10557193
8-Aug 2990409 3266770 4145240 11425022
8-Sep 3719854 4080230 4397158 14066556
8-Oct 2908989 2912918 4144357 9413586
8-Nov 2609885 2516643 3615144 8217419
8-Dec 2570700 2221065 3453664 7633778
9-Jan 2427384 2058728 2610058 5918868
9-Feb 2331771 2043423 2269423 6797439
9-Mar 2966882 2415081 2659884 9198839
9-Apr 2646156 2048610 2766939 8891834
9-May 2757266 2115748 2863005 8773281
9-Jun 3431831 2494004 3382533 10277822
9-Jul 3137376 2382320 3470460 10184808
9-Aug 3301314 2364238 3267101 10449917
9-Sep 4019742 3111201 4171677 13021470
9-Oct 3714890 2950902 3807165 11707929
9-Nov 3924271 2997667 3551632 11153337
9-Dec 3860935 2883181 3480139 13252885
10-Jan 3551756 2903466 3445584 12171535
10-Feb 3677112 2827244 3466880 11035895
10-Mar 4671398 3468082 3938402 14640439
10-Apr 3983738 2921673 3622303 12955575
10-May 4482195 2983503 3567561 12869510
10-Jun 5224489 3346649 4056266 14414553
10-Jul 4482542 3000910 3974414 12971586
10-Aug 4749066 3009367 4054234 13508303
10-Sep 5135133 3688415 4534197 15519120
10-Oct 4485400 3322437 4010288 12585120
10-Nov 4494515 3245440 3932415 12829391
10-Dec 4738005 3336607 3958218 14524184
11-Jan 4836916 3312201 3502052 13521958
11-Feb 4262842 3089922 3336209 11612881
11-Mar 5083462 3624106 3987004 15765605
11-Apr 4398007 3173005 2924444 13094683
11-May 4403388 3070730 3107417 13092604
11-Jun 5300690 3385153 3880361 14828599
11-Jul 4201157 2938273 3414402 12961345
11-Aug 4235088 2881078 3639282 13647523
11-Sep 5391839 3580930 4337420 16201166
11-Oct 4377263 2783543 3670125 12670308
11-Nov 3986315 2714566 3446524 12497128
11-Dec 4720447 2837628 3657350 14136399
12-Jan 4251913 2759232 3209526 11261449
12-Feb 4253697 2572282 3269158 11848252
12-Mar 4852072 3145198 3779082 14631027
12-Apr 4565408 2736920 3081824 13446794
12-May 3995239 2631170 3228228 13098689
12-Jun 4355960 3083382 3984100 14885837
12-Jul 4042116 2742960 3602545 13221948
12-Aug 4125300 2474009 3332507 13107343
12-Sep 5082619 3142371 4000959 15555596
12-Oct 5117070 2760286 3261881 13751063
12-Nov 4856400 2508294 2971609 13525470
12-Dec 4861009 2606909 3334297 14651116
13-Jan 4588684 2855280 2691754 12992692
13-Feb 3964858 2612810 2518569 12007921
13-Mar 4605110 3069280 3202688 15339677
13-Apr 4504559 2806498 2446457 13789775
13-May 4695936 2638952 2585201 14391376
13-Jun 5088799 3075646 3127348 15494377
13-Jul 5276950 2833259 3089942 14299285
13-Aug 5203487 2829476 2921348 14710256
13-Sep 6168151 3287816 3432340 16499559
13-Oct 5769260 3029350 2965895 14443779
13-Nov 5686117 2915040 2821297 14548986
13-Dec 5943590 2929997 2992425 15892012
14-Jan 5145560 3010617 2758540 14149736
14-Feb 4745899 2906192 2774619 14362324
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment