I am following the link mentioned below to create d3 pack layout. what I want to change is to get fixed sized circles in every pack layout. https://bl.ocks.org/mbostock/7607535
I found the solution in the following link, but this code is for d3.v3.js S per my knowledge
Possible to use a circle pack layout in d3.js with fixed circle sizes?
can someone help me how can I achieve same size instead of its actual "d.value". Thanks in advance.
Just set the size you want using pack.radius:
If radius is specified, sets the pack layout’s radius accessor to the specified function and returns this pack layout.
So, it can be simply:
pack.radius(() => someNumber)
//your value here-----^
Here is that Bostock's code you linked with every circle having a radius of 10px: https://bl.ocks.org/anonymous/42d0e66ee507ee769907f0519d25bc8a
Related
I am trying to add a movable scale or axis inside a plot. For instance: in this example of stacked plot: Click-to-view
I want to include a movable y-axis scale so, if we hover the graph and put the mouse pointer on the beginning of the orange color of any bar, the a-xis will begin from that bar. (Specifically, moving x=0 line.)
I meant something like this example (of d3).
https://observablehq.com/#d3/index-chart
But, here I want to change the value of x-axis by moving the line. Is it possible to do it using vegalite? If somebody has any similar example in vegalite, can you refer it?
Thank you!
AFAIK, there is no animation in Vega Lite. However, you may check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts
I am using D3 to generate the graph in an angular 5 project. I have a requirement to generate the graph as shown in required attachment. It has both solid and dashed grid lines in the same graph. I am not sure how I can achieve it.
Can anyone please help me to fix it ? Please find the actual and required graphs
Image 1 - Actual
Image 2 - Required
perhaps you can look at this example to add Minor ticks and Major ticks.
https://bl.ocks.org/erikvullings/41be28677574fd484b43e91413a7e45d
you can use the attribute stroke-dasharray to create dashed lines. It depends on the structure of your svg, but you can select the lines and add this attribute.
example:
d3.selectAll("g.tick line").attr("stroke-dasharray", "5 5")
I have a CombinedChart in my app (same app on both Android and iOS platforms using MPAndroidChart & iOS-Charts respectively) with stacked bars and a line but I also need to highlight specific points where a given event happened. I've got some small icon images (png) and need to place the correct image at the correct place on the graph depending on what type of event happened.
I have tried Bubble chart first and can get bubbles of the right colour at the right location but can't specify custom image instead of the bubbles' circles.
I am now trying Scatter Chart which does have a Custom shape option but it's not just a shape I need, it's a specific image. I have not worked with Core Graphics before so I'm not familiar with CGPath functions.
Is there a way to pass a UIImage to the ScatterChart customScatterShape property?
Or maybe a way to convert a UIImage created from a named png to a CGPath object which the Scatter Chart custom shape requires?
Thanks in advance for your suggestions!
As of MPAndroid version 3.0.2, you can pass in a Drawable as part of your Entry dataSet.add(new Entry(x, y, drawable)), and enable the drawIcons flag via dataSet.setDrawIcons(true).
Source code where icon gets drawn for Line charts specifically: LineChartRenderer.java
I am new to d3 and I am trying to do something like this. Here is what I have done so far JSFiddle, but I don't know how to align the lines to put them like in the picture and also how to put an information box below the chart.
var x=d3.scale.linear().domain([0,r]).range([0,w])
var y=d3.scale.linear().domain([r,0]).range([h,0])
center_group.append('line').attr("x1",x(r/4)).attr("y1",0);
center_group.append('line').attr("x1",x(-r/4)).attr("y1",0);
center_group.append('line').attr("x1",0).attr("y1",x(25));
center_group.append('line').attr("x1",0).attr("y1",x(-r/4));
Thanks!
If I understand correctly, you're trying to align the reticle lines within the circle. I've created a fiddle which should demonstrate a solution to the two issues in your original fiddle.
//circle svg drawn above this point...
center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));
center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));
center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));
center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));
//then include table, as shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6
The first issue is that the lines were being drawn before the (white-filled) circle (so any line within the circle was covered). Second issue was that the lines were unbounded, so i added x2 and y2 attributes where needed. See picture link for results.
Regarding the information box, you could simply append a text element under the chart and drop your data in there, but for something more robust, you could include a table, as shown in the example linked in my code above (only two links allowed apparently).
I have a stacked multiBarChart created with nvd3: jsfiddle is here: http://jsfiddle.net/e3kxZ/5/
(1) How can I get each region to display its value near its top?
I tried showValues(true) but I don't think that's supported in multiBarChart.
Other concerns I have are:
(2) how to set the text color so that it contrasts enough with the region (dark vs light colors), and
(3) how to keep the text labels from overlapping if any particular region is small.
I found an svg example (doesn't use nvd3) -- it assumes a static size for the chart, but I'd prefer to use something convenient and dynamic like nvd3.
Alternatively, if there is a different js library that supports this out of the box, please let me know and I'll use that instead.
Thanks in advance for any help!