Develop Reference

D3 axis label rotate transition not smooth - javascript

In my transition, an axis rotates 90 degree and then the labels rotate in the opposition direction in order to remain upright. Below is a minimal example of what I want, except the transition is not as smooth as it could be. If you watch closely, you can see the labels shift (translate) up before rotating into place. How can I get rid of this shift? I've fiddled with rotate and translate to no avail.
(If you think this isn't too bad, I agree, but the shift is actually significantly more noticeable in my actual plot for some reason.)
Update. The culprit is the text-anchor property's getting switched back and forth between middle and start. Since these are discrete values, I can't think of a simple way to transition between them.
var width = 170;
var scale = d3.scaleLinear().domain([0, 5])
.range([0, width]);
var axis = d3.axisBottom()
.scale(scale)
.ticks(6);
var graph = d3.select('svg').append('g')
.attr('transform', 'translate(10,10)');
graph.append('g')
.attr('transform', 'translate(0,' + width + ')')
.call(axis);
var tickLabels = d3.selectAll('text');
var toggle = false;
d3.select('button').on('click', function() {
toggle = !toggle;
if (toggle) {
graph.transition().duration(1000)
// .attr('transform','rotate(-90)');
.attr('transform', 'rotate(-90 ' + (width / 2 + 10) + ' ' + (width / 2 + 10) + ')');
tickLabels.transition().duration(1500).delay(1000)
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".3em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
} else {
graph.transition().duration(1000)
.attr('transform', 'rotate(0) translate(10,10)');
tickLabels.transition().duration(1500).delay(1000)
.attr('y', 9)
.attr('x', 0.5)
.attr('dy', '0.71em')
.attr('transform', 'rotate(0)')
.style('text-anchor', null);
}
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width='200' height='200'>
</svg>
<div>
<button>Rotate</button>
</div>

Found the solution, which is actually fairly simple. The key is to alter the x attribute to offset the text-anchor shift before rotating the labels. The result is actually quite nice.
var width = 170;
var scale = d3.scaleLinear().domain([0, 5])
.range([0, width]);
var axis = d3.axisBottom()
.scale(scale)
.ticks(6);
var graph = d3.select('svg').append('g')
.attr('transform', 'translate(10,10)');
graph.append('g')
.attr('transform', 'translate(0,' + width + ')')
.call(axis);
var tickLabels = d3.selectAll('text');
var toggle = false;
d3.select('button').on('click', function() {
toggle = !toggle;
if (toggle) {
graph.transition().duration(1000)
// .attr('transform','rotate(-90)');
.attr('transform', 'rotate(-90 ' + (width / 2 + 10) + ' ' + (width / 2 + 10) + ')');
tickLabels.transition().duration(0).delay(1000)
.attr('x', -3)
.style("text-anchor", "start")
.transition().duration(1000)
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".3em")
.attr("transform", "rotate(90)");
} else {
graph.transition().duration(1000)
.attr('transform', 'rotate(0) translate(10,10)');
tickLabels.transition().duration(0).delay(1000)
.attr('x', 12)
.style('text-anchor', null)
.transition().duration(1000)
.attr('y', 9)
.attr('x', 0.5)
.attr('dy', '0.71em')
.attr('transform', 'rotate(0)');
}
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width='200' height='200'>
</svg>
<div>
<button>Rotate</button>
</div>

Related

I am a complete beginner of Javascript and D3. Currently I have been trying to create a scatterplot with x-axis showing the years and percentiles for every year and y-axis showing the values for 3 variables. But I cannot seem to get my code running. Please help.
This is the excerpt of the dataset I have now:
country_code,year,welfare_type,percentile,avg_welfare,pop_share,welfare_share
AUS,2014,income,1,2.706183088,0.009969853,4.13E-04
AUS,2014,income,2,11.03834646,0.010027236,0.001695224
AUS,2014,income,3,15.21296516,0.009923341,0.002312137
AUS,2014,income,4,17.78666642,0.009876024,0.00269041
AUS,2014,income,5,19.65899193,0.009817937,0.002956128
AUS,2014,income,6,21.23338101,0.010270198,0.003339948
AUS,2014,income,7,22.71642933,0.010107506,0.003516624
AUS,2014,income,8,23.88424149,0.010001223,0.003658528
AUS,2014,income,9,24.95633096,0.009820398,0.003753631
AUS,2014,income,10,25.78625374,0.010083031,0.003982182
AUS,2014,income,11,26.61719414,0.00994973,0.004056163
AUS,2014,income,12,27.43463276,0.010096198,0.004242275
AUS,2014,income,13,28.31720791,0.010045165,0.004356616
AUS,2014,income,14,29.23106771,0.009896533,0.004430671
AUS,2014,income,16,30.55067193,0.009863549,0.004615256
AUS,2014,income,15,29.89843511,0.010094814,0.004622624
AUS,2014,income,17,31.20316268,0.010020247,0.004788713
AUS,2014,income,19,32.38771182,0.009888694,0.004905248
AUS,2014,income,18,31.82871304,0.010124787,0.004935677
AUS,2014,income,20,32.95847038,0.00998462,0.005040114
AUS,2014,income,21,33.6474718,0.010047902,0.00517809
AUS,2014,income,22,34.33875307,0.010052882,0.005287092
AUS,2014,income,23,35.01464846,0.0099175,0.005318556
AUS,2014,income,24,35.63748207,0.010094145,0.005509578
AUS,2014,income,26,37.03581494,0.009755934,0.005533916
AUS,2014,income,25,36.26642742,0.009996408,0.005552525
AUS,2014,income,28,38.23585461,0.009992649,0.00585185
AUS,2014,income,29,38.94099912,0.009912763,0.005912125
AUS,2014,income,27,37.61468566,0.010266587,0.005914599
AUS,2014,income,30,39.66490264,0.010092823,0.006131417
AUS,2014,income,31,40.37644593,0.009921456,0.006135434
AUS,2014,income,32,41.02135057,0.00998833,0.006275446
AUS,2014,income,34,42.01105027,0.009758772,0.006279145
AUS,2014,income,33,41.62407432,0.010037465,0.006398975
AUS,2014,income,36,43.03352375,0.010044596,0.006620354
AUS,2014,income,37,43.59007717,0.009950045,0.00664285
AUS,2014,income,35,42.4723306,0.010237364,0.006659414
AUS,2014,income,38,44.05401838,0.009974684,0.006730177
AUS,2014,income,39,44.59078719,0.010080713,0.006884592
AUS,2014,income,40,45.22011959,0.010009614,0.006932515
AUS,2014,income,41,45.78335857,0.009937155,0.006968054
AUS,2014,income,42,46.49121536,0.010059652,0.007163011
AUS,2014,income,44,47.72893726,0.009855791,0.007204686
AUS,2014,income,43,47.10222632,0.010004851,0.007217617
AUS,2014,income,46,48.96673209,0.009786594,0.007339635
AUS,2014,income,45,48.31298287,0.010139416,0.007502717
AUS,2014,income,47,49.62708527,0.010060983,0.007647174
AUS,2014,income,49,51.09694646,0.009849214,0.00770794
AUS,2014,income,48,50.38862979,0.010149339,0.007832711
AUS,2014,income,50,51.83564211,0.010094099,0.008013788
AUS,2014,income,51,52.57598103,0.01003079,0.008077265
AUS,2014,income,52,53.44639201,0.010033813,0.00821346
AUS,2014,income,53,54.36172111,0.009865484,0.008213976
AUS,2014,income,54,55.3113642,0.01011584,0.008569552
AUS,2014,income,55,56.25654416,0.009960817,0.008582421
AUS,2014,income,56,57.0291785,0.009991576,0.008727159
AUS,2014,income,57,57.94137541,0.009839134,0.008731472
AUS,2014,income,58,58.59715086,0.009916506,0.008899733
AUS,2014,income,60,60.15320318,0.010046913,0.00925621
AUS,2014,income,59,59.28244241,0.01025988,0.009315586
AUS,2014,income,61,61.24756855,0.009985114,0.009366636
AUS,2014,income,62,62.45605758,0.010001891,0.0095675
AUS,2014,income,63,63.53518536,0.010014243,0.009744829
AUS,2014,income,64,64.52243794,0.00991656,0.009799718
AUS,2014,income,66,66.6700305,0.009775673,0.009982036
AUS,2014,income,65,65.58589209,0.010078047,0.010123451
AUS,2014,income,68,68.73954583,0.010002134,0.010530309
AUS,2014,income,67,67.67139554,0.010204008,0.01057591
AUS,2014,income,69,69.68166938,0.009959784,0.010629437
AUS,2014,income,70,70.78054852,0.009890164,0.01072159
AUS,2014,income,72,73.10381941,0.009986389,0.011181249
AUS,2014,income,71,71.82035176,0.010175222,0.011192657
AUS,2014,income,73,74.50528527,0.010016861,0.011430376
AUS,2014,income,74,75.81199845,0.009955876,0.011560037
AUS,2014,income,75,77.04250182,0.010042825,0.011850264
AUS,2014,income,76,78.565506,0.009955459,0.011979398
AUS,2014,income,77,80.40478014,0.009977753,0.012287298
AUS,2014,income,78,82.12333785,0.010043796,0.012632993
AUS,2014,income,79,83.79248925,0.009988891,0.012819295
AUS,2014,income,80,85.55768023,0.009991496,0.013092763
AUS,2014,income,81,87.47915,0.010038706,0.013450056
AUS,2014,income,82,89.38254022,0.009986228,0.013670864
AUS,2014,income,83,91.63481485,0.009953002,0.013968713
AUS,2014,income,84,93.91744067,0.010000544,0.01438506
AUS,2014,income,85,96.41946083,0.01005068,0.014842324
AUS,2014,income,86,99.54540544,0.009921946,0.015127246
AUS,2014,income,87,102.9654549,0.010061255,0.015866659
AUS,2014,income,88,105.971401,0.010025493,0.016271822
AUS,2014,income,89,109.1419537,0.009901563,0.016551497
AUS,2014,income,90,112.514213,0.009965222,0.017172604
AUS,2014,income,91,116.3289357,0.010076984,0.017953955
AUS,2014,income,92,120.6459775,0.01006046,0.018589704
AUS,2014,income,93,125.5685177,0.009956968,0.019149158
AUS,2014,income,94,131.9060045,0.010046029,0.020295548
AUS,2014,income,95,139.9451658,0.009996381,0.021426068
AUS,2014,income,96,148.6943539,0.009975502,0.022718048
AUS,2014,income,97,161.3097917,0.009998721,0.024702846
AUS,2014,income,98,181.7236599,0.010022054,0.027893949
AUS,2014,income,99,217.7250904,0.009993702,0.033325498
AUS,2014,income,100,419.3771126,0.010014813,0.064326418
AUS,2016,income,1,2.921344881,0.009891044,4.53E-04
AUS,2016,income,2,10.86946963,0.009887197,0.001684881
AUS,2016,income,3,14.96556705,0.010220573,0.002398038
AUS,2016,income,4,17.41174479,0.009960163,0.00271892
AUS,2016,income,5,18.84613732,0.009949316,0.002939701
AUS,2016,income,6,20.38088749,0.010060453,0.00321461
AUS,2016,income,7,21.94488945,0.009988179,0.003436429
AUS,2016,income,8,22.9706105,0.010022147,0.003609283
AUS,2016,income,10,25.00293992,0.009354153,0.003666766
AUS,2016,income,9,24.0096397,0.009995351,0.003762455
AUS,2016,income,12,26.62725434,0.009971033,0.004162499
AUS,2016,income,13,27.3528324,0.010032514,0.00430229
AUS,2016,income,11,25.76408298,0.010652475,0.004302817
AUS,2016,income,14,28.17373116,0.009973422,0.004405307
AUS,2016,income,15,29.05679359,0.00986932,0.004495961
AUS,2016,income,16,29.93744756,0.010155514,0.004766551
AUS,2016,income,17,30.59293397,0.010010156,0.004801197
AUS,2016,income,18,31.20220578,0.010001867,0.004892761
AUS,2016,income,19,31.63021913,0.009993163,0.00495556
AUS,2016,income,20,32.32867948,0.010001634,0.005069283
AUS,2016,income,21,33.06058859,0.01000566,0.005186136
AUS,2016,income,22,33.67194926,0.009929743,0.005241962
AUS,2016,income,23,34.30940692,0.010074751,0.005419199
AUS,2016,income,24,34.84748724,0.009926655,0.005423279
AUS,2016,income,25,35.29368138,0.009943476,0.005502028
AUS,2016,income,27,36.74800232,0.009728971,0.005605163
AUS,2016,income,26,35.97401424,0.010091598,0.005691627
AUS,2016,income,29,38.19577669,0.009894985,0.005925406
AUS,2016,income,28,37.45386648,0.010306717,0.006052079
AUS,2016,income,30,38.83223624,0.010107443,0.006153488
AUS,2016,income,31,39.40745425,0.009980666,0.006166312
AUS,2016,income,32,40.10945618,0.009983972,0.006278238
AUS,2016,income,33,40.78564161,0.00995818,0.006367587
AUS,2016,income,35,41.63865286,0.009996976,0.006526088
AUS,2016,income,34,41.39825541,0.010074415,0.006538671
AUS,2016,income,36,42.02093891,0.009971631,0.006569307
AUS,2016,income,37,42.62393647,0.010025866,0.006699819
AUS,2016,income,38,43.26897405,0.009984334,0.006773034
AUS,2016,income,39,43.95228489,0.009974039,0.006872902
AUS,2016,income,40,44.61490953,0.010040435,0.007022959
AUS,2016,income,41,45.37646989,0.009964403,0.007088749
AUS,2016,income,42,45.97395005,0.010033745,0.007232068
AUS,2016,income,43,46.65105029,0.009968655,0.007290975
AUS,2016,income,46,48.73932332,0.009553738,0.007300295
AUS,2016,income,44,47.42866471,0.010030614,0.007458578
AUS,2016,income,45,48.02211222,0.009979524,0.007513438
AUS,2016,income,48,50.01934665,0.009986286,0.007831224
AUS,2016,income,49,50.72917496,0.010008305,0.007959869
AUS,2016,income,50,51.46537181,0.010003591,0.008071582
AUS,2016,income,47,49.36311865,0.010466048,0.008099774
AUS,2016,income,51,52.29708356,0.009965039,0.008170414
AUS,2016,income,52,53.21992628,0.009944834,0.008297732
AUS,2016,income,53,53.94076603,0.010028668,0.008481017
AUS,2016,income,54,54.73058001,0.010073508,0.008643675
AUS,2016,income,55,55.66432548,0.009998435,0.008725626
AUS,2016,income,56,56.71593196,0.009997721,0.008889835
AUS,2016,income,58,58.50555862,0.009824501,0.009011461
AUS,2016,income,57,57.57195448,0.009994539,0.009021138
AUS,2016,income,59,59.45792769,0.010138709,0.009451049
AUS,2016,income,60,60.62677419,0.01000758,0.009512204
AUS,2016,income,61,61.80787097,0.00992854,0.009620924
AUS,2016,income,63,63.43629548,0.009874096,0.009820255
AUS,2016,income,62,62.54525396,0.010092093,0.009896081
AUS,2016,income,64,64.60173999,0.010140293,0.010270281
AUS,2016,income,65,65.60493276,0.009991716,0.010276948
AUS,2016,income,66,66.72095274,0.0100073,0.010468074
AUS,2016,income,67,67.93312637,0.009973639,0.010622405
AUS,2016,income,68,69.29769991,0.009953586,0.010813991
AUS,2016,income,69,70.61850675,0.010067056,0.011145732
AUS,2016,income,70,71.88259924,0.010003244,0.01127333
AUS,2016,income,71,73.1759581,0.009903166,0.011361353
AUS,2016,income,73,75.68829689,0.009855145,0.011694438
AUS,2016,income,72,74.49065685,0.010101602,0.01179722
AUS,2016,income,74,76.93036571,0.009955659,0.012007578
AUS,2016,income,77,81.22701085,0.009611704,0.012240199
AUS,2016,income,75,78.2816762,0.010156349,0.012464801
AUS,2016,income,76,79.70407585,0.01002164,0.012522958
AUS,2016,income,79,84.38656413,0.009776858,0.012934814
AUS,2016,income,78,82.90435259,0.010162592,0.013208984
AUS,2016,income,81,88.14204825,0.009881302,0.013654787
AUS,2016,income,80,85.99034668,0.010424978,0.014054405
AUS,2016,income,82,89.83042069,0.010017994,0.014108856
AUS,2016,income,83,91.3544176,0.010030154,0.014365632
AUS,2016,income,84,93.16756247,0.010100337,0.014753267
AUS,2016,income,85,95.15888443,0.009933997,0.014820436
AUS,2016,income,86,97.77003411,0.010059915,0.015420118
AUS,2016,income,87,100.7484106,0.009970617,0.015748813
AUS,2016,income,88,103.3231109,0.010040767,0.016264921
AUS,2016,income,89,106.4835939,0.009997772,0.016690661
AUS,2016,income,90,109.9008807,0.009943091,0.017132083
AUS,2016,income,91,113.327115,0.01006132,0.01787625
AUS,2016,income,92,117.2869678,0.009933027,0.01826497
AUS,2016,income,93,121.4394061,0.009984393,0.019009422
AUS,2016,income,94,126.5037933,0.010056994,0.019946163
AUS,2016,income,95,133.7253411,0.010013734,0.020994106
AUS,2016,income,96,142.5918642,0.009978695,0.022307768
AUS,2016,income,97,153.5144822,0.009931858,0.023903829
AUS,2016,income,98,170.2017432,0.010084885,0.026910549
AUS,2016,income,99,208.2369816,0.010000861,0.032649976
AUS,2016,income,100,360.2167398,0.010018403,0.056578312
AUS,2018,income,1,2.595366313,0.009842698,3.95E-04
AUS,2018,income,2,9.823911429,0.010133857,0.001540855
AUS,2018,income,3,14.02903825,0.010019847,0.002175663
AUS,2018,income,4,16.20475069,0.00999557,0.00250699
AUS,2018,income,5,18.10915852,0.00998426,0.002798445
AUS,2018,income,6,19.9508763,0.00993849,0.003068916
AUS,2018,income,7,21.28037443,0.009700865,0.003195158
AUS,2018,income,8,22.46745331,0.010256684,0.003566674
AUS,2018,income,9,23.58626711,0.010043957,0.003666627
AUS,2018,income,10,24.56020059,0.009778468,0.00371711
AUS,2018,income,11,25.42979959,0.010202929,0.004015785
AUS,2018,income,12,26.33331407,0.010042599,0.004093118
AUS,2018,income,13,27.40014618,0.010006882,0.004243794
AUS,2018,income,14,28.52270694,0.009951873,0.004393375
AUS,2018,income,15,29.52728239,0.010003639,0.004571767
AUS,2018,income,16,30.26886102,0.009941065,0.004657272
AUS,2018,income,17,31.05298971,0.010123957,0.004865824
AUS,2018,income,18,31.98053166,0.010029435,0.004964377
AUS,2018,income,20,33.22802717,0.009797099,0.00503854
AUS,2018,income,19,32.66549084,0.009992269,0.005051914
AUS,2018,income,21,33.63693313,0.010003789,0.005208151
AUS,2018,income,25,36.01406074,0.009539114,0.005317198
AUS,2018,income,22,34.17025041,0.010130968,0.005357988
AUS,2018,income,23,34.82676969,0.010063973,0.00542482
AUS,2018,income,24,35.36869964,0.010013115,0.005481393
AUS,2018,income,27,37.20731631,0.009821302,0.005655879
AUS,2018,income,33,40.87633985,0.009210976,0.005827474
AUS,2018,income,26,36.50531459,0.01045545,0.005907469
AUS,2018,income,28,37.85771532,0.010182103,0.005966155
AUS,2018,income,29,38.61389827,0.010002608,0.00597805
AUS,2018,income,30,39.23941491,0.009962674,0.006050637
AUS,2018,income,31,39.93717676,0.010022552,0.006195243
AUS,2018,income,32,40.47103984,0.009980693,0.006251838
AUS,2018,income,36,42.40615011,0.009803519,0.006434481
AUS,2018,income,35,41.79732628,0.010157682,0.006571216
AUS,2018,income,39,44.29336043,0.009680314,0.006636372
AUS,2018,income,38,43.63415757,0.010038815,0.006779719
AUS,2018,income,37,43.06505422,0.010175109,0.00678214
AUS,2018,income,34,41.19537868,0.010642366,0.006785617
AUS,2018,income,41,45.31986066,0.009964569,0.006989558
AUS,2018,income,40,44.78770392,0.010220832,0.007085128
AUS,2018,income,42,45.98918996,0.010131453,0.007211575
AUS,2018,income,43,46.75184156,0.009979741,0.007221388
AUS,2018,income,44,47.49359156,0.009980116,0.007336236
AUS,2018,income,45,48.33259569,0.010048654,0.007517106
AUS,2018,income,46,49.07601632,0.009919118,0.007534337
AUS,2018,income,47,49.90985642,0.0100312,0.007748932
AUS,2018,income,48,50.82979576,0.010008184,0.007873654
AUS,2018,income,49,51.65939593,0.009968356,0.007970316
AUS,2018,income,50,52.49251803,0.009898442,0.008042053
AUS,2018,income,52,53.87597193,0.0099824,0.008324013
AUS,2018,income,51,53.27500401,0.010125596,0.008349236
AUS,2018,income,53,54.62220616,0.009877231,0.008350397
AUS,2018,income,54,55.47221646,0.009776907,0.008394207
AUS,2018,income,55,56.23253556,0.010238282,0.008910815
AUS,2018,income,56,57.24371642,0.010085894,0.008936035
AUS,2018,income,58,59.10520774,0.009834502,0.008996649
AUS,2018,income,57,58.16688376,0.010051726,0.009049385
AUS,2018,income,60,60.91533476,0.009875512,0.009310841
AUS,2018,income,59,59.90437715,0.010183559,0.009441931
AUS,2018,income,61,61.75432927,0.009958307,0.009518217
AUS,2018,income,62,62.61595691,0.010139702,0.009826817
AUS,2018,income,63,63.64261438,0.010040373,0.009890097
AUS,2018,income,64,64.68995889,0.00999147,0.01000389
AUS,2018,income,65,65.87401702,0.009953768,0.010148557
AUS,2018,income,68,68.91650916,0.009713594,0.0103611
AUS,2018,income,66,66.8617044,0.01005883,0.010409445
AUS,2018,income,67,67.79991077,0.009982134,0.010475027
AUS,2018,income,70,70.96026521,0.009908804,0.010882762
AUS,2018,income,69,70.000275,0.010239873,0.011094225
AUS,2018,income,71,72.26105558,0.010004988,0.011189831
AUS,2018,income,72,73.60416061,0.010107856,0.011515003
AUS,2018,income,73,74.84108522,0.010028489,0.011616578
AUS,2018,income,74,76.30553539,0.009972862,0.011778189
AUS,2018,income,75,77.63277599,0.009953914,0.011960288
AUS,2018,income,76,78.97379055,0.010069723,0.012308445
AUS,2018,income,77,80.61337965,0.00997618,0.012447268
AUS,2018,income,78,82.35020384,0.010030576,0.012784779
AUS,2018,income,79,83.8521037,0.009943725,0.012905229
AUS,2018,income,80,85.3092945,0.010001952,0.013206379
AUS,2018,income,81,86.82983593,0.009983915,0.013417528
AUS,2018,income,82,88.95395683,0.009973547,0.013731487
AUS,2018,income,83,90.96324283,0.009967333,0.014032905
AUS,2018,income,84,93.16888148,0.010097804,0.01456131
I want the year and percentile attributes on the x-axis and divide the y-axis into three sections: avg_welfare, welfare_share and pop_share.
This is the current code I have, but nothing is showing on my browser. What is wrong with the code?
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="1000" height="1000"></svg>
<script src="https://d3js.org/d3.v4.js" charset="utf-8">
var margin = {top:100, right:80, bottom:80, left:80};
//Setting attributes of SVG
var svg = d3.select("body")
.append("svg")
//Setting attribute width and height as numbers instead of strings
var width = parseInt(svg.attr('width'));
var height = parseInt(svg.attr("height"));
svg.attr("width", width + margin.left + margin.right);
svg.attr("height", height + margin.top + margin.bottom);
//Setting attributes of x-axis
var xaxis = d3.append("g")
.attr("transform", "translate(0, " + height + ")")
.scaleBand()
//Setting attributes of y-axis
var yaxis = d3.append("g")
.scaleLinear()
//Extracting data
d3.csv("data/programmingassignment1data.csv", function(error, data){
if (error) throw error;
data.forEach(function(d){
d.year = +d.year
d.percentile = +d.percentile
d.avg_welfare = +d.avg_welfare
d.pop_share = +d.pop_share
d.welfare_share = +d.welfare_share
})
//Drawing x-axis
var x1 = xaxis.domain(data.map(function(d) {return d.year}))
.range([margin.left, width]).padding(0.4)
.call(d3.axisBottom(x1))
var x2 = xaxis.domain(data.map(function(d) {return d.percentile}))
.range([margin.left, width/5]).padding(0.4)
.call(d3.axisBottom(x2))
var x3 = xaxis.domain(data.map(function(d) {return d.percentile}))
.range([width/5, width*2/5]).padding(0.4)
.call(d3.axisBottom(x3))
var x4 = xaxis.domain(data.map(function(d) {return d.percentile}))
.range([width*2/5, width*3/5]).padding(0.4)
.call(d3.axisBottom(x4))
var x5 = xaxis.domain(data.map(function(d) {return d.percentile}))
.range([width*3/5, width*4/5]).padding(0.4)
.call(d3.axisBottom(x5))
var x6 = xaxis.domain(data.map(function(d) {return d.percentile}))
.range([width*4/5, width]).padding(0.4)
.call(d3.axisBottom(x6))
//Drawing y-axis
var y1 = yaxis.domain([d3.max(data, function(d) {return d.avg_welfare}), 0])
.range([height, height/3]).padding(0.4)
.call(d3.axisLeft(y1))
var y2 = yaxis.domain([d3.max(data, function(d) {return d.welfare_share}), 0])
.range([height/3, height*2/3]).padding(0.4)
.call(d3.axisLeft(y2))
var y3 = yaxis.domain([d3.max(data, function(d) {return d.pop_share}), 0])
.range([height*2/3, 0]).padding(0.4)
.call(d3.axisLeft(y3))
//Setting scatterplot attributes
var g = svg.append("g")
.selectAll("dot")
.data(data)
.enter()
.append("circle")
//Plotting scatterplots
var g1 = g.attr("cx", function(d) {return x1(d.year); })
.attr("cy", function(d) {return y1(d.avg_welfare); })
.attr("r", 5)
.style("fill", "green")
var g2 = g.attr("cx", function(d) {return x1(d.year); })
.attr("cy", function(d) {return y2(d.welfare_share); })
.attr("r", 5)
.style("fill", "blue")
var g3 = g.attr("cx", function(d) {return x1(d.year); })
.attr("cy", function(d) {return y3(d.pop_share); })
.attr("r", 5)
.style("fill", "yellow")
//Adding chart title
svg.append("text")
.attr("transform", "translate(300,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "40px")
.text("Distribution of wealth from 2014-2018");
//Adding data and axis labels
var gxLabels = svg.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 40) + ")")
.append("text")
.attr("y", 20)
.attr("x", margin.left + width/2)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Year");
var gyLabels = svg.append("g")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black");
gyLabels.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 0 * height / 3) + ')')
.text("Average Wealth");
gyLabels.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 1 * height / 3) + ')')
.text("Share of Wealth");
gyLabels.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 2 * height / 3) + ')')
.text("Population Share")
});
</script>
</body>

