Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Charted 0.1.0

  • Loading branch information...
valueof committed Nov 2, 2014
0 parents commit 0c67200d829c6cf8391227542e1a3dd04da1c92c
Showing with 30,253 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +13 −0 .jshintrc
  3. +5 −0 CONTRIBUTING.md
  4. +21 −0 LICENSE.md
  5. +27 −0 README.md
  6. +35 −0 index.js
  7. +113 −0 less/chart-info.less
  8. +22 −0 less/chart-options.less
  9. +199 −0 less/chart-plot.less
  10. +97 −0 less/chart-selection.less
  11. +58 −0 less/chart-y-axis.less
  12. +20 −0 less/charted.less
  13. +16 −0 less/colors.less
  14. +26 −0 less/dimensions.less
  15. +79 −0 less/icons.less
  16. +198 −0 less/landing-page.less
  17. +153 −0 less/legend.less
  18. +161 −0 less/mixins.less
  19. +103 −0 less/page-settings.less
  20. +42 −0 less/popover.less
  21. +81 −0 less/reset.less
  22. +57 −0 less/type.less
  23. +30 −0 package.json
  24. +6 −0 pub/images/icon-color-white.svg
  25. +6 −0 pub/images/icon-color.svg
  26. +8 −0 pub/images/icon-column-white.svg
  27. +8 −0 pub/images/icon-column.svg
  28. +11 −0 pub/images/icon-download-white.svg
  29. +11 −0 pub/images/icon-download.svg
  30. +8 −0 pub/images/icon-line-white.svg
  31. +8 −0 pub/images/icon-line.svg
  32. +8 −0 pub/images/icon-move-white.svg
  33. +8 −0 pub/images/icon-move.svg
  34. +7 −0 pub/images/icon-plus-white.svg
  35. +7 −0 pub/images/icon-plus.svg
  36. +9 −0 pub/images/icon-round-off-white.svg
  37. +9 −0 pub/images/icon-round-off.svg
  38. +8 −0 pub/images/icon-round-on-white.svg
  39. +8 −0 pub/images/icon-round-on.svg
  40. +43 −0 pub/images/icon-settings-white.svg
  41. +43 −0 pub/images/icon-settings.svg
  42. +8 −0 pub/images/spinner.svg
  43. +43 −0 pub/index.html
  44. +494 −0 pub/scripts/Chart.js
  45. +112 −0 pub/scripts/ChartData.js
  46. +117 −0 pub/scripts/ChartLegend.js
  47. +497 −0 pub/scripts/PageController.js
  48. +77 −0 pub/scripts/PageData.js
  49. +128 −0 pub/scripts/Utils.js
  50. +19 −0 pub/scripts/charted.js
  51. +9,293 −0 pub/scripts/lib/d3.js
  52. +8,829 −0 pub/scripts/lib/jquery.js
  53. +6,785 −0 pub/scripts/lib/lodash.compat.js
  54. +2,076 −0 pub/scripts/lib/require.js
@@ -0,0 +1,3 @@
node_modules/
pub/charted.css
npm-debug.log
@@ -0,0 +1,13 @@
{
"quotmark": "single",
"asi": true,
"boss": true,
"browser": true,
"strict": false,
"newcap": false,
"undef": true,
"unused": true,
"onecase": true,
"lastsemic": true,
"indent": 2
}
@@ -0,0 +1,5 @@
# Thank you for your contributions!

