csnw / d3.compose Goto Github PK

View Code? Open in Web Editor NEW

697.0 697.0 24.0 5.99 MB

Compose complex, data-driven visualizations from reusable charts and components with d3

Home Page: http://CSNW.github.io/d3.compose/

License: MIT License

JavaScript 73.77% CSS 2.29% HTML 23.94%

d3.compose's People

Contributors

Stargazers

Watchers

d3.compose's Issues

Legend items expand on re-render

Swatch height less than font height causes legend items to expand on re-render. Offending lines: (Position hover listeners)

Transition to better layout/options

Currently, layout of components/charts depends on the order they were added to the charts or components object, but this is unreliable and the order of object keys cannot be guaranteed. A new ordering system based on arrays will make component and chart ordering explicit and consistent. Additionally, the type: '...' approach can be verbose and relies on d3.chart's global chart registration (a dependency that may not be required in the future). A new approach of using helpers functions is proposed for phase 2.

Phase 1:

// Before
d3.select('#chart').chart('Compose', function(data) {
  return {
    charts: {
      results: {type: 'Lines', data: data.results, ...},
      control: {type: 'Bars', data: data.control, ...}
    },
    components: {
      title: {type: 'Title', text: 'Chart Title'},
      yAxis: {type: 'Axis', position: 'left', ...},
      xAxis: {type: 'Axis', position: 'bottom', ...},
      xAxisTitle: {type: 'Title', position: 'bottom', text: 'x-axis'}
    }
  };
});

// After
let { layered } = d3.compose;

d3.select('#chart').chart('Compose', function(data) {
  return [// rows: top-to-bottom
    {type: 'Title', text: 'Chart Title'}, // full-width column
    [// columns: left-to-right
      {type: 'Axis', ...},
      layered(
        {type: 'Lines', data: data.results, ...},
        {type: 'Bars', data: data.control, ...}
      )
    ],
    {type: 'Axis', ...},
    {type: 'Title', text: 'x-axis'}
  ];
});

The keys for identifying charts/components (e.g. results, control) are estimated based on layout position and type and can be set explicitly with key: '...' if necessary (e.g. component is moving)

Phase 2:

let {
  layered,
  title,
  axis,
  lines,
  bars
} = d3.compose;

d3.select('#chart').chart('Compose', function(data) {
  return [
    title('Chart Title'),
    [
      axis({...}),
      layered(
        lines({data: data.results, ...}),
        bars({data: data.control, ...})
      )
    ],
    axis({...}),
    title('x-axis')
  ];
});

The helper functions would simply return a formatted standard object, but could be expanded later. (e.g. axis({...}) returns {type: 'Axis', ...})

Phase 1 (Switch to arrays)
Phase 2 (Add helper functions)

Scale using data with value/key is broken for time series

d3.compose/src/helpers/create-scale.js

Lines 137 to 144 in 3e8a75f

    
           else { 
        
             var min_value = min(data, getValue); 
        
             domain = [ 
        
               min_value < 0 ? min_value : 0, 
        
               max(data, getValue) 
        
             ]; 
        
           }

Does not work for time (and probably a lot of other scale types). The first time is always going to be > 0. But, we should still use the min value from the series.

Time scales do not have width or rangeBand

The itemWidth function returns either a scale's width or uses the rangeBand to calculate one. It appears that d3.scale.time has neither function.

I've not come up with a workaround for this, as most suggestions are to simply calculate width/data.length which seems unlikely to be what's intended.

Open to suggestions!

Example causes typeError

Probably missing something simple but.

test.html

    <html>
      <head>
        <script type="text/javascript"
                src="/vast/libs/d3.js"></script>
        <script type="text/javascript"
                src="/vast/libs/d3.chart.js"></script>
        <script type="text/javascript"
                src="/vast/libs/d3.compose-all.js"></script>
        <link   type="text/css"
               href="/vast/css/d3.compose.css"
                rel="stylesheet"
               >
       <script>
        var data = [
            {x: 1, y: 100,},
            {x: 2, y: 200,},
            {x: 3, y: 150,}
        ];

        var chart = d3.select('#chart').chart('Compose', function(data){
            var charts = [
                d3c.lines('results', {data: data})
            ];
            return [
                d3c.layered(charts)
            ];
        });
        chart.draw(data);
    </script>
  </head>
  <body>
    <h1>Competed Count</h1>
    <div id="chart"></div>
  </body>
</html>

Generates the following Error:
Uncaught TypeError: Cannot read property 'tagName' of nullBase.extend.initialize @ d3.compose-all.js:2106Base @ d3.compose-all.js:1151Child @ d3.compose-all.js:1303d3.selection.chart @ d3.chart.js:721(anonymous function) @ vizstats.html:20

d3.js 3.5.5
d3.chart 0.2.1
everything else pulled from links on your website.

Thanks.

Responsive without width/height collapses chart

Using responsive (default) without setting width and height (which are only used to set aspect ratio) causes chart to be collapsed.

Add a flamegraph

For many types of visualization, especially related to performance monitoring, a heatmap is one of the best visualizations. Consider adding this to d3.compose

Investigate non-ordinal issues for Bars

Currently, mixins.XYValues (which Bars extends), looks for width to be set on scale (from helpers.createScale) or rangeBand (from ordinal scale). If a linear scale is used with Bars the width will be 0. Need to investigate how this is resolved in other bar chart examples and any potential fixes.

csnw / d3.compose Goto Github PK

d3.compose's People

Contributors

Stargazers

Watchers

Forkers

d3.compose's Issues

Legend items expand on re-render

Transition to better layout/options

Scale using data with value/key is broken for time series

Time scales do not have width or rangeBand

Example causes typeError

Responsive without width/height collapses chart

Add a flamegraph

Investigate non-ordinal issues for Bars

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	else {
	var min_value = min(data, getValue);

	domain = [
	min_value < 0 ? min_value : 0,
	max(data, getValue)
	];
	}