D3 and dimple line charts

Question

I'm still getting a feel for D3, but I've been working on a project where I'd like to spit out data to D3/dimple module to chart it, with some parameters being added by the user.

I've tried formatting my data in two different ways, and had some mixed results.

//Not working
var data = [
{"College":"Central Michigan University","1990-tuition":"2000.00","1991-tuition":"2500.00","1992-tuition":"3000.00","1993-tuition":"3500.00","1994-tuition":"4000.00","1995-tuition":"4500.00","1996-tuition":"5000.00","1997-tuition":"5500.00","1998-tuition":"6500.00","1999-tuition":"7000.00","2000-tuition":"7500.00"},
{"College":"Eastern Michigan University","1990-tuition":"2500.00","1991-tuition":"3000.00","1992-tuition":"3500.00","1993-tuition":"4000.00","1994-tuition":"4500.00","1995-tuition":"5000.00","1996-tuition":"5500.00","1997-tuition":"6500.00","1998-tuition":"7000.00","1999-tuition":"7500.00","2000-tuition":"8000.00"},
];

I prefer the first method for my data retrieval. All of my data is variable. Between datasets, the field names change. In this one, each record is a college, with tuition by year.

//Working
data2 = [
{"College":"Central Michigan University","Year": "1990", "Tuition":"2000.00"},
{"College":"Central Michigan University","Year": "1991", "Tuition":"2500.00"},
{"College":"Central Michigan University","Year": "1992", "Tuition":"3000.00"},
{"College":"Central Michigan University","Year": "1993", "Tuition":"3500.00"},
{"College":"Central Michigan University","Year": "1994", "Tuition":"4000.00"},
{"College":"Central Michigan University","Year": "1995", "Tuition":"4500.00"},
{"College":"Central Michigan University","Year": "1996", "Tuition":"5000.00"},
{"College":"Central Michigan University","Year": "1997", "Tuition":"5500.00"},
{"College":"Central Michigan University","Year": "1998", "Tuition":"6000.00"},
{"College":"Central Michigan University","Year": "1999", "Tuition":"6500.00"},
{"College":"Central Michigan University","Year": "2000", "Tuition":"7000.00"},
{"College":"Eastern Michigan University","Year": "1990", "Tuition":"2500.00"},
{"College":"Eastern Michigan University","Year": "1991", "Tuition":"3000.00"},
{"College":"Eastern Michigan University","Year": "1992", "Tuition":"3500.00"},
{"College":"Eastern Michigan University","Year": "1993", "Tuition":"4000.00"},
{"College":"Eastern Michigan University","Year": "1994", "Tuition":"4500.00"},
{"College":"Eastern Michigan University","Year": "1995", "Tuition":"5000.00"},
{"College":"Eastern Michigan University","Year": "1996", "Tuition":"5500.00"},
{"College":"Eastern Michigan University","Year": "1997", "Tuition":"6000.00"},
{"College":"Eastern Michigan University","Year": "1998", "Tuition":"6500.00"},
{"College":"Eastern Michigan University","Year": "1999", "Tuition":"7000.00"},
{"College":"Eastern Michigan University","Year": "2000", "Tuition":"7500.00"}
];

This JSON worked, but exporting it this way is going to be... redundant feeling. I'd rather optimize it like the first set.

I was able to spit out my data with this..

var svg = dimple.newSvg(".chartMe", 590, 400);
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var chartData = dimple.filterData(data2, "College", ["Central Michigan University", "Eastern Michigan University"]);
var myChart = new dimple.chart(svg, chartData);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Year");
x.addOrderRule("Year");
myChart.addMeasureAxis("y", "Tuition");
myChart.addLegend(60, 10, 500, 20, "right");
myChart.addSeries("College", dimple.plot.line);
myChart.draw();

The problem is that I don't like the data structure, but I'm not familiar enough with D3 or Dimple to know really want I'm doing with the data. For example, on the filter, I couldn't get it to work without secondary filter, selecting the two colleges specifically, which I'd rather not have to do. I also couldn't find out how to set the line colors.

Here's a test link: http://www.freeptools.com/mapster/test.php

Answer 1

The second data format is a requirement of dimple. It's an essential factor for dimple to be able to support the aggregation and chart flexibility that it does.

The first format is quite close to the way that you need to provide data for a line chart in NVD3 so you might have more luck with that library:

Maybe some sort of adaption of this: http://nvd3.org/examples/cumulativeLine.html

Regarding dimple's filters, you don't need to use them if you don't want to, just pass the data straight into the chart.

Setting colours is done using the chart.assignColor method to allocate specifically based on value, alternatively you can change the chart.defaultColors and they will be allocated from the set you provide. In your example both lines are the same colour because you have .line { stroke: steelblue } in your css.