Before opening a pull request please make sure that
`npm test` passes and that your style is somewhat
similar to ours.
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2014 A Medium Corporation

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
@@ -0,0 +1,27 @@
# Charted
Charted is a tool for automatically visualizing data, created by the
Product Science team at [Medium](https://medium.com/). Provide the
URL to a data file and Charted returns a beautiful, interactive,
and shareable chart of the data. Charted is deliberately sparse in
formatting and data transformation options, but it does offer a few
basic features:
* Rendering well on all screen sizes, including monitors
* Re-fetching the data and updating the chart every 30 minutes
* Moving data series into separate charts
* Adjusting the chart type, labels/titles, and background

## Data structure
Charted treats the first column of the data file as the labels for the
x-axis and all subsequent columns as y-series values. Charted does not
parse the first column (x-axis), but instead always equally spaces the
data points along the x-axis.

## Supported files
Charted currently supports csv files (including links to csv files on
Dropbox) and Google Spreadsheets. The settings for Dropbox links and
Google Spreadsheets must both be set to publically shareable.

## Running Charted
To try Charted out, simply download the repo and run `npm install`
to install dependencies. After that you will be able to run
`npm start`. This will start a server at localhost:3000.
@@ -0,0 +1,35 @@
/*jshint node:true */

var request = require('request')
var express = require('express')
var app = express()

app.get('/get', function (req, res) {
if (!req.query.url) {
res.status(400).send('Bad Request: no url provided')
return
}

request(decodeURIComponent(req.query.url), function (err, resp, body) {
if (err) {
res.status(400).send('Bad Request: ' + err)
return
}

if (resp.statusCode != 200) {
res.status(400).send('Bad Request: response status code was not 200')
return
}

res.status(200).send(body)
})
})

app.use(express.static('pub'))

var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port

console.log('Running at http://%s:%s', host, port)
})
@@ -0,0 +1,113 @@
.chart-info{
padding: 12px;
position: relative;
width: 100%;
}
.chart-description{
font-size: @fontSize-smaller;
line-height: @lineHeight-tight;
padding: 20px;
text-align: center;
}
.info-input{
.border-radius(4px);
.transitionMultiple(background-color 0.3s ease, opacity 0.2s ease);
overflow: hidden;
padding: 8px;
}
.info-input:hover,
.info-input:focus{
background-color: @gray-lightest;
}
.dark .info-input:hover,
.dark .info-input:focus{
background-color: @gray-darker;
}
.dark .info-input::before{
color: @gray-dark;
opacity: 1;
}
.title{
color: @gray-darker;
font-size: @fontSize-large;
}
.dark .title{
color: white;
}
.note{
color: @gray;
}
.dark .note{
color: @gray-dark;
}
.empty.note{
display: none;
opacity: 0;
}
.active .empty.note{
opacity: 1;
}
.note::before{
color: @gray;
content: "add a note";
display: none;
opacity: 0.5;
width: 100%;
}
.empty.note::before{
display: block;
}
.note:focus::before{
display: none;
}


@media screen and (min-width: @width-tablet) {
.chart-info{
height: 100%;
right: 0;
padding: 0;
position: absolute;
top: 0;
width: @sidebar-width-small;
}
.chart-description{
padding: 16px 10px 8px;
position: absolute;
right: 0;
text-align: left;
top: 0;
width: @sidebar-width-small;
z-index: 2;
}
.empty.note{
display: block;
}
}


@media screen and (min-width: @width-netbook) {
.chart-info{
width: @sidebar-width-large;
}
.chart-description{
font-size: @fontSize-base;
width: @sidebar-width-large;
}
.title{
font-size: @fontSize-larger;
}
}

@media screen and (min-width: @width-netbook) and (max-width: @width-desktop){
.chart-grid .chart-info{
width: @sidebar-width-small;
}
.chart-grid .chart-description{
font-size: @fontSize-smaller;
width: @sidebar-width-small;
}
.chart-grid .title{
font-size: @fontSize-large;
}
}
@@ -0,0 +1,22 @@
.chart-options{
font-size: 0;
margin: 0 auto 10px;
text-align: center;
width: 100%;
}

@media screen and (min-width: @width-tablet) {
.chart-options{
.transition(all 1s ease);
bottom: 0;
opacity: 0;
margin: 0;
position: absolute;
text-align: right;
right: 4px;
}
.active .chart-options{
.transition(all 0.2s ease);
opacity: 1;
}
}

0 comments on commit 0c67200

Please sign in to comment.
You can’t perform that action at this time.