We need to think how this could be extracted so that we don't duplicate code.

We could set up a continuous integration tool like Travis

Lets do a review and proofread of these docs

Some animations have a performance below the expected 60FPS.
Let's measure them, research solutions and improve it.

Check https://www.safaribooksonline.com/blog/2014/02/20/speeding-d3-js-checklist/

We want to use different tones of colors for the charts depending on the number of different categories.

Expected Behavior

We should pick colors depending on the number of color we need in total

Current Behavior

Right now, we take the first 2 colors of the color palette.

Possible Solution

Use a new scale that improves contrast

Context

https://eventbrite.invisionapp.com/d/main#/console/9951901/224614987/preview

Exactly what it says on the tin: create a Polymer wrapper for the library.

The stacked area chart will sometimes display the wrong color ball

Expected Behavior

we would expect the ball to be the color of the shape below it

Current Behavior

ball defaults to the last color in the colorset when there is only one ball to render

Possible Solution

Probably the order the ball is being rendered? or maybe its the way we choose the default ball color

Steps to Reproduce (for bugs)

Your Environment

• Version used: 1.4.4
• Browser Name and version: Chrome

With the V4 update this feature got lost, we need to fix it.

Check this lines: https://github.com/eventbrite/britecharts/blob/master/src/charts/brush.js#L359

Give the option to select (hover effect) the largest, smaller, or specific id by default

Make it more intelligent and to support all kind of granularity.
Maybe it could group 'axis configuration' on several ways: minute/hour/day/month/year

Let's use the brush to select the range of data on the line chart

Designs coming soon...

The mini-tooltip animation is sometimes a bit 'harsh'.
Explore ways of making it more smooth, maybe a fade-in.

It seems that scrolling is triggering viewport resizes on our demos, thus re-rendering charts.

Reported in https://news.ycombinator.com/item?id=14307608#14308850

Let's update webpack to version 3.

LEt's use Benton

We could add different curves as an option of the sparkline.

Explore creating a Grouped Bar Chart

They should be hidden and the y position adjusted to look like the line chart demo.

When loading /dist/bundled/britecharts.min.js, either by ES6 imports, commonJS modules or AMD modules we are not getting the expected results.

Expected Behavior

We should get an object with this structure:

  britecharts: {
    bar: function...
    brush: function...
    ...
  }

Current Behavior

Either getting just the first object or nothing being imported to the global scope (in script mode)

Possible Solution

Right now, our individual charts are exporting the right object (AMD and CommonJS) or a global object (script load) with this shape: window.britecharts.chartName

We want the whole bundle to do the same, aggregating all the charts in an object named britecharts.
This way we should be able to do:

   import britehcarts from 'britecharts';
   import {bar} from 'britecharts';

or

   <script src="/dist/bundle/britecharts.min.js"></script>
   ...
   var barChart = window.britecharts.bar;

I hope the solution would be something we haven't tried yet on our webpack configuration.
prodUMD poduces our individual bundles all right
prod should produce the desired outcome. Right now looks like:

  prod: {
        entry:  {
            britecharts: currentChartsArray
        },
        devtool: 'source-map',
        output: {
            path: 'dist/bundled',
            filename: projectName + '.min.js',
            library: ['britecharts'],
            libraryTarget: 'umd'
        },
        externals: {
            d3: 'd3',
            underscore: 'underscore'
        },
        module: {
            loaders: [ defaultJSLoader ],
            // Tell Webpack not to parse certain modules.
            noParse: [
                new RegExp(vendorsPath + '/d3/d3.js')
            ]
        },
        resolve: {
            alias: {
                d3: vendorsPath + '/d3'
            }
        },
        plugins
    }

Steps to Reproduce (for bugs)

1. Load /dist/bundle/britecharts.min.js
2. Check what gives back

Context

This actually makes our bundle unusable.

When selecting dates for the brush, the selection area is a solid opaque rectangle instead of the chart highlight

Expected Behavior

we should see the chart highlight, not an opaque selection rectangle

Possible Solution

brush styling

Steps to Reproduce (for bugs)

1. Go to the kitchen sink
2. play with the brush

Your Environment

• Version used: 1.4.4
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): mac osx

Explore wrapping Britecharts into react components.

We need to get a nicer dataset for the stacked area chart demo. The current set results in an almost psychedelic effect with all the colors, it should be something more smooth.

maybe use any of the data generation projects out there?

Let's create a document with the current roadmap for the project

Using category names can be tricky on bar charts and step chart.
Ryan came up with a good solution using the text wrapper function for the horizontal, but it could not be enough.

Let's explore the issue. Some reading:

• https://blog.graphiq.com/wrapping-axis-labels-in-d3-js-c29202c3e3e4#.dpr3x8uzf

Expected Behavior

Category labels well positioned and wrapped

Current Behavior

Working on Horizonal Line Chart

Possible Solution

Use the same wrapping

The padding between bars in the bar chart should be a design decision by our users. Let's make it configurable.

We want to make the tooltip smart about the data he shows.
Designs coming soon.

The SVG creation snippet is being repeated continuously, we should extract it into a helper.

I was hoping to be able to create a very simple single HTML page with a single chart or two so that the designers could do their thing and then we can incorporate their designs in Angular.

Is there any way to link a simple script tag with a src to have a single page with a chart?

With d3, the following works fine... it'd be great to have something similar.

<!DOCTYPE html>
<html>
  <head>
 <meta charset='utf-8' />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="https://d3js.org/d3-selection.v1.min.js"></script>
  </head>
  <body>
    <div id='charts'>
      <h1 id='heading'></h1>
    </div>
    <script>
      d3.select('#heading')
        .text('My Page');
    </script>
  </body>
