We Keep Coding

D3 fill shape when draw with path

I'm using D3 to draw a certain shape layout for my map and the drew area has to be shaded. I am using line path to achieved the shape, What I couldn't figured out is how do I shade (fill) the area with a certain color. See picture for an example shape, just random in this case for visual aid.

you need to checkout the fill style property on paths.
<style>
path {
fill: red;
}
</style>

In order to fill the area described by these paths, simply assign the CSS attribute fill.

Per-cell border colors in a highcharts heat map

I'm using highcharts to create a simple heatmap, but now I want to use custom border colors on the cells to represent another dimension in my data set. I am able to accomplish this with the borderColor config option on the data points, but the border of each cell gets drawn partly on top of the border of the preceding cells, so it looks sort of goofy.
Is there a way to specify a margin for the border so that my border gets drawn completely inside the boundary of the cell, so that there is no overlapping of borders? Or is there a way to custom-draw my own border through some event?
You can see this effect in the fiddle at http://jsfiddle.net/8ft7e923/1/ and in the image below. Note how the orange border is drawn over the green and the red is drawn over the orange. This overlapping is what I am trying to eliminate.

It is possible to add pixel padding for a heatmap series and set borderWidth to double of set padding.
Example: http://jsfiddle.net/jk9hp3y9/2/
Example based on your demo: http://jsfiddle.net/8ft7e923/2/
As Halvor mentioned - it is not yet possible to set border for SVG elements to be placed inside of element.
Another way could be to extend Highcharts (similar as in provided demos) to change size of cells with border set to make them fit in same place as the ones without border. More about extending Highcharts in Docs.

change dimplejs linemarker style

I was trying to use dimplejs draw a multi-line chart. But the default line marker looks kinda too "big" for my chart. Is there a way to change the size or the color of the linemarker in dimplejs?

After drawing you can modify the shapes:
// dimple's draw method will create the shapes in the svg
chart.draw();
// this will select the markers and set the radius to 2
svg.selectAll(".dimple-marker,.dimple-marker-back").attr("r", 2);

How to create line chart, with custom data points and line style in javascript

I was wondering if I could use some javascript library like Google Charts, gRaphaeljs, flotcharts, or d3js to create a chart like the following:
It has custom circle in more of like a donut shape and the line style I want it to be like connecting dots on a picture. As you can see in the image, the lines have a small margin between each point.

You can use Google Chart for this. I admit I tried it just out of curiosity but it does work. All you have to do is draw chart with standard round points and then when chart is finished (on ready event) add shapes of your own:
google.visualization.events.addListener(chart, 'ready', function(){
// Looping thru every standard point
$('circle').each(function() {
var $c = $(this);
// addinng outer circle
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",$c.attr('cx'));
circles.setAttribute("cy",$c.attr('cy'));
circles.setAttribute("r",$c.attr('r'));
circles.setAttribute("fill",$c.attr('fill'));
circles.setAttribute("stroke",'white');
circles.setAttribute("stroke-width",'3');
this.parentElement.appendChild(circles);
// addinng inner circle
circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",$c.attr('cx'));
circles.setAttribute("cy",$c.attr('cy'));
circles.setAttribute("r", "4");
circles.setAttribute("fill","white");
this.parentElement.appendChild(circles);
})
});
Demo: http://jsfiddle.net/focnsyu9/1/

Check out charts.js line charts. http://www.chartjs.org/docs/#line-chart

intersection point of google chart and svg line

Svg line not displayed on google charts?
Refering this question i want to find out point at which svg line cuts google chart.
This is fiddle link to http://jsfiddle.net/nc6uf/
i want to find point at which mouse intersects google chart in mouse move event
graph.on('mousemove', function() {
line.attr("y1", d3.event.y - 50);
line.attr("y2", d3.event.y - 50);
});

Each Google Chart is drawn in an SVG that is in its own div. SVG objects can only be drawn within an element, and since you have two SVG canvases in your example (one on top and one on the bottom) your line will only be drawn in the element to which you appended the line. Because you used d3.select() you selected the first element that satisfied your condition "svg".
You can see the second SVG canvas interact with your mousemove by changing this line in your example:
var graph = d3.select('svg');
to:
var graph = d3.selectAll('svg');
If you wanted the line to pass through both charts, you'd need the charts to be drawn on the same SVG canvas.