https://github.com/caldwellc/d3-brush-handles

d3 brush handles
https://github.com/caldwellc/d3-brush-handles

brush d3 d3-js d3js handle handlebars handles

Last synced: 3 months ago
JSON representation

d3 brush handles

• Host: GitHub
• URL: https://github.com/caldwellc/d3-brush-handles
• Owner: caldwellc
• License: mit
• Created: 2024-07-01T13:09:18.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-08-05T12:52:46.000Z (6 months ago)
• Last Synced: 2024-10-01T07:04:08.253Z (4 months ago)
• Topics: brush, d3, d3-js, d3js, handle, handlebars, handles
• Language: JavaScript
• Homepage: https://caldwellc.github.io/d3-brush-handles/
• Size: 381 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# d3-brush-handles

Library for adding handles to a one-dimensional [d3 brush](https://github.com/d3/d3-brush) along the x-dimension.

[![npm version](https://badge.fury.io/js/d3-brush-handles.svg)](https://badge.fury.io/js/d3-brush-handles)

# Example

[See it in action here](https://caldwellc.github.io/d3-brush-handles/)

![Brush Example](https://github.com/caldwellc/d3-brush-handles/blob/main/brush-example.png?raw=true)

# add to d3 brush in browser

```html

    

        


        

            // create chart

            let width = 600;

            let height = 400;


            const margin = { top: 10, right: 30, bottom: 30, left: 40 };

            width = width - margin.left - margin.right,

            height = height - margin.top - margin.bottom;

            // append the svg object to the body of the page

            var svg = d3.select("#chart-div")

                .append("svg")

                .attr("width", width + margin.left + margin.right)

                .attr("height", height + margin.top + margin.bottom)

                .append("g")

                .attr("transform",

                    "translate(" + margin.left + "," + margin.top + ")");

            const maxX = 1000;

            // add x axis

            const x = d3.scaleLinear()

                .domain([0, maxX])

                .range([0, width]);

            svg.append("g")

                .attr("transform", "translate(0," + height + ")")

                .call(d3.axisBottom(x));

            // generate random data

            const data = [];

            for (let i = 0; i < 1000; i++) {

              data.push(Math.random() * maxX);

            }

            // create bins

            const bin = d3.bin()

                .domain(x.domain())

                .thresholds(x.ticks(20));

            const bins = bin(data);

            // add y axis

            const y = d3.scaleLinear()

                .domain([0, d3.max(bins, function (d) { return d.length; })])

                .range([height, 0]);

            svg.append("g")

                .call(d3.axisLeft(y));

            // append the bar rectangles to the svg element

            svg.selectAll("rect")

                .data(bins)

                .enter()

                .append("rect")

                .attr("x", 1)

                .attr("transform", function (d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })

                .attr("width", function (d) { return x(d.x1) - x(d.x0) - 1; })

                .attr("height", function (d) { return height - y(d.length); })

                .style("fill", "#69b3a2")

            // add a brush container to the chart

            const brushContainer = svg.append("g");

            // create the brush

            const brush = d3.brushX().extent([[0, 0], [width, height]]);

            brushContainer.call(brush);

            // move brush to the initial position

            const initialPosition = [100, 200];

            brushContainer.call(brush.move, initialPosition);

            const handleWidth = 6;

            const handleHeight = 20;

            // add handles to the brush

            window.d3BrushHandles.addHandlesToBrushX(brush, brushContainer, s => s.selection, height, handleWidth, handleHeight, initialPosition);

        

    

```