sebinsua / component-horizontal-stacked-bar

A horizontal stacked bar component created with React and d3

Seb Insua

Hi there, I'm Seb Insua, a software engineer and freelancer working on end-to-end product engineering from the user interface to the API and algorithm design.

I write technical articles, post programming ideas and experiments on my Gist and occasionally make open-source software. I'm always interested in new projects, so feel free to drop me a line.

Selected posts

• "Is dismissing the algorithmic tech interview a memetic hazard?"
  • This contains a decision tree to help navigate what algorithm to apply to different kinds of problems.
• "Bridging the gap between neural networks and functions"
  • This contains a detailed breakdown of the mathematics and code involved in backpropagation.
• "Use notation to unmask relationships when problem solving"
  • This shows how formulating problems using equations can sometimes help you towards a more optimal solution.

Get in touch

• Blog: sebinsua.com
• Twitter: @sebinsua
• Email: [email protected]

component-horizontal-stacked-bar's Issues

How to change colours in stacked bar chart?

[V2] Update d3 to v4

• Read d3#CHANGES.md.
• Document the intermediary transformations that I was doing before, since my rewrite will need to a similar thing but in a different way.
• Take a look at the interfaces of:
  • d3-array#max
  • d3-selection
  • d3-shape#stacks
  • d3-scale.

API changes

• d3.scale.linear ↦ d3.scaleLinear
• d3.scale.category10 ↦ d3.schemeCategory10
• The selection.data method now returns a new selection rather than modifying the selection in-place. Read: what-makes-software-good
• d3.layout.stack ↦ d3.stack
• The stack generator now longer needs an x-accessor. In addition, the API has been simplified: the stack generator now accepts tabular input, such as an array of objects. The resulting array has one element per series. Each series has one point per month, and each point has a lower and upper value defining the baseline and topline:

Transformations

data:

[ { name: 'A', value: 25 },
  { name: 'B', value: 50 },
  { name: 'C', value: 75 },
  { name: 'D', value: 5 },
  { name: 'E', value: 45 } ]

layers before stack(...):

[ [ { y: 25, name: 'A', value: 25 } ],
  [ { y: 50, name: 'B', value: 50 } ],
  [ { y: 75, name: 'C', value: 75 } ],
  [ { y: 5, name: 'D', value: 5 } ],
  [ { y: 45, name: 'E', value: 45 } ] ]

layers after stack(...):

[ [ { y: 25, name: 'A', value: 25, y0: 0 } ],
  [ { y: 50, name: 'B', value: 50, y0: 25 } ],
  [ { y: 75, name: 'C', value: 75, y0: 75 } ],
  [ { y: 5, name: 'D', value: 5, y0: 150 } ],
  [ { y: 45, name: 'E', value: 45, y0: 155 } ] ]

invertedLayers:

[ [ { x: 25, x0: 0, y: 25, name: 'A', value: 25, y0: 0 } ],
  [ { x: 50, x0: 25, y: 50, name: 'B', value: 50, y0: 25 } ],
  [ { x: 75, x0: 75, y: 75, name: 'C', value: 75, y0: 75 } ],
  [ { x: 5, x0: 150, y: 5, name: 'D', value: 5, y0: 150 } ],
  [ { x: 45, x0: 155, y: 45, name: 'E', value: 45, y0: 155 } ] ]

xMax:

200