quartz / chartbuilder Goto Github PK
View Code? Open in Web Editor NEWA front-end charting application that facilitates easy creation of simple beautiful charts
Home Page: http://quartz.github.io/Chartbuilder
License: MIT License
A front-end charting application that facilitates easy creation of simple beautiful charts
Home Page: http://quartz.github.io/Chartbuilder
License: MIT License
When using the following data set with 0s for y-values:
Week Number Person X Person Y
1 32.25 6
2 40 0
3 40 36
4 40 30
5 42 15
6 40.5 13
7 40 10
8 41 0
9 42.5 0
10 48 25.5
11 43.25 35
12 40.25 22.5
13 40.25 36
14 46.5 37.5
15 46.25 29
16 45 33.5
17 56 30.25
18 49.25 33.5
19 51 0
20 52.25 37.5
21 40 0
22 45.5 37
23 44.25 40
24 42.5 41.75
25 42.75 38.5
26 42.25 37.75
27 44 38
28 43.75 36.25
29 48 35.75
30 42.75 36
31 0 4.75
I get a graph that looks like:
But when I change the 0 values to non-zero:
Row Labels Person X Person Y
1 32.25 6
2 40 1
3 40 36
4 40 30
5 42 15
6 40.5 13
7 40 10
8 41 1
9 42.5 1
10 48 25.5
11 43.25 35
12 40.25 22.5
13 40.25 36
14 46.5 37.5
15 46.25 29
16 45 33.5
17 56 30.25
18 49.25 33.5
19 51 1
20 52.25 37.5
21 40 1
22 45.5 37
23 44.25 40
24 42.5 41.75
25 42.75 38.5
26 42.25 37.75
27 44 38
28 43.75 36.25
29 48 35.75
30 42.75 36
31 1 4.75
The graph looks like it should:
It appears that the 0 values are being interpreted as an x-value and not a y-value. Changing a single 0 value to a non-0 value will move the point from x=0 to the appropriate x-value.
My initial impression of ChartBuilder was that it is a deployable application for news organizations (or whoever) that can be customized so that reporters (or other non-technical folks) can easily create charts with design attributes that are consistent with the organization.
Specifically, this means that the actual code and deployment is aimed at developers or system administrators at a news organizations, while the end user of the deployed application are reports/non-technicals.
If this is the case, I would propose changing around a few things and ensuring that the right audience is addressed.
The README should be focused on:
On the flip side, there should be some generic inline help in the application itself that describes how to make a chart, aimed speaking to the people actually using the deployed application. Right now, this exists in the README where it is separated from the deployed application and it is not a place an end-user (reporter) would go to.
Let me know if this makes sense, and I can start maybe working on a pull request.
It needs to work in a browser too
The README.md tells user to run SimpleHTTPServer in python. This seems like an unnecessary step and might block novice users.
Just download Chartbuilder and open in any browser. Works just fine in Firefox, Safari, Chrome (on Mac).
Using the sample apple/orange juiciness data: if you change one value to a value larger than the chart lines (e.g., a y-value of 2.5 to 55), the chart should scale rather than show a line go waaaay up off the top of the chart and then zoooom back down.
If i add custom fonts the export function breaks in Chrome 28. The error I get is:
Uncaught TypeError: Array.prototype.slice called on null or undefined d3.v2.min.js:1
n d3.v2.min.js:1
d3.selectAll d3.v2.min.js:2
ChartBuilder.inlineAllStyles chartbuilder.js:235
(anonymous function) chartbuilder.js:720
v.event.dispatch jquery.min.js:2
o.handle.u
The error is also thrown during the loading of the page, but the graph shows up fine.
Fix: You should not insert your @font-face decleration in gneisschart.css but in chartbuilder.css then everything works flawlessly. Made a good point to enter into the readme or into the documentation
Error:
Uncaught TypeError: Cannot call method 'indexOf' of null chartbuilder.js:161
It would be great to be able to use this tool within After Effects, with split layers.
In order to do this currently, I have to import the SVG into Illustrator, split the groups into individual layers, and then save as an .AI file. If it was possible to export each graph element as a separate image (either PNG or SVG), then I would be able to add them to AE more easily.
Separate layers would be needed in order to add animations, grow bars, etc..
Still learning the art of javascript, but it seems like the transform being applied to legend items for displacement applies almost the same transform to all legendGroup items > 0. The result is multiple items over laying in legend area.
From what I've been able to deduce, the problem lies in this section of code in gneiss chart.js. Wish I could do more than report it.
If the information inserted in the CSV box is not well formated the program raises a few errors. Beyond those errors the program no longer works properly, like, it doesn't draw everything like it should.
One example of this happening is the following input:
names apples oranges NEWCOL
juicyness 5.5 23
color 10.2 10
flavor 6.1 13
travelability 3.8 7
Note that there are four columns in the first line and only three in the other lines. This would cause the following bugs:
The graph will go on to display things like the following:
If by accident a user inserts something wrong in this box it will bug the program. I suggest that the update of the information displayed in the graphic should be done only when the data in the input box is well formated. So suppose you were to type the data directly in the input box, the graph would only update if that data is well formated.
I am going to work on a fix for this.
Take advantage of the application cache to let anyone who's visited a Chartbuilder instance to load it up without an internet connection
Charting intraday stock price data displays on a default time scale, days with no trading should be compressed in certain circumstances.
What happens is this:
I'm going to explore this problem and see if I can fix it.
Presently Chartbuilder only looks for the word "date" in a column heading as an indication of a time series
This line https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L52
and this line https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L62
should match the set locale, or at least be configurable
Related a bit to this pull request:
#43
It makes sense to pull the Gneiss chart library out of this application as I (assume) it can stand alone. This will allow de-coupled development to happen and for that library to be used in other places. Also it allows for more detailed documentation on that library to exist in its own place.
Once this repo has been bower-ized, it'll be easy to manage the dependency.
If you start a new repo for Gneiss, I can make a pull request to make everything happen.
The ChartBuilder version hosted at http://quartz.github.io/Chartbuilder/ at the moment throws two different warnings on load in IE 10 on Windows 7:
HTML1521: Unexpected </body> or end of file. All open elements should be closed before the end of the document.
Chartbuilder, line 188 character 2
SCRIPT5007: Unable to get property 'axis' of undefined or null reference
gneisschart.js, line 910 character 8
In the latter, the value of 'd3.select(this.parentElement).data()[0]' is undefined.
  in a Series name among other things breaks the SVG
