I have these labels for axis X:
1..2..3..4..5..6..etc
But I need the custom order:
3..2..5..1..6..4..etc
Even if I give the array in such custom order to d3, it automatically orders it like in the first example.
I'm using nv.models.lineChart().
The exact dump of my values:
[{"values":[{"label":18,"value":12},{"label":19,"value":412},{"label":20,"value":441},{"label":21,"value":920},{"label":22,"value":944},{"label":23,"value":144},{"label":0,"value":0},{"label":1,"value":18},{"label":2,"value":0},{"label":3,"value":7},{"label":4,"value":4},{"label":5,"value":12},{"label":6,"value":0},{"label":7,"value":0},{"label":8,"value":0},{"label":9,"value":9},{"label":10,"value":9},{"label":11,"value":32},{"label":12,"value":27},{"label":13,"value":31},{"label":14,"value":0},{"label":15,"value":30},{"label":16,"value":3},{"label":17,"value":844}],"key":"Buyings count hourly","color":"#53d488"}]
Related
I am trying to create visualizations for recent commonwealth medal tally dataset.
I would like to create a grouped bar chart of top ten countries by total number of medals won.
Y axis = total
x axis = Country name
How can I divide totals into three bars consisting of no of :
gold, Silver,Bronze medals won by each country?
I created one using excel, but don't know how to do it using seaborn
P.S. I have already tried using a list of columns for hue.
df_10 = df.head(10)
sns.barplot(data = df_10, x = 'team' , y = 'total' , hue = df_10[["gold" ,
"silver","bronze"]].apply(tuple , axis = 1) )
Here is the chart that I created using excel:
enter image description here
To plot the graph, you will need to change the dataframe to the format that will allow for easy plotting. One of the ways to do this is using dataframe.melt(). The method used by you may not work... Once the data is in a format that seaborn understands easily, plotting will become simple. As you have not provided the format for df_10, I have assumed the data to have 4 columns - Country, Gold, Silver and Bronze. Below is the code...
## Use melt using Country as ID and G, S, B as the rows for values
df_10 = pd.melt(df_10, id_vars=['Country'], value_vars=['Gold', 'Silver', 'Bronze'])
df_10.rename(columns={'value':'Count', 'variable':'Medals'}, inplace=True) ##Rename so the plot has informative texts
fig, ax=plt.subplots(figsize=(12, 7)) ## Set figure size
ax=sns.barplot(data=df_10, x='Country', y='Count', hue='Medals') ## Plot the graph
Let's take this example.
https://d3fc.io/examples/series-canvas-candlestick/
It defines X scale as a time scale.
const xScale = d3
.scaleTime()
.domain(fc.extentDate().accessors([d => d.date])(data));
To prevent multiple tick to date conversion in my zoom handler, I'd like to always work with number, but keep UI showing these numbers as dates. So, I change the code above to linear scale.
const xScale = d3
.scaleLinear()
.domain(fc.extentLinear().accessors([d => d.date.getTime()])(data));
Everything works fine, but now I have an X scale showing numbers instead of dates. The question is, how to add mapper or formatter that would show these numbers as dates in UI? I see some examples of d3.tickFormat, but not sure how to apply it in d3fc.
https://observablehq.com/#d3/axis-ticks
You supply your scales to the D3FC cartesian chart, which then couples these with the axes that it creates for you.
As mentioned in the documentation the chart exposes the properties of the X and Y axes with an x and y prefix. So, if you want to change the tick format for the X axis, which you would typically do via the tickFormat property, you instead do the following:
var chart = fc.chartCartesian(
d3.scaleLinear(),
d3.scaleLinear()
)
.xTickFormat(/* ... formatter goes here */);
I've got 2 pie charts with data like:
data: [
{diseaseType: 'Cancer', diseaseDetails: 'Lung cancer', quantity: 100},
{diseaseType: 'Diebetes', diseaseDetails: 'Unspecific', quantity: 650},
{diseaseType: 'Cancer', diseaseDetails: 'Breast cancer', quantity: 80}
]
i'm tying to get list of filters and able to remove them by user like (it's only controlled test code):
this.diseasePieChart.filters().splice(0, 1)
dc.renderAll()
it's updating first chart, but second (connected with first) not, it's stay like it was before remove filter.
Second chart i'm rendering like this:
self.diseasePieChart.on('filtered.monitor', function (chart) {
// create dimensions etc and render second chart
}
I also tried to do again crossfilter(data) after filter remove. When i'm calling dc.filterAll all filters are reset.
thanks for any help !
The correct entry points for changing filters are chart.filter() or chart.replaceFilter(), depending on whether you are trying to toggle individual items or change the entire array of filters at once.
As you found out, manipulating the array of filters inside the chart might affect the way the chart draws, but it won't convey the change to the crossfilter dimension and the other charts.
Note that as documented in the link above, the accepted type for the parameter for each of these functions is a little surprising:
The filter parameter can take one of these forms:
A single value: the value will be toggled (added if it is not present in the current filters, removed if it is present)
An array containing a single array of values ([[value,value,value]]): each value is toggled
When appropriate for the chart, a dc filter object such as
dc.filters.RangedFilter for the dc.coordinateGridMixin charts
dc.filters.TwoDimensionalFilter for the heat map
dc.filters.RangedTwoDimensionalFilter for the scatter plot
null: the filter will be reset using the resetFilterHandler
So if you want to get the array, remove an item, and then set it back, you could either:
var filters = chart.filters().slice(0); // copy the array of filters
filters.splice(0,1)
chart.replaceFilter([filters])
.redrawGroup();
or (using the toggle feature):
chart.filter(chart.filters()[0])
.redrawGroup();
Note that you usually want to redraw, not render, after changing a filter. This will allow the animated transitions to display, and is a little bit quicker.
Also, chart.redrawGroup is the same as dc.redrawAll() but it's a little safer in case you have more chart groups in the future.
I am playing around with this example of a line graph using larger data values, e.g.
var data = [3567, 6643, 2123, 1447, 1245, 2414]
and the y axis isn't starting at 0, instead of 1245. Was wondering if there was a simple way to alter this.
I'm trying to visualize 2 series but when I visualize them together, the dates don't go in sequential order anymore.
Here is the fiddle: http://jsfiddle.net/hohenheim/6R7mu/21/ Notice the weird x-axis.
Is there a way to fix the x axis on nvd3?
The data looks like this:
data1 = [{
"date": 1396828800,
"impressions": 49145385
}, {
"date": 1396915200,
"impressions": 46704447
} ....
The NVD3 "multiBarChart" uses an ordinal (category) scale, so it will only display the x-values you give it, in the order in which they are added to the scale. Because your two series only partially overlap on the x axis that's causing problems.
Unlike other NVD3 chart types, the multiBarChart doesn't give you the option of setting your own scale -- it needs to use an ordinal scale in order to generate even widths for the bars. However, you can set the x domain (the list of categories to use for each bar), by calling chart.xDomain(arrayOfXValues).
The array will need to be an ordered array of Date values that spans your data. In order to generate it, you'll need the d3 time intervals range functions. You might also need the d3.extent function to find your max and min values.