'Programming'에 해당되는 글 973건

  1. 2018.09.21 svg.js
  2. 2018.09.20 ajax
  3. 2018.09.20 polar clock
  4. 2018.09.18 visjs
  5. 2018.09.18 자바스크립트 ES6 와 화살표 펑션 (=>) (2)
  6. 2018.09.18 promise-mysql
  7. 2018.09.18 node.js 동기와 비동기 그리고 promise
  8. 2018.09.18 그래프
  9. 2018.09.17 jquery datatables
  10. 2018.09.17 select - option 투명 배경

d3 에서 svg로 그리길래 찾아보니 역시나(?)

svg를 그리는데 도움을 주는 자바스크립트 라이브러리가 존재한다.


[링크 : http://svgjs.com]

'Programming > javascript & HTML' 카테고리의 다른 글

svg.js  (0) 2018.09.21
ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
Posted by 구차니

댓글을 달아 주세요

error / success / complete 세가지에 대해서 처리해주는 것이 좋다.

(귀찮아서 success만 했는데..)


[링크 : http://shovelman.tistory.com/829]

'Programming > javascript & HTML' 카테고리의 다른 글

svg.js  (0) 2018.09.21
ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
Posted by 구차니

댓글을 달아 주세요

그래프 만져보는데 나쁘지 않은 듯?

[링크 : http://bl.ocks.org/mbostock/1096355]


원래 공개된 소스에서는 d3.js가 경로가 잘못되었고

하나만 띄울수 있어서 함수로 변형하니 div 여러개에 각각 띄울수 있게 된다.

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>

function clock_instance(element_id)

{

var width = 300,

    height = 300,

    radius = Math.min(width, height) / 1.9,

    spacing = .09;


var formatSecond = d3.time.format("%-S seconds"),

    formatMinute = d3.time.format("%-M minutes"),

    formatHour = d3.time.format("%-H hours"),

    formatDay = d3.time.format("%A"),

    formatDate = function(d) { d = d.getDate(); switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },

    formatMonth = d3.time.format("%B");


var color = d3.scale.linear()

    .range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])

    .interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });


var arcBody = d3.svg.arc()

    .startAngle(0)

    .endAngle(function(d) { return d.value * 2 * Math.PI; })

    .innerRadius(function(d) { return d.index * radius; })

    .outerRadius(function(d) { return (d.index + spacing) * radius; })

    .cornerRadius(6);


var arcCenter = d3.svg.arc()

    .startAngle(0)

    .endAngle(function(d) { return d.value * 2 * Math.PI; })

    .innerRadius(function(d) { return (d.index + spacing / 2) * radius; })

    .outerRadius(function(d) { return (d.index + spacing / 2) * radius; });


var svg = d3.select(element_id).append("svg")

    .attr("width", width)

    .attr("height", height)

  .append("g")

    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var field = svg.selectAll("g")

    .data(fields)

  .enter().append("g");


field.append("path")

    .attr("class", "arc-body");


field.append("path")

    .attr("id", function(d, i) { return "arc-center-" + i; })

    .attr("class", "arc-center");


field.append("text")

    .attr("dy", ".35em")

    .attr("dx", ".75em")

    .style("text-anchor", "start")

  .append("textPath")

    .attr("startOffset", "50%")

    .attr("class", "arc-text")

    .attr("xlink:href", function(d, i) { return "#arc-center-" + i; });


tick();


d3.select(self.frameElement).style("height", height + "px");


function tick() {

  if (!document.hidden) field

      .each(function(d) { this._value = d.value; })

      .data(fields)

      .each(function(d) { d.previousValue = this._value; })

    .transition()

      .ease("elastic")

      .duration(500)

      .each(fieldTransition);


  setTimeout(tick, 1000 - Date.now() % 1000);

}


function fieldTransition() {

  var field = d3.select(this).transition();


  field.select(".arc-body")

      .attrTween("d", arcTween(arcBody))

      .style("fill", function(d) { return color(d.value); });


  field.select(".arc-center")

      .attrTween("d", arcTween(arcCenter));


  field.select(".arc-text")

      .text(function(d) { return d.text; });

}


function arcTween(arc) {

  return function(d) {

    var i = d3.interpolateNumber(d.previousValue, d.value);

    return function(t) {

      d.value = i(t);

      return arc(d);

    };

  };

}


function fields() {

  var now = new Date;

  return [

    {index: .7, text: formatSecond(now), value: now.getSeconds() / 60},

    {index: .6, text: formatMinute(now), value: now.getMinutes() / 60},

    {index: .5, text: formatHour(now),   value: now.getHours() / 24},

    {index: .3, text: formatDay(now),    value: now.getDay() / 7},

    {index: .2, text: formatDate(now),   value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

    {index: .1, text: formatMonth(now),  value: now.getMonth() / 12}

  ];

}

}

</script>

<body>

<div id="credit">Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.</div>

<div>

<div id='id-1' style="float:left"/>

<div id='id-2' style="float:left"/>

<div>

</body>

<script>

 clock_instance("#id-1");

 clock_instance("#id-2");

</script> 

