D3.js : Modifying Elements

After selecetion, i would like to share about styling in D3.js. Modifying element atribut like change the circle radius, color, width, stroke, fill color etc, it means we change the style, so i called it styling.

I will make it so simple, so i have a circle like this :

var svg = d3.select(“svg”),
width = +svg.attr(“width”),
height = +svg.attr(“height”);

svg.append(“circle”) // attach a circle
.attr(“cx”, 200) // position the x
.attr(“cy”, 100) // position the y
.attr(“r”, 50) // set the radius
.style(“fill”, “red”); // set the fill

 

There’s some atribut  like x and y position, the radius and fill color. If we want no color just add .style(“fill”, “none”). And we can also add color like  (.style("fill", "rgb(255,0,0)");) or in hexadecimal (.style("fill", "#f00");)

Styles in D3:

  • fill
  • stroke
  • opacity
  • fill-opacity
  • stroke-opacity
  • stroke-width
  • stroke-dassharay
  • stroke-linecap
  • stroke-linejoin
  • writing-mode
  • glyph-orientation-vertical

I added some styles to the circle, and then it look like this :

 

d3.select(“circle”) // select a circle
.attr(“cx”, 200) // position the x
.attr(“cy”, 100) // position the y
.attr(“r”, 50) // set the radius
.style(“fill”, “red”) // set the fill colour
.style(“fill-opacity”, 0.4) // set fill opacity
.style(“stroke”, “blue”) // set the line color
.style(“stroke-width”, 3 ) // set the line width
.style(“stroke-dasharray”, (“10,3”)) // make the stroke dashed

Then, i tried to make lines and add some styles, looks like this:

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “butt”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 50) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 50); // y position of the second end of the line

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “round”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 100) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 100); // y position of the second end of the line

svg.append(“line”) // attach a line
.style(“stroke”, “blue”) // colour the line
.style(“stroke-width”, 20) // adjust line width
.style(“stroke-linecap”, “square”) // stroke-linecap type
.attr(“x1”, 100) // x position of the first end of the line
.attr(“y1”, 150) // y position of the first end of the line
.attr(“x2”, 300) // x position of the second end of the line
.attr(“y2”, 150); // y position of the second end of the line

Attrributes in D3:

      • xy ;
        Using the x and y attributes places the anchor points for these elements at a specified location. Of the elements that we have examined thus far, the rectangle element and the text element have anchor points to allow them to be positioned
      • x1x2y1y2

        • x1: The x position of the first end of the line as measured from the left of the screen.
        • y1: The y position of the first end of the line as measured from the top of the screen.
        • x2: The x position of the second end of the line as measured from the left of the screen.
        • y2: The y position of the second end of the line as measured from the top of the screen.
      • points
        The points attribute is used to set a series of points which are subsequently connected with a line and / or which may form the bounds of a shape. These are specifically associated with the polyline and polygonelements. Like the xy and x1x2y1y2 attributes, the coordinates are set from the top, left hand corner of the web page.
        The data for the points is entered as a sequence of x,y points in the following format;
        .attr("points", "100,50, 200,150, 300,50");
      • cxcy

        The cxcy attributes are associated with the circle and ellipse elements and designate the centre of each shape. The coordinates are set from the top, left hand corner of the web page.
        • cx: The position of the centre of the element in the x axis measured from the left side of the screen.
        • cy: The position of the centre of the element in the y axis measured from the top of the screen.
      • r, to set radius of the element
        .attr("5", "50");
      • rx, ry
        The rxry attributes are associated with the ellipse element and designates the radius in the x direction (rx) and the radius in the y direction (ry).
        • rx: The radius of the ellipse in the x dimension from the cxcy position to the perimeter of the ellipse.
        • ry: The radius of the ellipse in the y dimension from the cxcy position to the perimeter of the ellipse.
        • translate: Where the element is moved by a relative value in the x,y direction.
        • scale: Where the element’s attributes are increased or reduced by a specified factor.
        • rotate: Where the element is rotated about its reference point by an angular value.transform (translate(x,y), scale(k), rotate(a)) 
          The transform attribute is a powerful one which allows us to change the properties of an element in several different ways.
          .attr("transform", "translate(50,50)") // translate the circle
          .attr("transform", "scale(2)"); // scale the circle attributes

          The translate-rotate attribute will rotate an element and its attributes by a declared angle in degrees.

          svg.append("text") // append text
          .style("fill", "black") // fill the text with the colour black .attr("x", 200) // set x position of left side of text
          .attr("y", 100) // set y position of bottom of text
          .attr("dy", ".35em") // set offset y position .attr("text-anchor", "middle") // set anchor y justification .attr("transform", "rotate(10)") .text("Hello World"); // define the text to display
      • widthheight 

        width and height are required attributes of the rectangle element. width designates the width of the rectangle and height designates the height (If you’re wondering, I often struggle defining the obvious).

      • text-anchor

        The text-anchor attribute determines the justification of a text element
        Text can have one of three text-anchor types;
        • start where the text is left justified.
        • middle where the text is centre justified.
        • end where the text is right justified
      • dxdy
        dx and dy are optional attributes that designate an offset of text elements from the anchor point in the x and y dimension . There are several different sets of units that can be used to designate the offset of the text from an anchor point. These include em which is a scalable unit, px (pixels), pt (points (kind of like pixels)) and %(percent (scalable and kind of like em))
      • lenghtAdjust

        The lengthAdjust attribute allows the textLength attribute to have the spacing of a text element controlled to be either spacing or spacingAndGlyphs;
        • spacing: In this option the letters remain the same size, but the spacing between the letters and words are adjusted.
        • spacingAndGlyphs: In this option the text is stretched or squeezed to fit
      • textLength
        The textLength attribute adjusts the length of the text to fit a specified value.

