Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var width = 500,
- height = 500;
- var svg = d3.select('.main-container')
- .append('svg')
- .attr('width', 600)
- .attr('height', 600);
- var xScale = d3.scaleBand()
- .range([0, width - 100])
- .padding(0.4),
- yScale = d3.scaleLinear()
- .range([height - 100, 0]);
- g = svg.append("g").attr("transform", "translate(" + 100 + "," + 100 + ")");
- xScale.domain(year);
- yScale.domain([d3.min(values), d3.max(values)]);
- g.append("g").attr("transform", "translate(0," + (height - 100) + ")")
- .call(d3.axisBottom(xScale));
- g.append("g").attr("transform", "translate(0,0)")
- .call(d3.axisLeft(yScale).ticks(8));
- **/* I need to pass the json data here to plot the corresponding path for each countries here */**
- g.append("path")
- .attr("d", -------)
- .attr("stroke", "blue")
- .attr("stroke-width", 2)
- .attr("fill", "none");
- });
- **json Data :**
- {
- "22": [{
- "Country": "Rainfall",
- "2010": "10",
- "2011": "20",
- "2012": "41",
- "2013": "85.5",
- "2014": "114",
- "2015": "120",
- "2016": "130",
- "2017": "144.5"
- }, {
- "Country": "Tokyo",
- "2010": "12",
- "2011": "21",
- "2012": "42",
- "2013": "86.5",
- "2014": "115",
- "2015": "121",
- "2016": "131",
- "2017": "145.5"
- }]
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement