haskell,svg,haskell-diagrams , Setting id and class with the haskell diagrams package


Setting id and class with the haskell diagrams package

Question:

Tag: haskell,svg,haskell-diagrams

I am working with the diagrams package for haskell, and I am using the SVG backend. I embed the SVG markup directly into an HTML document, so that the graph as a part of a web page. I have built a pretty cool looking bar graph, and I would like to add some basic interactivity to it. For example, when you hover over a bar, I'd like to make the color lighter. Or maybe something would pop up as well. The way that I would like to accomplish this is by setting the class attributes of some of the SVG nodes. Is this possible with the diagrams package? I know that it can target multiple backends and that that class attribute likely has no meaningful counterpart in most of them, but I was wondering if there is nevertheless a way to sneak in backend-specific information. Thanks for any insights that anyone can provide.


Answer:

This cannot be done currently in diagrams, although it is something we would like to have in the future. You can get part of the way there using the diagrams-canvas backend, but that only displays on a local host and cannot be embedded into a web page. The only thing I can suggest is to pretty print the svg with the -p command line option and edit the svg by hand.


Related:


Why won't my webGl page load a second time after a refresh?


javascript,html,svg
This is a JS page my friend and I are making. http://jmecom.github.io/GameUniverse/ The page loads fine when you first open it in a tab (albeit a little slow), but when you refresh the tab, the WebGl canvas will just be completely blank. The HTML elements are displayed though. We're using...

Get Angular to action ng-if in new elements generated by d3.js


javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

Decremented value called in the recursion in Haskell


string,function,haskell,recursion,parameters
So, I have this function that aligns the text to the left for a given column width. I have already fixed some of its problems, but I am unable to make it not use the decremented parameter once it is called, but to return to the starting value of n....

Haskell - generate and use the same random list


haskell,random
In Haskell, I'd like to generate a random list of Ints and use it throughout my program. My current solution causes the array to be created randomly each time I access/use it. How can I overcome this problem?...

Implementing map on a tree using fold


scala,haskell
I am trying to implement a map using fold. I could do so in Haskell data Tree a = EmptyTree | Node a (Tree a) (Tree a) deriving (Show) foldTree :: Tree a -> b -> (b -> a -> b -> b) -> b foldTree EmptyTree d _ =...

Get each fibbonacci value in haskell


haskell,fibonacci
I'm learning haskell and I have the following code: fib a b = a : fib b (a + b) findFibSum = sum [x | x <- fib 1 2, mod x 2 == 0 && x < 100] If I run findFibSum nothing happens, it just sits there. Shouldn't...

my svg polygons fills are not changing color on hover


jquery,css,svg
I have some svg polygons. When you mouse over a polygon, I want to find part of the polygon's id, then change the fill color of all polygons that have that part of the polygon id in their id. But it isn't working. No polygon fill is changing. Anyone know...

apply a transformation with function inline


haskell
Starting from a simple case of "fold" (I used (+) but can be anything else): Prelude.foldl (+) 0 [10,20,30] is it possible apply an inline transformation similar to (that doesn't work): Prelude.foldl ((+) . (\x -> read x :: Int)) 0 ["10","20","30"] In case not, is there an alternative to...

Keep track of loop without a counter


haskell
Say, I got a list which length can be odd or even. Every iteration , I remove two items from the list. If there is one or no item at the end, I end the execution. If I store (length list)/2 every loop, I will get e.g. [5,4,3...] for a...

Cyrllic characters in SVG font


javascript,svg,unicode,encoding,fonts
You will have to bear with me with this, as I know very little about encodings so may be asking something very simple/obvious. I am working with some SVG fonts in browser-side Javascript and I need to pull out some information on Cyrillic characters grammatically. I am doing this currently...

javascript node module.exports / require() code on the front-end


javascript,node.js,svg,browserify
I've been looking into using a library such as SVGO to be able to clean user submitted SVG code on the front end. SVGO is a node.js based library which typically works on the back end, so I've been trying to wrap my head around how to go about sending...

Svg how to position elements lo left and right like with floats?


javascript,svg,d3.js
I'm building a organizational chart with the help of dagre-d3,js and d3.js. Its svg based so every person in the chart needs to have some kind of a employee card (or call it profile card) This card needs to show the Persons name, his group and have 2 buttons, one...

d3.js grid moving around when dragging and zooming


javascript,svg,d3.js,gridlines
I tried to copy the behavior of the grid displayed here. The code I have is here Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not. I suspect the problem is around this part : function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis);...