Here is a working version that produces a stacked scatter plot.
<!DOCTYPE html>
<html lang="en">
<body>
<!-- CORRECTION: you cannot place your SVG inside the script tag -->
<svg width="1000" height="1000"></svg>
<script src="https://d3js.org/d3.v4.js" charset="utf-8">
</script>
<script>
// CORRECTION: Added more margin to fit all axes
var margin = {top:100, right:30, bottom:80, left:80}
var svg = d3.select("svg")
// CORRECTION: you were trying to access width before setting it. Attributes come as strings - convert to number
var width = parseInt(svg.attr('width'));
svg.attr("width", width + margin.left + margin.right);
// CORRECTION: also add height margin
var height = parseInt(svg.attr("height"));
svg.attr('height', height + margin.top + margin.bottom);
var g =svg.append("g")
d3.csv("Data/programmingassignment1data.csv", function(error, data){
if (error) throw error;
data.forEach(function(d){
d.year = +d.year
d.percentile = +d.percentile
d.avg_welfare = +d.avg_welfare
d.pop_share = +d.pop_share
d.welfare_share = +d.welfare_share
});
var xAxis1 = d3.scaleBand()
.domain(data.map(function(d) {return d.year}))
.range([margin.left, width]).padding(0.4);
var xAxis2 = d3.scaleBand()
.domain(data.map(function(d) {return d.percentile}))
// CORRECTION: this need to be the same as the other x-Axis. Range is the area of the viewport
.range([margin.left, width]).padding(0.4);
var yAxis1 = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {return d.avg_welfare})])
.range([margin.top + 0 * height / 3, margin.top + 1 * height / 3]);
var yAxis2 = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {return d.welfare_share})])
.range([margin.top + 1 * height / 3, margin.top + 2 * height / 3]);
var yAxis3 = d3.scaleLinear()
.domain([0, d3.max(data, function(d) {return d.pop_share})])
.range([margin.top + 2 * height / 3, margin.top + 3 * height / 3]);
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 0) + ")")
.call(d3.axisBottom(xAxis1))
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 20) + ")")
.call(d3.axisBottom(xAxis2))
g.append("g")
// CORRECTION: move axis by margin
.attr('transform', 'translate(' + margin.left + ' 0)')
.call(d3.axisLeft(yAxis1))
g.append("g")
// CORRECTION: move axis by margin
.attr('transform', 'translate(' + margin.left + ' 0)')
.call(d3.axisLeft(yAxis2))
g.append("g")
// CORRECTION: move axis by margin
.attr('transform', 'translate(' + margin.left + ' 0)')
.call(d3.axisLeft(yAxis3))
g.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("cx", function(d) {return xAxis1(d.year); })
.attr("cy", function(d) {return yAxis1(d.avg_welfare); })
.attr("r", 5)
.style("fill", "green")
g.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("cx", function(d) {return xAxis1(d.year); })
.attr("cy", function(d) {return yAxis2(d.welfare_share); })
.attr("r", 5)
.style("fill", "blue")
g.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("cx", function(d) {return xAxis1(d.year); })
.attr("cy", function(d) {return yAxis3(d.pop_share); })
.attr("r", 5)
.style("fill", "yellow")
svg.append("text")
.attr("transform", "translate(300,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "40px")
.text("Distribution of wealth from 2014-2018");
g.append("g")
.attr("transform", "translate(0, " + (height + margin.top + 40) + ")")
// .call(d3.axisBottom(xAxis1)) - CORRECTION: This draws the actual axes. You have done this already
.append("text")
// CORRECTION: the x/y of the text is added to the existing translation of the group
.attr("y", 20)
.attr("x", margin.left + width)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Year");
g.append("g")
// CORRECTION: - transform into view (margins)
.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 0 * height / 3) + ')')
// .call(d3.axisLeft(yAxis1)) - CORRECTION: This draws the actual axes. You have done this already
.append("text")
.attr("transform", "rotate(-90)")
// CORRECTION: - moved into view - horizontal placement after rotation
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Average Wealth");
g.append("g")
// CORRECTION: - transform into view (margins)
.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 1 * height / 3) + ')')
// .call(d3.axisLeft(yAxis2)) - CORRECTION: This draws the actual axes. You have done this already
.append("text")
.attr("transform", "rotate(-90)")
// CORRECTION: - moved into view - horizontal placement after rotation
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Share of Wealth");
g.append("g")// CORRECTION: - transform into view (margins)
.attr('transform', 'translate(' + margin.left + ', ' + (margin.top + 2 * height / 3) + ')')
// .call(d3.axisLeft(yAxis3)) - CORRECTION: This draws the actual axes. You have done this already
.append("text")
.attr("transform", "rotate(-90)")
// CORRECTION: - moved into view - horizontal placement after rotation
.attr("y", 30)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Population Share")
});
</script>
</body>
There were some errors in the script tags.
For further improving the solution I would suggest:
Do not call you scale functions (i.e. scaleLinear()) 'axis'. An axis is a way of visualizing a scale. Just call them x1, x2, y1, etc. d3.axisLeft() is the command for drawing the axes for a given scale.
Work with SVG groups (g). When you transform a g element, the placement of all children will be relative to its origin. You could create a single SVG g element for all three stacked charts and translate them vertically. Have a look at this example of stacking charts.