[링크 : https://stackoverflow.com/.../d3-selectelement-not-working-when-code-above-the-html-element]



1. 색상은 hsl 색상으로 칠해짐. 

2. 값의 범위와 값이 같으면 동일한 색

3. 가장 적은 값은 앞의 범위로 부터 시작함,  아래와 같이 설정되면 빨간색에서 cyan 까지 칠해짐

    .range(["hsl(0,60%,50%)", "hsl(180,60%,50%)"]) 

4. 값의 범위는 소수로 한정됨(즉, 0~1 사이의 실수로 정규화 됨)

function fields() {

  var now = new Date;

  return [

    {index: .6, text: formatSecond(now), value: now.getSeconds() / 60},

    {index: .5, text: formatMinute(now), value: now.getMinutes() / 60},

    {index: .4, text: formatHour(now),   value: now.getHours() / 24},

    {index: .3, text: formatDay(now),    value: now.getDay() / 7},

    {index: .2, text: formatDate(now),   value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

    {index: .1, text: formatMonth(now),  value: now.getMonth() / 12}

  ];


'Programming > javascript & HTML' 카테고리의 다른 글

svg.js  (0) 2018.09.21
ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
Posted by 구차니

댓글을 달아 주세요

visualization 라이브러리

네트워크라던가 그래프라던가 여러가지 그림을 그릴수 있게 해주는 라이브러리


[링크 : http://visjs.org]

[링크 : http://visjs.org/network_examples.html]

'Programming > javascript & HTML' 카테고리의 다른 글

ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
Posted by 구차니

댓글을 달아 주세요

보다보니 먼가 해서 찾아보는데

ES6에서 추가된 문법으로 function을 제외하고

이름없는 함수로 만들어주는 축약자(?)라고 한다.


[링크 : http://blog.jeonghwan.net/2016/04/28/es6.html]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션]

'Programming > javascript & HTML' 카테고리의 다른 글

polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
Posted by 구차니

댓글을 달아 주세요

  1. 자바의 람다식 같은 걸까요?

    2018.09.19 10:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 람다가 익명함수니까 같은거 일거 같네요.
      function (res, err) 대신에
      (res, err) =>
      이런식으로 익명함수 선언을 하는걸 축약해주는 기능이더라구요.

      2018.09.19 11:46 신고 [ ADDR : EDIT/ DEL ]

Programming/node.js2018.09.18 18:58

mysql  라이브러리 자체가 비동기로 구현된거라

promise를 통해서 동기로 해주는 녀석


[링크 : https://codeburst.io/node-js-mysql-and-promises-4c3be599909b]

   [링크 : https://medium.com/@moralmk/node-js-mysql-and-promises-6309f3915d37]

[링크 : https://www.npmjs.com/package/promise-mysql]

[링크 : https://stackoverflow.com/questions/36547292/use-promise-to-process-mysql-return-value-in-node-js]

'Programming > node.js' 카테고리의 다른 글

promise-mysql  (0) 2018.09.18
node.js 동기와 비동기 그리고 promise  (0) 2018.09.18
node.js readline 자동완성(autocompletion)  (0) 2018.09.14
node.js mysql 모듈  (0) 2018.09.13
node.js 콘솔 입력 받기  (0) 2018.09.12
node.js JSON.parse()  (0) 2018.09.12
Posted by 구차니

댓글을 달아 주세요

Programming/node.js2018.09.18 18:53

mysql 라이브러리가 async 하다는 명시적인 이야기는 없지만

대개는 node.js 설계 자체가 비동기로 구현하도록 된녀석이라

필연적으로(?) 콜백 지옥에 빠지게 된다.


promise 라고 ES6에 정식 도입된 녀석을 쓰면 지옥을 벗어날수 있고

그게 아니라도 익명 함수를 쓰지 않으면 그나마 낫다고


[링크 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/]

[링크 : https://programmingsummaries.tistory.com/325]

[링크 : http://bcho.tistory.com/1086]

[링크 : http://www.nextree.co.kr/p7292/]

[링크 : https://librewiki.net/wiki/콜백_지옥]

'Programming > node.js' 카테고리의 다른 글

promise-mysql  (0) 2018.09.18
node.js 동기와 비동기 그리고 promise  (0) 2018.09.18
node.js readline 자동완성(autocompletion)  (0) 2018.09.14
node.js mysql 모듈  (0) 2018.09.13
node.js 콘솔 입력 받기  (0) 2018.09.12
node.js JSON.parse()  (0) 2018.09.12
Posted by 구차니

댓글을 달아 주세요


[링크 : http://bl.ocks.org/mbostock/1096355]

[링크 : http://pablomolnar.github.io/radial-progress-chart/] << 애플시계 느낌

    [링크 : https://d3js.org/]

[링크 : https://github.com/pablomolnar/radial-progress-chart]

[링크 : https://github.com/lionheart/ConcentricProgressRingView] 애플시계/iOS

[링크 : https://codepen.io/jonwinton/pen/KwwVMd] 몬떙겼음

[링크 : https://github.com/moarwick/react-mt-svg-lines] 마음에 드는데 커스터마이징 찾아야함

'Programming > javascript & HTML' 카테고리의 다른 글

visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
Posted by 구차니

댓글을 달아 주세요

제목 정렬 하는 등의 기능을 제공하는 자바 스크립트


jquery.dataTables.min.css

[링크 : https://datatables.net/]


+

사용법 보다 보니. npm 에서 무언가 깔아야 하는것 같네?

단독으로 하는건 아닐지도..

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
Posted by 구차니

댓글을 달아 주세요

transparent가 적용 안되니

rgba 값으로 투명하게 지정


[링크 : https://stackoverflow.com/questions/23719520/css-for-select-option-to-be-transparent-background]

'Programming > javascript & HTML' 카테고리의 다른 글

그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
rest api ajax / jquery with HTTP header  (0) 2018.09.12
Posted by 구차니

댓글을 달아 주세요