</html>

We want to have a sparkline that works along with text.
The inspiration for this comes from Tufte's Beautiful Evidence book.

It should have a size related to font sizes, with a probable 'tunning' factor in order to support different font faces.

Extract transitions into functions, follow:

var t = d3.transition()
.duration(750)
.ease(d3.easeLinear);
d3.selectAll(".apple").transition(t)
.style("fill", "red");
d3.selectAll(".orange").transition(t)
.style("fill", "orange");

We need to explore which transitions we will want to support.

Make Bars of Bar chart grow from the bottom

After getting sources from npm install britecharts d3-selection command, and trying to install dependencies on britecharts I get the following error:

$ npm install
npm WARN deprecated [email protected]: Package is deprecated, use https://github.com/deepsweet/istanbul-instrumenter-loader
npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:206:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:877:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:334:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:498:12)
npm WARN addRemoteGit  git://github.com/beevelop/grunt-release.git resetting remote C:\Users\Ludovic\AppData\Roaming\npm-cache\_git-remotes\git-github-com-beevelop-grunt-release-git-f3dd0c51 because of error: { Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:206:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:877:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:334:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:498:12)
npm WARN addRemoteGit   killed: false,
npm WARN addRemoteGit   code: 1,
npm WARN addRemoteGit   signal: null,
npm WARN addRemoteGit   cmd: 'git -c core.longpaths=true config --get remote.origin.url' }
npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:206:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:877:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:334:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:498:12)
npm WARN addRemoteGit  requirejs/text resetting remote C:\Users\Ludovic\AppData\Roaming\npm-cache\_git-remotes\git-github-com-requirejs-text-git-37804fea because of error: { Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:206:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:877:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:334:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:498:12)
npm WARN addRemoteGit   killed: false,
npm WARN addRemoteGit   code: 1,
npm WARN addRemoteGit   signal: null,
npm WARN addRemoteGit   cmd: 'git -c core.longpaths=true config --get remote.origin.url' }

I expect to have dependencies installed and to build the library into dist/ folder using npm run prodcommand line.

Environment

• Britecharts: latest using npm install britecharts d3-selection
• Node version: 6.9.1
• NPM version: 3.10.8
• Operating System and version (desktop or mobile): Windows 10

We want to be able to select an option for making the brush handles snap to data entries. Maybe a 'threshold' or 'adjustment' factor should be included.

Reference:
https://bl.ocks.org/mbostock/6232537

This one needs some discussion.

We like:

• The theme changing using the extended colors
• The removal of a css dependency while keeping the styles
• The option of change themes for ticks, labels, tooltips, etc
• The option of setting the font as an options

We don't like:

• The use of JS to style (but we need to do it anyways)

We want to add some extra help navigating the docs
This could come as a breadcrumb on each doc page

Expected Behavior

We would see a breadcrumb on demos, API reference pages and documents

Current Behavior

We need to go back to the home page or use the menu

Context

We have received feedback that the navigation in the docs can be a bit confusing

The demo links beneath "Stacked Area Chart" do not take you to the right pages. Instead, they link you to the first list of demos again.

Let's change the source code plugin, the current one is really basic.

Investigate on how to make Britecharts more accessible.

Expected Behavior

We would want Britecharts to be section 508 compliant.

Current Behavior

Possible Solution

References:

• http://www.highcharts.com/docs/chart-concepts/accessibility
• https://www.amcharts.com/accessibility/accessible-charts/
• https://www.webaccessibility.com/best_practices.php?best_practice_id=948
• https://teamtreehouse.com/library/accessibility/web-apps/charts-and-graphs

We want to create a boilerplate project for creating Britecharts based reports. It will be an easy way of creating an easily deployable report using our charts.

The target audience could be users wanting to create private or public reports for companies, education, science results, etc.

Technically, it could be based on one of the popular boilerplate OSS and probably some other lightweight UI framework. We could add ansible configurations for using the most popular cloud services (Digital Ocean, Heroku...). It could also be a Yeoman generator.

Right now, in our demos we use a small helper to debounce a listener to the 'resize' event of it's container. This makes it possible to redraw our chart and make it responsive. Any developer would need to do the same to get a responsive chart.

We could easily move that logic inside our charts, making the debounce delay configurable. Or even the method (debounce or throttle).

The LineChartPointByDate is a grouping by date we are passing as an input to the line chart:
http://eventbrite.github.io/britecharts/global.html#lineChartPointByDate

We think this should be done by the linechart itself from the ungrouped data we input. We do something similar on the Stacked area chart.

When there is not enough space, we should add some inclination on this labels.

Create a Scatter Plot chart

We want to create an stacked bar chart.

The current design for it would looke like:

Sankey charts graphically illustrates distribution or a flow (example: traffic, money, energy etc) and is a good way for users to digest categorized quantities. A good example of Sankey diagram: http://usafacts.org/the-big-picture?view=spending

Marketing can benefit greatly from this chart and utilize it on mini-sites, marketing landing pages and blogs to offer user an interactive experience; product can also use this to offer organizer insights on user activities during a checkout flow (where do they come from, where do they drop off if the transaction fell through etc.)

Some references:
https://developers.google.com/chart/interactive/docs/gallery/sankey#overview
https://bost.ocks.org/mike/sankey/
http://usafacts.org/the-big-picture?view=revenue

On our current Brush chart the handles are really basic.
Let's add some configurable styling there.

We can use this as reference:
https://bl.ocks.org/mbostock/4349545

Let's add some info in the wiki. This could be:

• Intro
• Links to blog posts
• Links to contributing