[링크 : http://www.adeveloperdiary.com/d3-js/create-a-simple-donut-chart-using-d3-js/] 도넛 그래프
[링크 : http://bl.ocks.org/aaizemberg/raw/78bd3dade9593896a59d/] 색상
타이틀 달린 도넛 그래프
+
2018.10.10
| d3 관련 검색.. (0) | 2018.10.12 |
|---|---|
| d3 multi level pie 그래프 (0) | 2018.10.11 |
| d3 font color / weight (0) | 2018.10.02 |
| d3 tooltop (0) | 2018.10.01 |
| d3 를 이용하여 도넛 그래프 그리기 (0) | 2018.09.28 |
배경을 돌리면 안에 내용도 같이 돌아버리니까
배경만 돌리려면 조금 까다롭다.
[링크 : https://www.sitepoint.com/css3-transform-background-image/]
[링크 : https://www.w3schools.com/cssref/pr_background-position.asp]
| jquery 선택자 (0) | 2018.09.27 |
|---|---|
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
| svg.js (0) | 2018.09.21 |
| ajax (0) | 2018.09.20 |
| polar clock (0) | 2018.09.20 |
| jquery n번째 요소 선택하기, select 선택하기 (0) | 2018.09.27 |
|---|---|
| css 배경 이미지 회전, 크기 등 (0) | 2018.09.27 |
| ajax (0) | 2018.09.20 |
| polar clock (0) | 2018.09.20 |
| visjs (0) | 2018.09.18 |
error / success / complete 세가지에 대해서 처리해주는 것이 좋다.
(귀찮아서 success만 했는데..)
| css 배경 이미지 회전, 크기 등 (0) | 2018.09.27 |
|---|---|
| svg.js (0) | 2018.09.21 |
| polar clock (0) | 2018.09.20 |
| visjs (0) | 2018.09.18 |
| 자바스크립트 ES6 와 화살표 펑션 (=>) (2) | 2018.09.18 |
그래프 만져보는데 나쁘지 않은 듯?
[링크 : 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} ]; } |
| svg.js (0) | 2018.09.21 |
|---|---|
| ajax (0) | 2018.09.20 |
| visjs (0) | 2018.09.18 |
| 자바스크립트 ES6 와 화살표 펑션 (=>) (2) | 2018.09.18 |
| 그래프 (0) | 2018.09.18 |
회사에서 설치할때는 별 소리 없더니
집에와서 설치하려고 하니 먼가 경고가 뿜뿜한다 -_-
결론만 말하자면, 저거 경고일뿐 일단 설치는 된거니 무시해도 된다 정도?
$ npm install added 150 packages from 251 contributors and audited 305 packages in 12.634s found 2 vulnerabilities (1 low, 1 moderate) run `npm audit fix` to fix them, or `npm audit` for details $ npm audit fix + mysql@2.16.0 added 4 packages from 8 contributors, removed 1 package and updated 5 packages i fixed 1 of 2 vulnerabilities in 305 scanned packages 1 vulnerability required manual review and could not be updated $ npm audit === npm audit security report === Manual Review Some vulnerabilities require your attention to resolve Visit https://go.npm.me/audit-guide for additional guidance Low Regular Expression Denial of Service Package debug Patched in >= 2.6.9 < 3.0.0 || >= 3.1.0 Dependency of node-rest-client Path node-rest-client > debug More info https://nodesecurity.io/advisories/534 found 1 low severity vulnerability in 310 scanned packages 1 vulnerability requires manual review. See the full report for details. $ npm install --no-audit up to date in 0.912s |
| npm install이 윈도우에서 안될때 (2) | 2018.09.27 |
|---|---|
| node.js 를 이용한 HTML 데이터 추출(크롤링) (4) | 2018.09.27 |
| promise-mysql (0) | 2018.09.18 |
| node.js 동기와 비동기 그리고 promise (0) | 2018.09.18 |
| node.js readline 자동완성(autocompletion) (0) | 2018.09.14 |
| ajax (0) | 2018.09.20 |
|---|---|
| polar clock (0) | 2018.09.20 |
| 자바스크립트 ES6 와 화살표 펑션 (=>) (2) | 2018.09.18 |
| 그래프 (0) | 2018.09.18 |
| jquery datatables (0) | 2018.09.17 |
보다보니 먼가 해서 찾아보는데
ES6에서 추가된 문법으로 function을 제외하고
이름없는 함수로 만들어주는 축약자(?)라고 한다.
[링크 : http://blog.jeonghwan.net/2016/04/28/es6.html]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션]
| polar clock (0) | 2018.09.20 |
|---|---|
| visjs (0) | 2018.09.18 |
| 그래프 (0) | 2018.09.18 |
| jquery datatables (0) | 2018.09.17 |
| select - option 투명 배경 (0) | 2018.09.17 |
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]
| node.js 를 이용한 HTML 데이터 추출(크롤링) (4) | 2018.09.27 |
|---|---|
| npm audit (0) | 2018.09.19 |
| node.js 동기와 비동기 그리고 promise (0) | 2018.09.18 |
| node.js readline 자동완성(autocompletion) (0) | 2018.09.14 |
| node.js mysql 모듈 (0) | 2018.09.13 |
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]
| npm audit (0) | 2018.09.19 |
|---|---|
| promise-mysql (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 |
|
