Exploring shapes with angular.js and d3.js: a geometric demonstration

Using d3.js, I created a unique shape known as a Limaçon. By moving the point along the x-axis (referred to as px), the shape undergoes changes.

https://i.sstatic.net/Xz8OG.gif
(from MathWorld - A Wolfram Web Resource: wolfram.com)

Now, I want to incorporate user interaction similar to an example using angular.js that changes RGB color with sliders (jsfiddle). How do I modify my jsfiddle to achieve this? Is it like using onclick()?

My goal is to move a slider around to adjust the variable 'px' in my d3.js code, which moves a point horizontally. This requires recalculating the radii of numerous circles.

I did come across some information here: D3 within an AngularJS app

javascriptangularjsgeometryd3.js

Answer №1

To see a demonstration, click on this link: http://jsfiddle.net/fRgtF/3/ Essentially, all the operations need to be carried out within a controller with respect to a scope:

function Controller($scope){
    $scope.$watch("px",function(){
        d3.select('svg').remove();
        var limacon = d3.select(".limacon").append("svg");

x0 = 300;
y0 = 250;

r = 50;
px = $scope.px;

limacon.append("circle")
    .attr("cx", x0)
    .attr("cy", y0)
    .attr("r", r)
    .attr("stroke", "#FFCC66")
    .attr("stroke-width", 2)
    .attr("fill", "none");

for (var k = 0; k < 20; k++) {
    limacon.append("circle")
        .attr("cx", x0 + r * Math.cos(2 * Math.PI * 0.05 * k))
        .attr("cy", y0 + r * Math.sin(2 * Math.PI * 0.05 * k))
        .attr("r", r * Math.sqrt(Math.sin(2 * Math.PI * 0.05 * k) * Math.sin(2 * Math.PI * 0.05 * k) + (Math.cos(2 * Math.PI * 0.05 * k) - px / r) * (Math.cos(2 * Math.PI * 0.05 * k) - px / r)))
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1)
        .attr("fill", "none");
}

limacon.append("circle")
    .attr("cx", x0 + px)
    .attr("cy", y0)
    .attr("r", 1)
    .attr("stroke", "#66CC66")
    .attr("stroke-width", 2)
    .attr("fill", "#66CC66");
    });

}

The value of px on the scope is being altered by your slider, and that's the value we are utilizing. We monitor this px value on the scope and update our d3 activities according to the new px value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to efficiently search MongoDB for existing records and group them by unique array values

