D3.js & Data Visualization & SVG

D3.js & Data Visualization & SVG

https://davidwalsh.name/learning-d3

// import {scaleLinear} from "d3-scale";
// import * as d3 from "d3";

// datas
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

// view
const w = 500;
const h = 100;

const svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
// rect
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 30)
   .attr("y", (d, i) => h - 3 * d)
   .attr("width", 25)
   .attr("height", (d, i) => 3 * d)
   .attr("fill", "navy");
// title
svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .attr("x", (d, i) => i * 30)
   .attr("y", (d, i) => h - 3 * d - 3)
   .attr("width", 25)
   .attr("height", (d, i) => 3 * d)
   .text(d => `¥${d}`)
   .attr("class", "high-light-color");
// tooltips
// svg.selectAll("rect");

https://github.com/freeCodeCamp/learn/tree/master/src/introductions/data-visualization

https://github.com/d3/d3/blob/master/API.md#axes-d3-axis

ProjectReferenceData

https://github.com/freeCodeCamp/ProjectReferenceData

https://guide.freecodecamp.org/d3

https://cdnjs.com/libraries/d3

https://guide.freecodecamp.org/certifications/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart

high-charts

SVG to Images

SVG to Images in js

https://image.online-convert.com/convert-to-svg

https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser

https://github.com/canvg/canvg

https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404

var canvas = document.getElementById("mycanvas");
var img  = canvas.toDataURL("image/png");

document.write('<img src="'+img+'"/>');