# Most basic density plot in d3.js

This post describes how to build a very basic density chart with d3.js. Only one category is represented, to simplify the code as much as possible. You can see many other examples in the density plot section of the gallery. If you're not sure what a density chart exactly is, please visit data-to-viz.com.

##### Steps:

• The Html part of the code just creates a `div` that will be modified by d3 later on.

• The first part of the javascript code set a `svg` area. It specify the chart size and its margin. Read more.

• Then, X and Y axis are drawn. Read this dedicated page on axis to understand how it works.

• Kernel density estimation is computed. You can play with the `x.ticks(40)` argument to control the bandwidth used for computation.

• The resulting variable called `density` gives a Y coordinate for each of the X axis ticks. It is possible to use this information to draw a curve with `d3.line()`.
``````<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

``````
``````<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 50},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/1_OneNum.csv", function(data) {

var x = d3.scaleLinear()
.domain([0, 1000])
.range([0, width]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

var y = d3.scaleLinear()
.range([height, 0])
.domain([0, 0.01]);
svg.append("g")
.call(d3.axisLeft(y));

// Compute kernel density estimation
var kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40))
var density =  kde( data.map(function(d){  return d.price; }) )

// Plot the area
svg.append("path")
.attr("class", "mypath")
.datum(density)
.attr("fill", "#69b3a2")
.attr("opacity", ".8")
.attr("stroke", "#000")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr("d",  d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d); })
.y(function(d) { return y(d); })
);

});

// Function to compute density
function kernelDensityEstimator(kernel, X) {
return function(V) {
return X.map(function(x) {
return [x, d3.mean(V, function(v) { return kernel(x - v); })];
});
};
}
function kernelEpanechnikov(k) {
return function(v) {
return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
};
}

</script>``````