To calculate the number of occurrences of s1, s2, and s0 in JSON data and use this information to plot a multiline chart with date (path of date is as follows reviews_details>>variable vf of JSON) on the X-axis versus the number of reviews (s1/s0/s2 counts) on the Y-axis. The chart should have multiple lines for s1, s2, and s0 represented by different colors. I am currently facing difficulties in extracting the count of s1, s2, and s0 from the code and mapping it onto the y-axis domain for plotting.
var JSON = {"restaurant_code": {"rp": "rest city", "rd": "rest link", "re": "rest rating", ...<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body {
font: 12px
Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom")
var yAxis = d3.svg.axis().scale(y)
.orient("left")
// Define the line
var reviewline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.review); });
...
... <!-- Your existing D3 code continues here -->
...
</script>
</body>