Dragging Events / Charles Redmond | Observable

Charles Redmond

Published

Edited

Sep 4, 2020

Fork of Mouseover/Mouseout Events

Template Javascript Objects For Loops Returning Pushing into an Array SVG Containers Circles Rectangles Lines Groups Rotation Scaling Making a Barbell Paths Randomness Arrays of Random Numbers Intro to D3 Grouping with D3 Rotation with D3 Barbell Again Saving the Selection Random Circles Random Circles 2 Random Circles 3 Paths with D3 Paths with D3 Part 2 Scales Axes Plotting Exercise 1 Plotting Exercise 2 x and y Axes More on Axes Sliders Select Box Radio Buttons Sliders in Action Select in Action Radio Buttons in Action Functions Click Events If Statements Click Events (Toggle)Mouseover/Mouseout Events

Dragging Events

Plotting Points Horizontal and Vertical Lines Slope of a Segment Equation of a Line Here's x, what's y?Vertical Distance to a Line or Curve A Way To Think About Regression How Close is the Line?Overfitting Test Sets Data Sets Data Analysis Logistic Regression Classification Final Problem 1 Template Friday Lesson More with Groups Scales Programming Tutorial Regression Practice Great Pumpkin Template Spider Web Template Another Baseball Example Linear Regression Classification Linear Regression (another example)Final Problem 1 Practice (11 AM Section)Final Illustrations

svg = {

const svg = html`<svg id = "svg"></svg>`

const container = d3.select(svg)

const drag = d3.drag()

.on("drag",function(){

const target = d3.select(this)

const x = d3.event.x

const y = d3.event.y

target.attr("cx",x).attr("cy",y)

})

container.append("circle")

.attr("r",50)

.attr("fill","cornflowerblue")

.attr("stroke","black")

.attr("cx",300)

.attr("cy",150)

.call(drag)

container.append("circle")

.attr("r",50)

.attr("fill","tomato")

.attr("stroke","black")

.attr("cx",100)

.attr("cy",200)

.call(drag)

return svg

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.