time to get BBoxin
Primarily to that the code isn't duplicated in the first and non-first drawing functions
On one of the data tables you offer...
Thanks for making this. It is awesome.
By that I mean if you change on the data point values to 0 (using the suggested data of apple/orange juiciness) the lines don't graph to the x- or y-axis, but are discontinuous.
For bar grids only obey the given width
First of all, thank you from the bottom of my heart for sharing this tool with the world. I'm not an expert by any means, but I know just enough to help my media company customize and deploy Chartbuilder, which we've already done.
My recommendation: Provide an easy way to clear out the "previously created charts" list. I can see it becoming pretty lengthy, pretty quickly. It occurs to me that a "simple" solution might, in fact, be impossible -- since there's no login, I suppose any button to clear that list would be available to anyone, which means you might have some charts unexpectedly cleared. Anyway, thinking aloud here...
For my own knowledge, if anyone out there is willing to help a noob: Assuming you can't clear the list from the interface, is there a way that I (or someone else in my company with a little more expertise) can remove the charts that have already been stored? We've got a ton of test charts piling up in there.
Again, awesome work, and I can't wait to see what improvements everyone is able to make to the code.
Hello, chartbuilder seems to only work on google chrome and not on safari or other browsers for me. Is this something i did wrong or a general issue?
Thank you!
Has discussed in #54, it is important to give the user the notion that the inputted data is valid or invalid.
Being valid means that the inputted data must be well formatted, that means that the number of columns in the CSV input must be the same for every row. It also means that there must be at least two columns and two rows, because that is the minimum amount of information required to make a graph. Example:
names Col
Row 10
As of the push request in #54 the behaviour is the following:
There are the following suggestion made in #54:
So, how will we do this?
When dealing with large numbers in tables, users may want to input the whole number in a readable format (example: $500,000). However, the parser uses a csv format (from what I can tell) and the comma is cleaned out. A good alternative might be to use ASCII character codes (as in ,
), but the system currently does not recognize them.
Seems like there's no way to invert the axis and plots for sets where incrementing datapoints don't make sense.
Allow for a series to be colored by whether the bar is positive or negative
Given a list of dates we could probably figure this out pretty easily and reliably.
It should guess that a list of XX/01/YYYY is US dates and a list of 01/XX/YYYY or (31/XX/YYYY) is a list of EU dates
The cases we could never truly guess are date range that is wholly in the first 12 days of the month, or a range with monthly periodicity (e.g. Jan 1, Feb 1, Mar 1) in the first 12 days of the month. In these cases it should fall back to the specified locale
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.