And also i have summaries :

Source :

http://www.d3noob.org/2014/02/styles-in-d3js.html

http://www.d3noob.org/2014/02/attributes-in-d3js.html

http://www.tutorialsteacher.com/d3js

It’s a very useful site btw, i highly recommend you to visit the site if you wanna learn about D3 (as beginner). But so sad that the last post on that site in 2016. There’s some version D3, try the latest (V4)

Advertisements

Shiny from R Studio

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions. (http://shiny.rstudio.com/)

At least, that’s the sentences i read when i start to googling about Shiny. And, R is a language and environment for statistical computing and graphics. It is a GNU project which is similar to the S language and environment which was developed at Bell Laboratories (formerly AT&T, now Lucent Technologies) by John Chambers and colleagues. R can be considered as a different implementation of S. There are some important differences, but much code written for S runs unaltered under R. (https://www.r-project.org/about.html)

Shiny Features :

  • Build useful web applications with only a few lines of code—no JavaScript required.
  • Shiny applications are automatically “live” in the same way that spreadsheets are live. Outputs change instantly as users modify inputs, without requiring a reload of the browser.
  • Shiny user interfaces can be built entirely using R, or can be written directly in HTML, CSS, and JavaScript for more flexibility.
  • Works in any R environment (Console R, Rgui for Windows or Mac, ESS, StatET, RStudio, etc.)
  • Attractive default UI theme based on Twitter Bootstrap.
  • A highly customizable slider widget with built-in support for animation.
  • Pre-built output widgets for displaying plots, tables, and printed output of R objects.
  • Fast bidirectional communication between the web browser and R using the websockets package.
  • Uses a reactive programming model that eliminates messy event handling code, so you can focus on the code that really matters.
  • Develop and redistribute your own Shiny widgets that other developers can easily drop into their own applications (coming soon!).
    (http://rstudio.github.io/shiny/tutorial/)

Well, as i am currently learning about data visualization, so i hv to learn about some tools to create graph for visualisizing the data. There are some tools i can use, but i still learn of it. So many things i should learn, and i think i can start it. But, may be i just need time to understand it all. Well, and this is would be my first post about R and it’s Shiny project. I’ll write some post later and give you some sample code, cheers!

Data Mining

Got a new thing to learn , and yes : Data Mining!

Learning from zero, i gotta strenghten my feet, i gotta be strong *halah*

 

Generally, data mining (sometimes called data or knowledge discovery) is the process of analyzing data from different perspectives and summarizing it into useful information – information that can be used to increase revenue, cuts costs, or both. Data mining software is one of a number of analytical tools for analyzing data. It allows users to analyze data from many different dimensions or angles, categorize it, and summarize the relationships identified. Technically, data mining is the process of finding correlations or patterns among dozens of fields in large relational databases.

Yep, so data mining adalah adalah serangkaian proses untuk menggali nilai tambah berupa informasi yang selama ini tidak diketahui secara manual dari suatu   basisdata yang bisa digunakan untuk meningkatkan revenue, mengurangi biaya, atau keduanya. Informasi yang dihasilkan diperoleh dengan cara mengekstraksi dan mengenali pola yang penting atau menarik dari data yang terdapat dalam basisdata.

Well, detailnya besok lagi atau saya sambung di artikel berikutnya ya, injury time pulang 😛