How to “wrap” monadic return value


haskell,monads
I have the following code: data APNSIdentifier = NoIdentifier | Identifier Word32 deriving (Show, Eq) newtype APNSItem = Item Put createNotificationIdentifierItem :: APNSIdentifier -> APNSItem <--- here createNotificationIdentifierItem (Identifier identifier) = do putWord8 3 putWord16be 4 putWord32be identifier How can I "wrap" the Put monad with an APNSItem? Do I...

Haskell return lazy string from file IO


haskell,file-io,lazy-evaluation
Here I'm back again with a (for me) really strange behaviour of my newest masterpiece... This code should read a file, but it doesn't: readCsvContents :: String -> IO ( String ) readCsvContents fileName = do withFile fileName ReadMode (\handle -> do contents <- hGetContents handle return contents ) main...

Snap SVG Iterate over Object to build Animate properties


javascript,svg,snap.svg
I'm looking to write a function involving Snap SVG that would allow me to pass in an object or array of values through which I can iterate to build the animation properties. For example, if I could pass: [transform: 't100,100', transform: 'r10,10,10'] Into this: animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing)...

How do I load SVGs directly in my React component using webpack?


svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

Creating SVG elements dynamically


javascript,svg,d3.js
I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and...

logical expression evaluator Haskell


haskell
I wrote the following logical expression evaluator. It works for simple 2-member expressions, and it runs but produces a fault for expression containing other expressions as the second/first member. Here's my code. data Expression = Literal Bool | Operation Operator Expression Expression data Operator = AND | OR eval ::...

Center Aligning an SVG element?


svg,path
I don't know how to really explain this but how can I center align this logo http://jsfiddle.net/fa7w3h99/3/ I have tried the following but it didnt seem to work as intended. .center-logo { display: block; margin: auto; } ...

How can I express foldr in terms of foldMap for type-aligned sequences?


haskell,types,monoids,type-variables,foldable
I'm playing around with type-aligned sequences, and in particular I'm messing around with the idea of folding them. A foldable type-aligned sequence looks something like this: class FoldableTA fm where foldMapTA :: Category h => (forall b c . a b c -> h b c) -> fm a b...

Responsive axis with percentage coordinates


javascript,svg,d3.js,graph,charts
In an attempt to build a responsive scatter graph with d3.js, I'm using %-based coordinates in a 100% x 100% svg element. How can I .call(axis) and get it to layout the axis using % and not px values, so that they always fit the svg and the plotted data?...

First three items of a list in Haskell


haskell
I am very new to Haskell, and struggling a bit with a function here. The premise is simple enough: Run through a list, and combine each 3 items next to each other with another function and return a list with the results. The problem is to do it in a...

Hook into GHC runtime system


haskell,functional-programming,runtime,transactional-memory
I have been looking at how transactional memory is implemented in Haskell, and I am not sure I understand how the STM operations exposed to the programmer hook into the runtime system functions written in C. In ghc/libraries/base/GHC/Conc/Sync.hs of the git repo, I see the following definitions: -- |A monad...

Equivalent of canvas quadraticCurveTo in SVG


javascript,jquery,canvas,svg,bezier-curve
I am working on a plugin to allow "natural looking" signatures to be drawn using mouse or touch. When confirmed by the user, the result will be a stored SVG that can then be displayed in place of the "Click to sign" button. The attached JSFiddle http://jsfiddle.net/TrueBlueAussie/67haj4nt/3/ shows a testbed...