My dataset is structured like this: { "_id" : 1, "category" : [ { "name": "category1" }, { "name": "category2" } ], "event": [ { type: "house" ...

javascriptmongodb

How can I generate two directory-based slider instances?

Update: Finally, I discovered the root of the problem within my stylesheet. Despite both sliders being loaded, they were overlapping due to their positioning, causing the second slider (or any additional ones) to remain hidden. I've been striving to ...

javascriptphpjquery

Adding initial data to MongoDB in ExpressJS: What's the best way to include fixture data upon startup?

I've set up my expressjs server and mongoDB (using the mongoDB native driver and not mongoose). I want to check for existing documents in the database and add some fixture documents when the server starts, but I'm unsure where to do that. Someth ...

javascriptmongodbexpress

Node.js and Angular.js communication: from requests to responses

Efforts are being made to solicit data from a node.js server through angular.js. However, an unexpected challenge persists: post-data response, a stark white browser screen shows up with the JSON object in plain sight. The goal is for angular.js to acknowl ...

javascriptjsonnode.jsangularjsrequest

Tips for forming an array of arrays and filling it with information using JavaScript

I am looking to create an array based on user input, but I do not have specific details of the input. Essentially, I need to establish, initialize, and fill the array with the input data in order to perform further actions. An example array structure migh ...

javascriptjqueryarraysmultidimensional-array

Tips for eliminating default classes from Mui Typography styling

I’ve been working on creating a Typography element and noticed some default MUI CSS classes added when debugging in the browser. I attempted to disable them by using empty arrays at the end of the sx prop, but it did not work as expected. In the image p ...

javascripthtmlcssreactjsmaterial-ui

Having trouble compiling a TypeScript code that utilizes OpenLayers library

I've encountered an issue with my TypeScript code using OpenLayers. When I try to import a second code file into the main one, I get an error that says: index.ts(3,15): error TS2686: 'ol' refers to a UMD global, but the current file is a mo ...

javascripttypescriptopenlayers

Issue with importing a library into a Next.js component

I seem to be facing an unusual issue with my Nav component. Although I am able to import various items in my other components without any problems, for some reason, I cannot import anything into my Nav component. import { useState, useEffect } from "r ...

javascriptreactjsdynamicimportnext.js

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

As we progress in building our Vue applications, we have been using the standard script tag include method for Vue. However, as we transition from jQuery/Knockout-heavy apps to more complex ones, the maintenance issues that may arise if we don't switc ...

javascriptwebpackvue.jsvuejs2

The webkitspeechrecognition feature now operates smoothly without requiring user permission

While working on prototyping a few pages that utilize webkitspeechrecognition, I encountered an issue where the microphone usage prompt was not showing up. Initially, I discovered that these pages need to be served from a webserver rather than loaded from ...

javascripthtmlwebkitspeech-recognition

Providing secure access to Apostrophe-CMS S3 assets and attachments via HTTPS

Currently, I am utilizing Amazon S3 to deliver both my static assets and user uploads within the context of apostrophe-cms. While my site is loading via https, all of my assets appear to be loading using http. I have set up a cloudfront distribution at th ...

javascriptnode.jsamazon-web-servicesamazon-cloudfrontapostrophe-cms

Unable to retrieve the json information due to an error

This is my AJAX script $.ajax({ url:"jsoncontent.json", dataType:"json", success:function(data){ var tem = data; var test ='facebook'; alert(tem.facebook[0].name);//it's working ...

javascriptjqueryajaxjson

Adjust the size of two divs in AngularJs as needed

I have two divs covering the entire page, each at 50% width. When the lower div is clicked, I want it to expand to cover the full screen, and return to its original size on click again. Here is an example: See JQuery equivalent $('.wrapper div.green ...

javascriptjqueryhtmlcssangularjs

Steps for dividing the content extracted from `div` tags

I have the following HTML code: <div class="chip">java<span class="material-icons close">×</span></div> <div class="chip">spring<span class="material-icons close">×</span></div> <div class="chip">py ...

javascriptjqueryarrays

Patience is key as you await the element to load and smoothly render the data in vue.JS

Is there a way to ensure that the graph is only rendered and filled with data after the data has been returned from the backend? Currently, even though the data is returned, the graph appears blank. Here is my JavaScript code: methods: { refresh( ...

javascriptvue.jsquasar-frameworkapexcharts

How to deliver various static files in NestJS using different paths and prefixes?

I've set up static file serving for developer documentation using the following code: app.useStaticAssets(docsLocation, { prefix: "/docs/" }) Now I have another directory with more static content that I want to serve. Is it possible to serve from ...

javascriptnode.jstypescriptexpressnestjs

There is an error appearing in my .ts code: [ts] The property 'name' is not found in type 'any[]'

While my coding is working fine and data is showing on the page, there seems to be an error occurring in the VSE editor. It is showing something like this: [ts] Property 'name' does not exist on type 'any[]'. This is a snippet of my ...

javascriptangulartypescriptangular6

What causes the disappearance of the cell background color upon clicking?

Click here to view my code snippet. You can access the demo at this link. Overview: I am currently working on creating a grid that allows users to select cells by dragging the mouse cursor over them. Additionally, the background color of each cell shoul ...

javascriptreactjs

Using gmaps4rails: A guide on extracting JSON data from the controller

I have a model named shop and I want to create a simple alert box using JavaScript that shows the name of the shop when a marker on the map is clicked. Here's my code: # controller @json = Shop.all.to_gmaps4rails do |shop, marker| marker.json({ id ...

javascriptruby-on-rails-3jsongoogle-mapsgmaps4rails

AngularJS component not functioning properly due to issues with 'bindings'

.component( 'testComponent', {bindings: {name:'<'}, template: `{{$ctrl.name}}<br/> {{$ctrl.title}}<br/> {{test.name}}<br/> {{test.title}}<br/> {{name}}& ...

javascriptangularjscomponents