I'm newbie in D3 and I'm trying to set a symbol on the left of the text of a legend. The legend is on the right of the graphic and all the texts of the legend are correctly located but I cannot be able to located on their left the symbol which corresponds with the legend.
The function which locate the legend and try to do the same with the symbols are:
setLegend(canvas, symbols, width, offset_right, height) {
canvas
.selectAll("legends")
.data(symbols)
.enter()
.append("text")
.attr("transform", function(d, i) {
let x = width - offset_right + 50;
let y = height / 2 - 100 + i * 24;
return "translate( " + x + "," + y + ")";
})
.attr(
"d",
d3
.symbol()
.type(function(d) {
return d.symbol;
})
.size("75")
)
.style("text-anchor", "left")
.text(d => {
return d.stats;
})
.attr("fill", "#FFFFFF")
.style("font-size", "10pt")
.style("font-weight", "bold"); }
You can check in this screen cap how the legend is correctly located but there are no any symbol on its left.
You can check all the code of the development in codesanbox:
What am I doing wrong?

Right now you're setting an attribute called d to text elements, which has no effect on those texts (only paths have the d attribute). On top of that, you're not appending any path.
A simple and common fix is appending groups in the enter selection, to which you append the paths and texts. Here is an example (I'm setting the x and y positions of the texts so they don't start right over the symbols):
setLegend(canvas, symbols, width, offset_right, height) {
const groups = canvas
.selectAll("legends")
.data(symbols)
.enter()
.append("g")
.attr("transform", function(d, i) {
let x = width - offset_right + 50;
let y = height / 2 - 100 + i * 24;
return "translate( " + x + "," + y + ")";
});
groups.append("path")
.attr("d", d3.symbol().type(function(d) {
return d.symbol;
}).size("75"))
.attr("fill", function(d) {
return d.color;
});
groups.append("text")
.attr("x", 10)
.attr("y", 5)
.style("text-anchor", "left")
.text(d => {
return d.stats;
})
.attr("fill", function(d) {
return d.color;
})
.style("font-size", "10pt")
.style("font-weight", "bold");
}

