I have struggle in a while with my chart but don't understand why is not working.
I want tree map where parents are the block and within these block I want to show dots with the text of birthdate.
The birthdate I want to connect with the second x Axis at the bottom.
I cant see what I'm doing wrong, been looking for hours now.
My files with htm and json are shared on the following link
https://www.dropbox.com/sh/t0x7gdyejb1hj9g/oUZcYmN5EQ
Thanks
Related
I am working with D3 to try and create a simple bar chart. My x-axis uses ScaleTime and my y-axis uses ScaleLinear. In the pictures below, you can see that the values I've put for the domain (date values) go past the the range. Shouldn't the ticks be confined to the line? Been struggling with this for a while and haven't been able to find anything on the internet.
Graph
Inspect Element
EDIT
After applying .clamp, this is the result
New Graph
And here is the main part of my code I'm looking at (some of the values are arbitrary)
Code
I think this is because clamping is disabled by default on time scales:
Constructs a new time scale with the specified domain and range, the default interpolator and clamping disabled.
It's hard to suggest a fix without seeing your code, but try something like this:
d3.scaleTime()
.domain([domain)
.range([range])
.clamp(true)(Date.now())
Need to display line in a line-chart , with the ability to move the tiles, to see a max bitrate value line, to see labels and axis pointers on hover, grouped with a table and time Slider.Y dimension needs to display "bitrate total" or "bitrate Avg" (as defined in code). X dimension needs to display 15 min interval in scope of weeks.
I can upload my data into a table but not into the line graph. I can see points on the graph using .renderDataPoints() but no lines.
I checked the data - could not find any null/NaN values being returned, not using any old version of colors.
The code can be found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. Tried to replace my CSV with var data but nothing is being displayed at the moment in the fiddle. The code as whole is displayed in https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI
Any help would be greatly appreciated.
Here's my go-to-answer for how to put data into a jsFiddle. Basically it's easiest to stick it in an unused tag in the HTML. bl.ocks.org / blockbuilder.org is easier for this.
Here's a fork of your fiddle with the data loaded that way:
http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/
I also had to remove the spaces from the column names, because those got d3.csv confused and caused the BITRATE calculations to fail.
There was also some stray code inside the renderlet which was failing with a complaint about dim not existing.
The main reason why data was not displaying was because the input groups were not producing usable aggregated data. Your data is very close together in time, so aggregating by week would aggregate everything.
The way to debug this is to put a breakpoint or a console.log before the chart initialization and look at the results of group.all()
In this case bitrateWeekMinIntervalGroupMove and minIntervalWeekBitrateGroup were returning an array with one key/value pair. No lines can be drawn with one point. :)
It looks like you originally wanted to aggregate by 15 minute intervals, so let's get that working.
For whatever reason, there are two levels of aggregation in crossfilter, the dimension level and the group level. The dimension will have first crack at generating a key, and then the group will further refine these keys.
Your min15 function will map each time-key to the 15-minute mark before it, but it needs data that is higher than 15 minutes in resolution. So let's put these groups on the dateDimension, which hasn't already been mapped to a lower resolution:
var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...
Great, now there are 30 data points. And it draws lines.
I made the dots a bit smaller :) because at 30 pixels it was hard to see the lines.
Zooming in using the range chart reveals more of lines:
There still seem to be glitches in the reduce function (or somewhere) because the lines drop to zero when you zoom in too far, but hopefully this is enough to get you moving again.
My fork of your fiddle: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/
I want to create a LINE chart using angular-nvd3, with each data point has label on top and displaying the data value. I was able to find the option "showValues" and it can work for the discreteBarChart, but that options doesn't seem to work for line chart.
Any help? below is a picture of what I wanted. Update: i know that for a matter of fact the "showValues" is not in the LineChart. But is there any workaround.?
I am currently trying to adapt an excel dashboard I created a few years back into spotfire. The data previously fit onto one page, but this year the number of metrics has doubled and I thought it would be a good opportunity to try spotfire.
The current dashboard has a number of scatter plot charts showing the values from a range of cells (rank 1-5). Overlaid is another scatter plot that shows the groups results.
I have found it easy enough to run the scatter plot in Excel based on a range of data, but as of right now I am stumped on how to choose a range of values for my spotfire scatters.
Here is an example (in excel) of what I am trying to accomplish. The data example is how my data is currently setup.
Would you have any tips on how I may be able to produce a similar chart in Spotfire?
You can create a Document.Properties with all the values you want. Then create a slider in a text area with this document properties. You will be able to select a range of values with this slider.
To use your range in a scatter plot, on the axis you want, right click and custom expression then write something like $(my_docproperty).
Hope it will a solution to your problem !
I have a map of the US with markers for stores in each state and currently when you hover over each marker, the name and address of that store shows up. I used a json file (us.json) to get the states coordinates and boundaries. The second json file (newstorelocations.json) contains information about each store and it's location which I used to display the markers. I used a tooltip for this.
What I currently have is at:
http://bl.ocks.org/binishbaig/3969ec74b485d1021034
gist:
https://gist.github.com/binishbaig/3969ec74b485d1021034
I have a third json file (newstorespend.json) that contains products and amount spent for each store. The variable StoreDescription exists in both the second and third json file. Any clue how can I make a simple vertical bar chart displaying amount and product for each store location when you hover over each marker? I am totally new to d3.js so I am guessing I would have to write a separate function creating the chart in a separate file, and then pass it into that variable d in the mouseover function but that's purely a guess. I did make a bar chart out of the data from the third file but how do I make individual bar charts for each store and show it when the mouse hovers over the corresponding store marker.
I would appreciate any help. Thanks in advance!
There's basically no difference between adding a chart to a tooltip vs doing it normally, you'll just need to grab the data and filter it so that it only applies to the data point that you're hovering over and then create/update the chart based on that data at the correct DOM element.
I've forked your gist and done just that. I just used the data that you had for Anchorage in your newstorespend.json file in your gist. Hover over the data point for the store in Anchorage to see what shows up.
You can take a look at http://bl.ocks.org/benlyall/37e757a1e6922dccb077
The onHover and offHover functions do all the work that you're probably interested in.
Note: this is only one way to do it, and possibly not even the best.