I am trying to create a d3js curved line chart -- looking to build something fairly simple, where the scale can animate/morph in real time, lines fade/hide.
update - latest demo with a legend - but breaking on clicking legend rects
18/10/2017
http://jsfiddle.net/0ht35rpb/235/
-- no errors but no animation either
http://jsfiddle.net/0ht35rpb/239/
update - 20th Oct
** latest chart with animation in process - but I need the data source to be cleaned up - as I've fudged it with 2 data ports at the moment -- http://jsfiddle.net/0ht35rpb/267/ -- also I want to add 7 days a week -- and clean the possible date entries. there is a sister group chart that has a similar legend/toggle -- is it best to port the "make bar" - and "make line" code into a function like makeLines -- makeBars -- and reuse this in the update function? Here is the group chart in process -- http://jsfiddle.net/0ht35rpb/259/
update - 20th Oct
http://jsfiddle.net/0ht35rpb/272/ ---- I've fixed the data source - keen to add some animations with the line either being drawn at the start or fading in/out
//current demo http://jsfiddle.net/xpb0hsey/24/
^ this variant though has boxsets around the curves and curvedpath arrays I don't need.
https://bl.ocks.org/mbostock/3884955 ^ this is the kind of chart I need to make - but I've not got a clean jsfiddle working and there is no legend toggles.
http://jsfiddle.net/xpb0hsey/26/
code base on jsfiddle
var $this = $('.chart'); var data = [{ "date": "20111001", "New York": 63.4, "San Francisco": 58.8 }, { "date": "20111002", "New York": 58.0, "San Francisco": 38.8 }, { "date": "20111003", "New York": 53.3, "San Francisco": 22.8 }]; //https://bl.ocks.org/mbostock/3884955 var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var parseTime = d3.timeParse("%Y%m%d"); var x = d3.scaleTime().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.temperature); }); var cities = data.slice(1).map(function(id) { console.log("id", id) return { id: id, values: data.map(function(d) { return {date: d.date, temperature: d[id]}; }) }; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); }) ]); z.domain(cities.map(function(c) { return c.id; })); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("Temperature, ºF"); var city = g.selectAll(".city") .data(cities) .enter().append("g") .attr("class", "city"); city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return z(d.id); }); city.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; }) .attr("x", 3) .attr("dy", "0.35em") .style("font", "10px sans-serif") .text(function(d) { return d.id; }); function type(d, _, columns) { d.date = parseTime(d.date); for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; return d; } 
0 comments:
Post a Comment