I am trying to "clip" this spinning wheel: https://bl.ocks.org/mpmckenna8/7f1f0adbf7d9ed7520b3950103e8094c
I want to only make the top-half of the wheel visible. When I try to do this with "clip-path" I end up having a half-wheel rotating. (see: https://codepen.io/icklerly/pen/JMBdGX)
svg.append("clipPath") // define a clip path
.attr("id", "ellipse-clip") // give the clipPath an ID
.append("rect")
.attr("x", -100)
.attr("y", 0)
.attr("width", 200)
.attr("height", 200);
But I want the wheel to rotate and the clip window always on the same position top.
Any suggestions?

The issue is that you are rotating the g element on where you applied the clip-path. Instead you can add another g on where you apply the clip-path and keep the rotation on another g inside.
So intead of this :
var hub = svg.append('g')
.attr('transform', function(){
return "translate(" + width/2 + "," + height/2 + ")"
})
.attr('class', 'hub')
.attr("clip-path", "url(#rect-clip)")
Do this :
var hub = svg.append('g').attr("clip-path", "url(#rect-clip)") /* append first g with clip-path */
.append('g') /* then create the inside g with the remaining properties*/
.attr('transform', function(){
return "translate(" + width/2 + "," + height/2 + ")"
})
.attr('class', 'hub')
You can also adjust the clip-path and simply make its size half the wheel to avoid using negative value for x/y.
Full Code:
var svg = d3.select('svg')
var margin = 20;
var width = 200, // margin,
height = 200 // margin;
svg.append("clipPath") // define a clip path
.attr("id", "rect-clip") // give the clipPath an ID
.append("rect")
.attr("x", 0) // position the x-centre
.attr("y", 0) // position the y-centre
.attr("width", 200) // set the x radius
.attr("height", 100);
var hub = svg.append('g').attr("clip-path", "url(#rect-clip)").append('g')
.attr('transform', function() {
return "translate(" + width / 2 + "," + height / 2 + ")"
})
.attr('class', 'hub')
hub.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 10)
.attr('fill', 'pink')
hub.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', 90)
.attr('stroke', 'red')
.attr('stroke-width', 5)
.attr('fill', 'none')
var linelen = [0, 90];
var line = d3.line().x(function(d) {
return (0)
})
.y(function(d) {
return (d)
})
const numberSpokes = 10;
for (let i = 0; i < numberSpokes; i++) {
var rotation = (360 / numberSpokes) * i;
var spoke = hub
.append('path')
.datum(linelen)
.attr('d', line)
.attr('stroke', 'blue')
.attr('transform', 'rotate(' + rotation + ')')
.attr('class', 'spoke')
}
const alreadyTransformed = hub.attr('transform')
rotateIt(false)
function rotateIt(much) {
//console.log(alreadyTransformed)
hub.transition().duration(4000)
.attr('transform', alreadyTransformed + ' rotate(' + (much ? 0 : 180) + ')')
.on('end', function() {
rotateIt(!much)
})
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="svger" width="200px" height="200px"></svg>

I've tried to create a legend using inspiration from http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend. However, despite having almost the exact same code, the legend isn't visualized. Here's the jsfiddle and the code: http://jsfiddle.net/u5hd25qs/
var width = $(window).width();
var height = $(window).height() / 2;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var legendRectSize = 36; // 18
var legendSpacing = 8; // 4
var recordTypes = []
recordTypes.push({
text : "call",
color : "#438DCA"
});
recordTypes.push({
text : "text",
color : "#70C05A"
});
var legend = svg.selectAll('.legend')
.data(recordTypes)
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function (d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * recordTypes.length / 2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d) {
return d.color
})
.style('stroke', function (d) {
return d.color
});
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) {
return d.text;
});

