score:1
I will describe few basic features you must understand before approaching visualization. As per the fiddle, you have two sets of data that must be plotted across X & Y axis.(Ex: data, dots). Domain for this data sets are different though you need to understand the concept of Domain and range.
d3.scaleLinear() <>
Constructs a new continuous scale with the unit domain [0, 1], the unit range [0, 1], the default interpolator and clamping disabled. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.
d3.scaleTime() <>
Constructs a new time scale with the domain [2000-01-01, 2000-01-02], the unit range [0, 1], the default interpolator and clamping disabled.
- Domain and Range mapping for individual data series
- Brush and zoom and its invert mapping to the scales
- Redraw the plots based on new scales.
** Below code snippet is just to explain the brush implementation with out considering the scale for dots. Try it your self to map the logic by reading the documentation Brush Event Example
var data = [{
"date": "2017-04-22T11:45:00.000Z",
"total": 731.6047915220261,
"min": 1.8769680261611938,
"key_field": "1492861500000",
"max": 2.7165653705596924,
"price": 1.8769680261611938,
"total_count": 315,
"mean": 2.3225548937207177,
"count": 315
},
{
"date": "2017-04-01T05:30:00.000Z",
"total": 708.6527144908905,
"min": 1.779407262802124,
"key_field": "1491024600000",
"max": 2.6382412910461426,
"price": 1.779407262802124,
"total_count": 315,
"mean": 2.249691157113938,
"count": 315
},
{
"date": "2017-03-31T02:45:00.000Z",
"total": 700.1026722192764,
"min": 1.8156663179397583,
"key_field": "1490928300000",
"max": 2.587003469467163,
"price": 1.8156663179397583,
"total_count": 315,
"mean": 2.2225481657754806,
"count": 315
},
{
"date": "2017-03-31T02:30:00.000Z",
"total": 699.6637561321259,
"min": 1.8294581174850464,
"key_field": "1490927400000",
"max": 2.57082200050354,
"price": 1.8294581174850464,
"total_count": 315,
"mean": 2.221154781371828,
"count": 315
},
{
"date": "2017-03-31T02:15:00.000Z",
"total": 702.4780179262161,
"min": 1.8524492979049683,
"key_field": "1490926500000",
"max": 2.628413677215576,
"price": 1.8524492979049683,
"total_count": 315,
"mean": 2.2300889457975117,
"count": 315
},
{
"date": "2017-03-31T02:00:00.000Z",
"total": 705.038315653801,
"min": 1.8353750705718994,
"key_field": "1490925600000",
"max": 2.604921340942383,
"price": 1.8353750705718994,
"total_count": 315,
"mean": 2.2382168750914317,
"count": 315
},
{
"date": "2017-03-31T01:45:00.000Z",
"total": 701.7422981262207,
"min": 1.8062856197357178,
"key_field": "1490924700000",
"max": 2.5804450511932373,
"price": 1.8062856197357178,
"total_count": 315,
"mean": 2.2277533273848276,
"count": 315
},
{
"date": "2017-03-31T01:30:00.000Z",
"total": 706.3951338529587,
"min": 1.8176854848861694,
"key_field": "1490923800000",
"max": 2.584993600845337,
"price": 1.8176854848861694,
"total_count": 315,
"mean": 2.242524234453837,
"count": 315
},
{
"date": "2017-03-31T01:15:00.000Z",
"total": 704.2638461589813,
"min": 1.7730687856674194,
"key_field": "1490922900000",
"max": 2.6350574493408203,
"price": 1.7730687856674194,
"total_count": 315,
"mean": 2.235758241774544,
"count": 315
},
{
"date": "2017-03-31T01:00:00.000Z",
"total": 703.4522807598114,
"min": 1.8147484064102173,
"key_field": "1490922000000",
"max": 2.5720791816711426,
"price": 1.8147484064102173,
"total_count": 315,
"mean": 2.233181843681941,
"count": 315
},
{
"date": "2017-03-31T00:45:00.000Z",
"total": 706.2918384075165,
"min": 1.7760894298553467,
"key_field": "1490921100000",
"max": 2.596073627471924,
"price": 1.7760894298553467,
"total_count": 315,
"mean": 2.2421963124048143,
"count": 315
},
{
"date": "2017-03-31T00:30:00.000Z",
"total": 707.0961575508118,
"min": 1.7756011486053467,
"key_field": "1490920200000",
"max": 2.6146974563598633,
"price": 1.7756011486053467,
"total_count": 315,
"mean": 2.2447497065105138,
"count": 315
},
{
"date": "2017-03-31T00:15:00.000Z",
"total": 706.1140650510788,
"min": 1.7976468801498413,
"key_field": "1490919300000",
"max": 2.6084225177764893,
"price": 1.7976468801498413,
"total_count": 315,
"mean": 2.2416319525431074,
"count": 315
},
{
"date": "2017-03-31T00:00:00.000Z",
"total": 707.5575115680695,
"min": 1.8497636318206787,
"key_field": "1490918400000",
"max": 2.5975091457366943,
"price": 1.8497636318206787,
"total_count": 315,
"mean": 2.2462143224383158,
"count": 315
},
{
"date": "2017-03-30T23:45:00.000Z",
"total": 707.9171552658081,
"min": 1.8517450094223022,
"key_field": "1490917500000",
"max": 2.5352094173431396,
"price": 1.8517450094223022,
"total_count": 315,
"mean": 2.247356048462883,
"count": 315
},
{
"date": "2017-03-30T23:30:00.000Z",
"total": 707.09266269207,
"min": 1.8389506340026855,
"key_field": "1490916600000",
"max": 2.593708038330078,
"price": 1.8389506340026855,
"total_count": 315,
"mean": 2.244738611720857,
"count": 315
},
{
"date": "2017-03-30T23:15:00.000Z",
"total": 708.3666490316391,
"min": 1.861556053161621,
"key_field": "1490915700000",
"max": 2.6234216690063477,
"price": 1.861556053161621,
"total_count": 315,
"mean": 2.2487830127988544,
"count": 315
}
]
var dots =
[
{
"date": "2017-04-22T11:45:00.000Z",
"total": 731.6047915220261,
"min": 1.8769680261611938,
"key_field": "1492861500000",
"max": 2.7165653705596924,
"price": 1.8769680261611938,
"total_count": 315,
"mean": 2.3225548937207177,
"count": 315
},
{
"date": "2017-03-31T01:45:00.000Z",
"total": 701.7422981262207,
"min": 1.8062856197357178,
"key_field": "1490924700000",
"max": 2.5804450511932373,
"price": 1.7062856197357178,
"total_count": 315,
"mean": 2.2277533273848276,
"count": 315
},
{
"date": "2017-03-31T01:30:00.000Z",
"total": 706.3951338529587,
"min": 1.8176854848861694,
"key_field": "1490923800000",
"max": 2.584993600845337,
"price": 1.8176854848861694,
"total_count": 315,
"mean": 2.242524234453837,
"count": 315
},
{
"date": "2017-03-28T18:00:00.000Z",
"total": 728.67049741745,
"min": 1.2837289810180664,
"key_field": "1490724000000",
"max": 2.706052541732788,
"price": 1.3837289810180664,
"total_count": 315,
"mean": 2.3132396743411108,
"count": 315
},
{
"date": "2017-03-26T20:00:00.000Z",
"total": 721.6712145805359,
"min": 1.8257900476455688,
"key_field": "1490558400000",
"max": 2.762291669845581,
"price": 1.4257900476455688,
"total_count": 315,
"mean": 2.291019728827098,
"count": 315
},
{
"date": "2017-03-28T17:45:00.000Z",
"total": 726.2018908262253,
"min": 1.8992395401000977,
"key_field": "1490723100000",
"max": 2.7374281883239746,
"price": 1.8992395401000977,
"total_count": 315,
"mean": 2.305402828019763,
"count": 315
},
{
"date": "2017-03-28T17:30:00.000Z",
"total": 730.83118724823,
"min": 1.8232735395431519,
"key_field": "1490722200000",
"max": 2.696560859680176,
"price": 1.3232735395431519,
"total_count": 315,
"mean": 2.320099007137238,
"count": 315
},
{
"date": "2017-03-28T17:15:00.000Z",
"total": 728.1204907894135,
"min": 1.8851990699768066,
"key_field": "1490721300000",
"max": 2.654668092727661,
"price": 1.8851990699768066,
"total_count": 315,
"mean": 2.3114936215536934,
"count": 315
},
{
"date": "2017-03-27T02:45:00.000Z",
"total": 702.2468013763428,
"min": 1.7651863098144531,
"key_field": "1490582700000",
"max": 2.6390604972839355,
"price": 1.373651863098144531,
"total_count": 315,
"mean": 2.229354925004263,
"count": 315
},
{
"date": "2017-03-27T02:30:00.000Z",
"total": 700.9137979745865,
"min": 1.8334004878997803,
"key_field": "1490581800000",
"max": 2.620957136154175,
"price": 1.8334004878997803,
"total_count": 315,
"mean": 2.2251231681732904,
"count": 315
},
{
"date": "2017-03-27T02:15:00.000Z",
"total": 700.9274371862411,
"min": 1.8098258972167969,
"key_field": "1490580900000",
"max": 2.6065454483032227,
"price": 1.8098258972167969,
"total_count": 315,
"mean": 2.2251664672579086,
"count": 315
},
{
"date": "2017-03-27T02:00:00.000Z",
"total": 703.2963272333145,
"min": 1.7948274354934692,
"key_field": "1490580000000",
"max": 2.549198865890503,
"price": 1.7968274354934692,
"total_count": 315,
"mean": 2.2326867531216332,
"count": 315
},
{
"date": "2017-03-27T01:45:00.000Z",
"total": 700.4703311920166,
"min": 1.8429771661758423,
"key_field": "1490579100000",
"max": 2.518679141998291,
"price": 1.348429771661758423,
"total_count": 315,
"mean": 2.223715337117513,
"count": 315
},
{
"date": "2017-03-27T01:30:00.000Z",
"total": 701.4555011987686,
"min": 1.7773451805114746,
"key_field": "1490578200000",
"max": 2.635554790496826,
"price": 1.27773451805114746,
"total_count": 315,
"mean": 2.2268428609484716,
"count": 315
},
{
"date": "2017-03-26T20:00:00.000Z",
"total": 721.6712145805359,
"min": 1.8257900476455688,
"key_field": "1490558400000",
"max": 2.762291669845581,
"price": 1.48257900476455688,
"total_count": 315,
"mean": 2.291019728827098,
"count": 315
},
{
"date": "2017-03-26T19:45:00.000Z",
"total": 724.9882735013962,
"min": 1.80784010887146,
"key_field": "1490557500000",
"max": 2.6430490016937256,
"price": 0.40784010887146,
"total_count": 315,
"mean": 2.301550074607607,
"count": 315
},
]
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 430, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;
var parseDate = d3.timeParse("%m/%d/%Y %H:%M");
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]),
dotXScale = d3.scaleTime().range([0, width]),
dotYScale = d3.scaleLinear().range([height, 0]);
var xAxis = d3.axisBottom(x),
xAxis2 = d3.axisBottom(x2),
yAxis = d3.axisLeft(y);
var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
var line = d3.line()
.x(function (d) { return x(new Date(d.date)); })
.y(function (d) { return y(d.price); });
var line2 = d3.line()
.x(function (d) { return x2(new Date(d.date)); })
.y(function (d) { return y2(d.price); });
var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0);
var Line_chart = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("clip-path", "url(#clip)");
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
x.domain(d3.extent(data, function(d) { return new Date(d.date); }));
dotXScale.domain(d3.extent(dots, function(d) { return new Date(d.date); }));
y.domain([0, d3.max(data, function (d) { return d.price; })]);
dotYScale.domain([0, d3.max(dots, function (d) { return d.price; })]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
Line_chart.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
context.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2);
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
g.selectAll(".dot")
.data(dots)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {
//console.log('---',x(new Date(d.date)))
return dotXScale(new Date(d.date));
})
.attr("cy", function(d) {
//console.log(y(d.price));
return dotYScale(d.price);
})
.on("mouseover", function(d){
console.log(d);
return tooltip.style("visibility", "visible").html("Expected value is: "+d.expected_value + "<br/>" + "value : "+d.close +"<br/>" + "deviation is: "+d.deviation_expected)
})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
dotXScale.domain(s.map(x2.invert), x2);
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
g.selectAll(".dot").transition(1000)
.attr("cx", function (d) {
return dotXScale(new Date(d.date)) })
.attr("cy", function (d) {
//console.log(y(d.price));
return dotYScale(d.price) });
}
function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}
function type(d) {
d.date = new Date(d.date);
d.price = +d.price;
return d;
}.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.heading {
padding-top: 30px;
}
.buttonWidth {
height: 34px;
width: 50px;
}
.actiontable {
width: 36rem;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
.area {
fill: none;
stroke: #a2dced;
stroke-width: 2;
clip-path: url(#clip);
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
rect.selection
{
fill:green;
}<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
Source: stackoverflow.com
Related Query
- How to add a click event on nvd3.js graph
- d3.js: How to add labels to scatter points on graph
- How to add a title for a NVD3.js graph
- How to add label to edges in d3 graph
- How do i add two different shapes to D3 forced directed graph based on shape field value?
- How to add a dynamic legend to a D3 force directed graph in Apex?
- how do i add a zoom in and zoom out button in a graph on d3
- How to add custom colors in D3 nodes of a graph
- How to add a line graph to a scatterplot using d3?
- How to add a d3js graph in slideshow instead of body?
- Add dots on a multi line D3.js Graph with nested data
- how to add mouse events to force directed graph using the d3 canvas renderer?
- How do I add a click event to a directed graph using dagre d3.js(javascript library)?
- How do I add a title attribute to the nodes of my force-directed graph generated by d3?
- d3 v4 how to add data labels to bar graph
- How to add a legend to a discrete bar graph in nvd3?
- How do i add a clip path for my graph ?
- How to add a single data point to a line graph in D3 without redrawing
- how to add text inside a rectangular nodes for a network graph in D3.js?
- How to add superscript to the legend name (graph name) in c3.js graph library
- How to add dots in D3 graph?
- D3.js How to add tooltip in my legend using line graph
- How can I add extra range to d3.js line graph
- How can I add text to edges in a force directed graph d3?
- How to add text to a force directed graph in D3.js
- How to Add X and Y axis in the pre existing graph using D3
- How to add a tooltip to an svg graphic?
- How to add an image to an svg container using D3.js
- How to make force layout graph in D3.js responsive to screen/browser size
- How to add border/outline/stroke to SVG elements in CSS?
More Query from same tag
- d3js gives typeError "d is undefined"
- D3js tooltips for different graphs
- Stop Force Layout on d3js and start free dragging nodes
- D3 bar chart update
- can I target a specific node in d3
- Why is there so much fuzz about d3 and alike?
- event.pageX is working in Chrome but not working in Firefox
- d3.js bar chart is not updating based on click event
- adding input text box on clicking the data labels d3.js
- transition when adding new data to d3 streamgraph
- d3 counting variable of JSON
- Force chart d3.js inside a triangle
- Angular d3 donut
- geoChoroplethChart map that displays cities / points of interest with tags
- Position relative is not working in Safari 11 Dagre-d3 svg
- dc.js Access value after grouping for line chart
- Creating a stack bar chart using XML data
- Converting JSON format to CSV to upload data table in R to produce D3 bubble chart
- D3 Map data label not correctly showing
- d3.js in visualize china map in geojson format about the projection setting
- Put a timeline to a D3.js Tree graph
- Fill bar with gradient colors depending on the value
- Why does html Input form conflicts to d3 force layout?
- TopoJSON ‹‹properties›› field, how to get values with d3.js?
- Dimple js plot not scaling correctly in Firefox
- Moving an object from one region to another in d3.js
- Geojson map with D3 only rendering a single path in a feature collection
- Create additional D3.js symbols
- How to make the extent of a brush match the size of the parent element?
- Directed graph - node level CSS styles
