Develop Reference

d3:Adding Axis like a Box

I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.

You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js

How does it implement this chart with highcharts?

https://institutional.fidelity.com/app/item/RD_13569_45180/the-art-and-science-of-investment-decision-making.html
There is a very nice graph and pie chart under Investment Decision-Making in 2016.
I know it is highcharts now. I want to write something similar. But I can't find any chart type similar in its document.
Could you tell me what kind of chart it is? And how to put different data items inside the bubble.

It looks like a combination of line, bubble and pie series.
Line series (alternative: scatter with lineWidth > 0) lies under the bubbles. All interaction with this series should be disabled (hover state, tooltip, etc.).
Text inside the bubble is data label (dataLabels.enabled property should be set to true). You can manage its content in dataLabels.formattercallback function.
You can handle showing/adding pie (donut) charts in plotOptions.bubble.point.events.mouseover callback function. Text in the middle of a donut can be rendered via SVGRenderer.text().
All options that I mentioned can be found in the API: https://api.highcharts.com/highcharts/

how to synchronize multiple d3 charts when zoomed?

function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration

I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle

Show color thresholds in c3.js gauge

I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.
Any one can help me?
This is the gauge now:
This is what I expect:

There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:
onrendered: function() {
drawThresholds(this, thresholdOpts, opts);
}
Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/
Output obtained looks like below:
and:

Chart.js ungroup data in tooltip with multiple lines

I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.