An example of d3-boxes in action. Responds to resize.
forked from curran's block: Responding to Resize
forked from curran's block: Demo of d3-boxes
Last active
November 1, 2017 09:58
-
-
Save AlainRo/d365b7a25018cbe4fd8518f7e423fe92 to your computer and use it in GitHub Desktop.
Demo of d3-boxes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dynamic Size Example</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-boxes.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .vega-actions a { | |
| padding: 0.2em; | |
| } | |
| /* Make the chart container fill the page using CSS. */ | |
| #chart { | |
| position: fixed; | |
| left: 0px; | |
| right: 0px; | |
| top: 0px; | |
| bottom: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| var BC = { | |
| "$schema": "https://vega.github.io/schema/vega-lite/2.0.0-rc5.json", | |
| "description": "A simple bar chart with embedded data.", | |
| "renderer" : "svg", | |
| "width": 400, | |
| "autosize": { | |
| "type": "fit", | |
| "contains": "content", | |
| "resize": true | |
| }, | |
| "data": { | |
| "values": [ | |
| {"a": "A","b": 28}, {"a": "B","b": 55} | |
| ] | |
| }, | |
| "mark": "bar", | |
| "encoding": { | |
| "x": {"field": "a", "type": "ordinal"}, | |
| "y": {"field": "b", "type": "quantitative"} | |
| } | |
| }; | |
| var chartDiv = document.getElementById("chart"); | |
| var svg = d3.select(chartDiv).append("svg"); | |
| var color = d3.scaleOrdinal().range(d3.schemeCategory10); | |
| function drawBox(name, box){ | |
| const x = box.x; | |
| const y = box.y; | |
| const width = box.width; | |
| const height = box.height; | |
| // Setup a group for this box. | |
| var g = svg.selectAll('.' + name).data([null]); | |
| var gEnter = g.enter().append('g').attr('class', name); | |
| gEnter.merge(g) | |
| .attr('transform', 'translate(' + x + ',' + y + ')'); | |
| // Draw a box. | |
| gEnter | |
| .append('rect') | |
| .attr('fill', color(name)) | |
| .attr('stroke', 'white') | |
| .merge(g.select('rect')) | |
| .attr('width', width) | |
| .attr('height', height); | |
| // Draw an X to show the size of the box. | |
| var lines = gEnter.merge(g).selectAll("line").data([ | |
| {x1: 0, y1: 0, x2: width, y2: height}, | |
| {x1: 0, y1: height, x2: width, y2: 0} | |
| ]); | |
| lines | |
| .enter().append("line") | |
| .style("stroke-width", 5) | |
| .style("stroke-opacity", 0.4) | |
| .style("stroke", "black") | |
| .merge(lines) | |
| .attr("x1", function (d) { return d.x1; }) | |
| .attr("y1", function (d) { return d.y1; }) | |
| .attr("x2", function (d) { return d.x2; }) | |
| .attr("y2", function (d) { return d.y2; }) | |
| ; | |
| // Add a text label. | |
| var text = gEnter | |
| .append('text') | |
| .style('font-size', '5em') | |
| .style('font-family', 'sans-serif') | |
| .style('text-anchor', 'middle') | |
| .style('alignment-baseline', 'middle') | |
| .attr('fill', 'white') | |
| .merge(g.select('text')) | |
| .attr('x', width / 2) | |
| .attr('y', height / 2) | |
| .text(name); | |
| } | |
| function redraw(){ | |
| // Extract the width and height that was computed by CSS. | |
| var width = chartDiv.clientWidth; | |
| var height = chartDiv.clientHeight; | |
| // Use the extracted size to set the size of an SVG element. | |
| svg | |
| .attr("width", width) | |
| .attr("height", height); | |
| var layout = { | |
| orientation: "vertical", | |
| children: [ | |
| "En-tête", | |
| { | |
| orientation: "horizontal", | |
| children: [ | |
| "BA", | |
| {orientation: "vertical", | |
| children: ["BB1", "BB2", "BB3"]}, | |
| "BC" | |
| ], | |
| size: 3 // Make this layer have a size weight of 2 (default is 1) | |
| } | |
| ] | |
| }; | |
| var sizes = { | |
| "En-tête": { | |
| size: 0.5 // Make the "A" box have a size weight of 2 (default is 1) | |
| }, | |
| "BA": {size: 0.5}, | |
| "BC": {size: 2}, | |
| }; | |
| var box = { | |
| width: width, | |
| height: height | |
| }; | |
| var boxes = d3.boxes(layout, sizes, box); | |
| // Have a look in the console! | |
| console.log(boxes); | |
| Object.keys(boxes).forEach(function (name) { | |
| drawBox(name, boxes[name]); | |
| }); | |
| const opt = {renderer: "svg"}; | |
| vegaEmbed(".BC", BC, opt); | |
| } | |
| // Draw for the first time to initialize. | |
| redraw(); | |
| // Redraw based on the new size whenever the browser window is resized. | |
| window.addEventListener("resize", redraw); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment