c3/htdocs/samples/zoom_reduction.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>c3ext</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/images/logo_128.ico" />
    <link href="/css/c3.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
    <script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script src="/js/extensions/c3ext.js"></script>
    <script src="/js/samples/zoom_reduction.js"></script>
</head>
<body onload="main()">
    <div class="container-fluid">
        <h1>C3 DataSet Reduction by Zoom Level</h1>
        <h2>Hackathon May 2014</h2>
        <h4>By Dan-el Khen</h4>
        <p>Rendering graphs in the browser has many advantages, the downside is that takes a long time to render when having large datasets. </p>
        <p>This feature allows you reduces the dataset according to your current zoom level.
        It allows the developer to implement the reduction algorithm in a simple function that accepts an array of values, and returns a reduced single value.
        The default reducer will take the first item, but avg/sum/first/last or any other algorithm is simple to implement.
        </p>
        <h3>Example</h3>
        <p>
            In the following example, we'll render 10K data points, each time we'll reduce those to about 100 items (depending on available size on your screen),
            when zooming in, the resolution of the data will be better and more accurate. This would help in showing the big picture, even when the amount of data is bigger than the numbers of pixels on the screen.
        </p>
        <p>Click on the buttons or scroll with your mouse wheel inside the graph to zoom and/or pan.</p>
        <pre id="status"></pre>
        <div>
            <button onclick="chart.zoom2.zoomIn()">zoomIn</button>
            <button onclick="chart.zoom2.zoomOut()">zoomOut</button>
            <button onclick="chart.zoom2.panLeft()">panLeft</button>
            <button onclick="chart.zoom2.panRight()">panRight</button>
            <button onclick="chart.zoom2.enhance()">enhance</button>
            <button onclick="chart.zoom2.dehance()">dehance</button>
            <button onclick="chart.zoom2.reset()">reset</button>
        </div>
        <div id="divChart" style="height:300px"></div>
        <h3>Notes</h3>
        <p>Only 'columns' data format is supported for now.</p>
    </div>
</body>
</html>
fix: fix wrong versions of d3 in samples (#2321) 7 years ago			`<!DOCTYPE html>`
Implement c3ext.js with new zoom and auto dataset reduction feature 11 years ago			`<html xmlns="http://www.w3.org/1999/xhtml">`
			`<head>`
			`<title>c3ext</title>`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<link rel="shortcut icon" href="/images/logo_128.ico" />`
Fix trivials of sample for reduction by zoom - #310 11 years ago			`<link href="/css/c3.css" rel="stylesheet" />`
Implement c3ext.js with new zoom and auto dataset reduction feature 11 years ago			`<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>`
			`<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>`
Fix for d3.v5 (#2335) 7 years ago			`<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>`
Fix trivials of sample for reduction by zoom - #310 11 years ago			`<script src="/js/c3.js"></script>`
Fix typo of extensions - #310 11 years ago			`<script src="/js/extensions/c3ext.js"></script>`
Remove utils.js for c3ext (zoom reduction extension), rename js file for sample 11 years ago			`<script src="/js/samples/zoom_reduction.js"></script>`
Implement c3ext.js with new zoom and auto dataset reduction feature 11 years ago			`</head>`
			`<body onload="main()">`
			`<div class="container-fluid">`
			`<h1>C3 DataSet Reduction by Zoom Level</h1>`
			`<h2>Hackathon May 2014</h2>`
			`<h4>By Dan-el Khen</h4>`
			`<p>Rendering graphs in the browser has many advantages, the downside is that takes a long time to render when having large datasets. </p>`
fix: fix wrong versions of d3 in samples (#2321) 7 years ago			`<p>This feature allows you reduces the dataset according to your current zoom level.`
Implement c3ext.js with new zoom and auto dataset reduction feature 11 years ago			`It allows the developer to implement the reduction algorithm in a simple function that accepts an array of values, and returns a reduced single value.`
			`The default reducer will take the first item, but avg/sum/first/last or any other algorithm is simple to implement.`
			`</p>`
			`<h3>Example</h3>`
			`<p>`
			`In the following example, we'll render 10K data points, each time we'll reduce those to about 100 items (depending on available size on your screen),`
			`when zooming in, the resolution of the data will be better and more accurate. This would help in showing the big picture, even when the amount of data is bigger than the numbers of pixels on the screen.`
			`</p>`
			`<p>Click on the buttons or scroll with your mouse wheel inside the graph to zoom and/or pan.</p>`
			`<pre id="status"></pre>`
			`<div>`
			`<button onclick="chart.zoom2.zoomIn()">zoomIn</button>`
			`<button onclick="chart.zoom2.zoomOut()">zoomOut</button>`
			`<button onclick="chart.zoom2.panLeft()">panLeft</button>`
			`<button onclick="chart.zoom2.panRight()">panRight</button>`
			`<button onclick="chart.zoom2.enhance()">enhance</button>`
			`<button onclick="chart.zoom2.dehance()">dehance</button>`
			`<button onclick="chart.zoom2.reset()">reset</button>`
			`</div>`
			`<div id="divChart" style="height:300px"></div>`
Cleanups 11 years ago			`<h3>Notes</h3>`
			`<p>Only 'columns' data format is supported for now.</p>`
Implement c3ext.js with new zoom and auto dataset reduction feature 11 years ago			`</div>`
			`</body>`
			`</html>`