javascript - D3 Targeting/Control Over Specific Arcs -

-

i trying target individual arcs in inner donut. want able have control on each arc(14 of them) , change colors accordingly. want have 2 colors, either gray or lime green. 2-week progress checker. if user participates 7 of 14 days want show 7 green 7 grey, etc.

here codepen it. thank in advance. 

    $(function(){     var tooltip = d3.select(".tooltip");     var $container = $('.chart-container'),         τ = 2 * math.pi,         width = $container.width(),         height = $container.height(),         innerradius = math.min(width,height)/4,         //innerradius = (outerradius/4)*3,         fontsize = (math.min(width,height)/4);  var dataset = {   days: [1,1,1,1,1,1,1,1,1,1,1,1,1,1],     progress: [1]  };  var participation = 100;      var color = d3.scale.ordinal()     .range(["#7eba4a"]);    // create donut pie chart layout   var pie = d3.layout.pie()   .sort(null);  // determine size of arcs var arc = d3.svg.arc();  // append svg attributes , append g svg var svg = d3.select('.chart-container').append("svg")   .attr("width", '100%')   .attr("height", '100%')   .attr('viewbox','0 0 '+math.min(width,height) +' '+math.min(width,height) )   .attr('preserveaspectratio','xminymin')   .append("g")   .attr("transform", "translate(" +  width / 2 + "," + height / 2 + ")");   var gs = svg.selectall("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");  var path = gs.selectall("path")   .data(function(d) { return pie(d); })   .enter().append("path")   .attr("fill", function(d, i) { return color(i); })   .attr("d", function(d, i, j) { return arc.innerradius(innerradius+(20*j)).outerradius(innerradius+20+(20*j))(d); })   .attr("class", function(d, i, j) { if (i>=participation && j<1) return "passed" ; })  // append text inner circle svg.append("text")   .attr("dy", "0.5em")   .style("text-anchor", "middle")   .attr("class", "inner-circle")   .attr("fill", "#36454f")   .text(function(d) { return "100%"; }); });

http://codepen.io/pen/mwdppx?editors=011

i have changed data format little bit simplify : 

var daysprogress = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

1 represents day participated , 0 not participated.

here modified codepen (displays green if day partcipated, grey if not, total percentage in center):

http://codepen.io/anon/pen/nqzppx


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d...
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea...
Read more

python - build a suggestions list using fuzzywuzzy -

-
i building suggestion engine database. i'm using fuzzywuzzy module match user input string existing database shown below. if request.method == "get": display_dict = {} user_input = request.get["user_input"] # user input match_dict = {} food_items_obj = food_items.objects.all() # fetch objects table items in food_items_obj : match = fuzz.ratio(user_input.lower(),items.name.lower()) # try match user input existing names match_dict[match] = items.name # put 1 dictionary matched_dict = ordereddict(sorted(match_dict.items(),reverse = true)) # sort dictionary if max(matched_dict.keys()) == 100: # if exact match put in dict , return display_dict[100] = matched_dict[100] else : # if not found try best matching words.. ###########this part need help! ############# k,v in matched_dict.items(): if user_input in v : display_dict[k]...
Read more