I'm new to d3 and would like some guidance in mapping a series of arcs or pie charts to my data. I have a CSV dataset and for each line from the CSV i want to create an arc or a pie chart using the CSV data to determine the radius size etc.
For example if i have a dataset containing:
arcName, startAngle, endAngle, r
arc1, 0, 5, 2
arc2, 1, 2, 5
I want this to produce 2 arcs, one with a radius of 2 and another with a radius of 5 since there are 2 object lines in my CSV file. Is there a way that I can create 2 arcs by mapping my data to the CSV file? Thanks.
Related
I'd like to plot the top X values of a dimension in a row chart, ideally labeled using one dimension but using the value of another for the size of the bars.
Essentially a presentation of data like the following:
Sally: 1
Fred: 0.7
Bob: 0.5
Francis: 0.4
George: 0.2
Sam: 0.18
Susan: 0.16
Sarah: 0.15
Tom: 0.15
Simon: 0.14
...
rowChart1 = dc.rowChart('#id')
valDim = ndx.dimension(function(d) {return d.data});
valGroup = valDim.group().reduceCount();
rowChart1.dimension(valDim).group(valGroup);
Plots the value counts, rather than the values themselves.
Specifically I'm looking to make a rowChart of the top N data points, where the length of the bars is determined by the value of the data points, not the number of data points with that value.
I.e. Sally would have her own bar, and it would be 100% of the x-axis, while Fred's bar would be 70% and Simon's bar would be 14% of the x-axis.
If I understand your question correctly, the conceptual problem may be the distinction between the crossfilter definition of dimension, which means "a column that you bin and filter on", versus the English/math definition of the word, which might mean "any column of data" or might mean a geometric direction on a chart.
There's always at least one geometric "dimension" on every chart which is not associated with a "crossfilter dimension" because it is aggregated. In a line chart Y is driven by a group reduction/aggregation; in the row chart X is.
I understand you have a column in your data which is a unique key, say name, which you want to map to the row Y axis, and you have a second column x, which you want encode in the row X axis without aggregation. You can use crossfilter's group.reduceSum() and since only one record will land in each bin, the sum of x is just x.
Since name is a unique key, there will be only one x per name.
Let's say you have data like this:
const data = [
{name: 'Sally', x: 1},
{name: 'Fred', x: 0.7},
{name: 'Bob', x: 0.5},
{name: 'Francis', x: 0.4},
{name: 'George', x: 0.2},
{name: 'Sam', x: 0.18},
{name: 'Susan', x: 0.16}
// ...
];
Then the crossfilter initialization might look like this:
const xf = crossfilter(data),
dim = xf.dimension(d => d.name), // bin and filter on this
group = dim.group().reduceSum(d => d.x); // here be values
and chart
const rowChart = dc.rowChart('#row');
rowChart
.dimension(dim)
.group(group)
.render();
Demo fiddle
This might sound really complicated if you just want to plot x against some names, but dc.js and crossfilter are optimized for the case where there will be filtering between charts. No matter what they draw, crossfilter will always filter the rows, sort the rows into buckets, and reduce those buckets.
If you don't use filtering, then these libraries are overkill. But if you do want to filter, it's really nice to have a library with a data model that takes care of it.
I was wondering if there was a way to compose a chart that has 3 lines to effectively create a threshold / band around the core data:
Line 1-shows the actual core data points
Line 2-shows an upper line that is n above the core
Line 3-shows a lower line that is n below the core
The Core data would be an line without area fill but I would like to fill the area between 2&3 to show the n behind the core.
I tried adding additional lines and setting the colour on the lower line to transparent but the upper line draws over.
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;}),
speedSumGroupUpper = runDimension.group().reduceSum(function(d) {return (d.Speed * d.Run) + 1000;}),
speedSumGroupLower = runDimension.group().reduceSum(function(d) {return (d.Speed * d.Run) - 1000;})
;
fiddle
EDIT 1:
See this fiddle using a Stacked Line with the d3 StackLayout parameters set as order=Ascending / Offset=Expand.
The issue now is that nasty leftover area fill at the bottom.
The reason I used Expand is because it applies the correct y Values.
If I could somehow use Wiggle but force the data to plot on the same y axis instead of stacking then we're (almost) onto a winner.
I would like to compare 2 d3Plus bar charts, next to ech other, and for that I need that both charts have the same max y value (let's say 1000 even if max data value of the first chart is 700, and max data value of the second is 550).
Thanx in advance.
Use the "range" property of each chart's y-axis:
.y({range: [0, 1000]})
For reference, here is the documentation for all of the properties for an axis: https://github.com/alexandersimoes/d3plus/wiki/Visualizations#x
I'm drawing a scatter plot with d3js. Using a simple linear scale with 1,2,3,4,5. This creates equal space like:
1 2 3 4 5
problem is, I have more data points between 2 and 3, 3 and 4. less data points between 1 and 2, 4 and 5. Is it possible to configure the scale to look like:
1 2 3 4 5
or instead of linear scale I should try some other scales? Please suggest.
First, a word of warning: distorting a scale (depending on the data you want to visualize) can maybe have "undesired" effects.
If you want to go ahead, I quickly set up a fiddle to show a possible way:
Fiddle
Basically, I am using custom domain/ranges to get the desired effect:
var x2 = d3.scale.linear()
.domain([1, 2, 3, 4, 5])
.range([0, 20, 80, 170, 200]);
Does that help?
I modified the code from a D3.js example for a multi line series chart so the x values are numbers instead of dates. The graph works fine as long as the x values are under 100, but once they reach 100 the x-axis reverses order and changes scale (ie: 1 2 3 ... 99) to (100 99.9 99.8 99.7)
Here's the script: http://bitpusher.in/graph.html
and data.tsv: http://bitpusher.in/data.tsv
Any suggestions on how to fix, or where I went wrong?
Thank you.