Best practice for handling data types from 3rd party libraries in Haskell?


haskell,types
I'm just getting into my first real Haskell project of size (a web app), and I'm starting to run into issues with types from 3rd party libraries leaking all over my code. Here is a quick example: My Parser module imports Test.Parsec, and the exports a function (parseConfig) that returns...

Svg set new coordinates with animation on 2 lines simultaneously


jquery,html,css,css3,svg
I need a way (with CSS3 or jQuery) to change this SVG shape from X to ↓ (Down arrow). I tried more ways but i still have problems. My basic idea is to get lines with id (svg_5, svg_6) and make these the head of my arrow. $('a').click(function (e) {...

How to manipulate existing group elements with Snap.svg


javascript,svg,snap.svg
We have an existing svg-document in witch we want to replace a group-element with a new one. Is it possible to do with Snap.svg? var oldGroup = Snap.select("[id='" + oldGroupId + "']"); oldGroup.outerSVG(newGroup); //This is what I want to do but outerSVG is readonly ...

adding link_to with image_tag and image path both


html,ruby-on-rails,image,ruby-on-rails-4,svg
I am trying to replace the tag with link_to in my rails application view. for replacing I have svg icon, text and link all in one tag. Here is below <a class="navbar-brand" href="index.html"><%= image_tag 'logo.svg', "data-svg-fallback" => image_path('logo.svg'), :align=> "left" ,:style => "padding-right: 5px;" %> My Project </a> but I...

SVG animation not repeating properly


svg,svg-animate,smil
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation...

Javascript D3.js drag a chart out of its svg Element


javascript,svg,d3.js
I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and...

Stopping condition on a recursive function - Haskell


string,function,haskell,if-statement,recursion
So, I have this function which aims to align the text on the left without cutting words(only white spaces). However my problem is that I cannot find a stopping condition of the function and it goes infinitely. f n "" = "" --weak condition f n s = if n...

Replace all [ ] with {} - as short as possible [on hold]


haskell
Given the code below: import Data.List; main = (readLn :: IO [Integer]) >>= print . subsequences It takes a list of integers from standard input (for example [1,2,3]) and outputs something like: [[],[1],[2],[1,2],[3],[1,3],[2,3],[1,2,3]] I want it to be like this: {},{1},{2},{1,2},{3},{1,3},{2,3},{1,2,3}} so my goal is to replace every [ and...

html2canvas does not print jsPlumb Connectors


svg,jsplumb,html2canvas
How to print SVG elements that are built by jsPlumb. Known that getting all SVG Elements drawen by jsPlumb is retrieved by this code : var uiJsPlumbConnectors=jsPlumb.getAllConnections().map(function(conn){return conn.canvas;}) All connectors are SVG elements : Using html2canvas to print all connectors (SVG), it does not work : html2canvas(uiJsPlumbConnectors).then(function(c){ window.open(c.toDataURL('image/png')) }); An...

How does Frege generalize number literals?


haskell,frege
It appears that Frege can evaluate 1/2 to return the Double value 0.5. The literal 1 is of type Int. It seems to be promoted to Double, which is a type in the Real class and thus knows the / operator. How does this happen? Is it using the Haskell...

How do I avoid writing this type of Haskell boilerplate code


haskell,boilerplate
I run into this situation often enough for it to be annoying. Let's say I have a sum type which can hold an instance of x or a bunch of other things unrelated to x - data Foo x = X x | Y Int | Z String | ...(other...

Haskell IO - read from standard input directly to list


haskell
Haskell IO system is super hard to understand for me so i have question : How to read from standard input to list ? I know that there is function getLine :: IO String and interact. But i do not know how to convert the input to list so I...

Snap SVG .animate callback fires immediately


javascript,jquery,animation,svg,snap.svg
I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed...

Haskell make recipe fails for Paradox theorem prover using GHC


linux,haskell,make,ghc,theorem-proving
I am trying to install the paradox theorem prover sourced from here. When I run the makefile this is the command that runs: ghc -optl -static -lstdc++ -I../instantiate -I../minisat/current-base ../minisat/current-base/Solver.or ../minisat/current-base/Prop.or ../instantiate/MiniSatWrapper.or ../instantiate/MiniSatInstantiateClause.or -fglasgow-exts -O2 -static -threaded -main-is Paradox.Main.main --make Paradox.Main -o paradox And it results in several errors like...

Haskell do clause with multiple monad types


haskell,monads
I'm using a graphic library in Haskell called ThreePennyUI. In this library the main function returns a UI monad object. This causes me much headache as when I attempt to unpack IO values into local variables I receive errors complaining of different monad types. Here's an example of my problem:...

How can I save my generated svg code to a .svg file in the client machine?


javascript,svg,snap.svg
I used snap.svg library to generate, with javascript, a svg element in my asp.net web form page by loading other external .svg files and manipulating them in order to get the final svg element. Once the composition of the desired svg object is finish and the resulting svg element shows...

Combining Event and an attribute in threepenny-gui


haskell,threepenny-gui
I have an Event String which I want to sink into a textarea. This works fine, but now I want to combine the current value of a checkbox selection to this string. First I did this by using checkedChange of the checkbox which works, but has a problem. If the...

Idiomatic list construction


list,haskell,functional-programming,idiomatic
I'm very new to Haskell and functional programming in general, so I don't really know how to make this code idiomatic: type Coord = Double data Point = Point Coord Coord Coord deriving Show type Polyline = [Point] -- Add a point to a polyline addPoint :: Polyline -> Point...

Thread blocked indefinitely in an MVar operation


haskell,concurrency,network-programming
I have been attempting to debug a problem when using multiple MVars, however to no luck. My code uses two MVars: one to store the servers current state, and another to pass network events to and from the client threads. However after connecting and disconnecting several times, the server stops...

Fold over a heterogeneous, compile time, list


haskell,type-level-computation,hlist
I have a list of heterogeneous types (or at least that's what I have in mind): data Nul data Bits b otherBits where BitsLst :: b -> otherBits -> Bits b otherBits NoMoreBits :: Bits b Nul Now, given an input type b, I want to go through all the...

Dynamic inclusion of javascript in SVG by means of server side filtering inside apache server


javascript,apache,svg,piwik
Years back I wrote some code to automatically include some javascript code inside html pages delivered by an http server. The approach is documented here in a blog entry and in this StackOverflow question. The solution served me well over the last years. The approach in two sentences: for every...

Haskell: When declaring a class, how can I use a type variable that is not immediately in the constructors?


haskell
I want to define a function, <-? to check whether an element is in a list/set/map. module Test where import qualified Data.Map as Map import qualified Data.Set as Set class Memberable a where (<-?) :: b -> a -> Bool instance Memberable [x] where (<-?) = elem instance Memberable (Map.Map...

Animate dots or points from an offset to their actual position


jquery,html,css,html5,svg
How can I do the animation by using SVG or CSS? Animation should be like below: Initially, only lines will be visible(picture 1), after 2 seconds dots (.) will come and join to the line curves(picture 2) with some animation to the dots. Online Example Please check the code below...

Trying to fill a SVG map from wordpress custom categories


wordpress,dictionary,svg
I've created a custom post_type (destinations) with a category (locations) to provide a tree structure for my SVG map: Continent/Country/Town Example locations: Europe/Germany/Berlin/POST Europe/Italiy/Sicily/POST North-Africa/Morocco/Marrakech/POST My plan was to fill the map by the country short codes like (DE for Germany, IT for Italia, LY for Libya (...). Here is...

how to define html5 svg polygon points to create graphics


html,html5,svg
Hi i am trying to find out how to define the points for a polygon in HTML5 <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> this will end up creating a Star image. i tried to remove some points and add some arbitrary points and it...