Your code works okay, but this is what you generate:
<g class="legend" transform="translate(-72,-44)">...
Because your translate rule has negative values in it, the legend is positioned outside the screen (it is simply not visible).
Now, the example you're basing your work on has a pie chart that has already been translated to the center of the screen, so negative values are not an issue.
You need to change your math or wrap the legend in some container which you can position in the same way as the pie chart example:
legendContainer
.attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');

I have this D3 radial tree graph and what I need is the images to not being rotated, but appear straight together it's corresponding blue circle. Here is the code working in Codepen and I copy it here:
var radius = 960 / 2;
var tree = d3.layout.tree()
.size([360, radius - 120])
.separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var diagonal = d3.svg.diagonal.radial()
.projection(function (d) { return [d.y, d.x / 180 * Math.PI]; })
var vis = d3.select('#graph').append('svg:svg')
.attr('width', radius * 2)
.attr('height', radius * 2 - 150)
.append('g')
.attr('transform', 'translate(' + radius + ',' + radius + ')');
d3.json('flare2.json', function (json) {
var nodes = tree.nodes(json);
var link = vis.selectAll('path.link')
.data(tree.links(nodes))
.enter().append('path')
.attr('class', 'link')
.attr('d', diagonal);
var node = vis.selectAll('g.node')
.data(nodes)
.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });
node.append('circle')
.attr('r', 4.5);
node.append('image')
.attr('xlink:href', 'img/avatar.40.gif')
.attr('width', 40)
.attr('height', 40)
.attr('x', 10);
node.append('image')
.attr('xlink:href', 'img/avatar.41.gif')
.attr('width', 40)
.attr('height', 40)
.attr('x', 50 );
});

Your nodes are rotated
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
And your images are appended to your nodes
node.append('image')
So you need to rotate the images back
.attr("transform", function(d) { return "rotate(" + (90 - d.x) + ")"; })
I'm not sure exactly how you want to position them, but you need to translate them on both x and y.
See a working example: http://codepen.io/anon/pen/qiCeG