梵总发布的帖子

梵

https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi

梵

function getSelectedText() {
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (window.document.getSelection) {
        txt =window.document.getSelection();
    } else if (window.document.selection) {
        txt = window.document.selection.createRange().text;
    }
  console.log("selected", txt + "|||")
  if(txt.toString() !== "")
    replaceSelectedText ("hello")
    // return txt;  
}

function replaceSelectedText(replacementText) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

梵

make d3 responsible: https://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/

梵

All data:
http://census.ire.org/data/bulkdata.html

Another working converter:
https://ogre.adc4gis.com/

梵

十一月的雨/玫瑰与枪炮
　　November Rain/by Gun N Rose
　　　　　　
　　when i look into your eyes当我凝望你的双眼，
　　i can see a love restrained我看到的是抑制着的情感。
　　but darlin' when i hold you但是，亲爱的，当我拥抱你的时候，
　　don't you know i feel the same你知道吗，我也感到同样那般。
　　　　　　
　　'cause nothin' lasts forever因为没有什么可以永恒，
　　and we both know hearts can change我们都知道心会改变，
　　and it's hard to hold a candle就像在十一月凄冷的雨天，
　　in the cold november rain手持一支蜡烛那般艰难。
　　　　　　　　
　　we've been through this such a long long time我们这样已经很长很长时间，
　　just tryin' to kill the pain只是努力想使内心的痛苦消减。
　　　　　　
　　but lovers always come and lovers always go但是情人一个一个地更换，
　　an no one's really sure who's lettin' go today没有人肯定地知道
　　walking away是否今天是自己该走的一天。
　　　　　　
　　if we could take the time to lay it on the line如果我们能够抓住时间，
　　i could rest my head那我就小憩一段，
　　just knowin' that you were mine因为知道你属于我，
　　all mine只属于我，我再念一遍。
　　　　　　　　
　　so if you want to love me所以亲爱的，如果你想要爱我，
　　then darlin' don't refrain就不要压抑自己的情感。
　　or i'll just end up walkin'否则我会把我们散步的旅程，
　　in the cold november rain结束在这十一月寒雨的今天。
　　　　　　　　
　　do you need some time...on your own你是否需要一些时间，属于自己的时间，
　　do you need some time...all alone你是否需要一些时间，一个人的时间。
　　everybody needs some time...on their own每个人都需要一些时间，属于自己的时间，
　　don't you know you need some time...all alone你是否知道你也需要时间，一个人的时间。
　　　　　　
　　i know it's hard to keep an open heart在这朋友都可能会伤害你的今天，
　　when even friends seem out to harm you我知道打开心扉是多么艰难，
　　but if you could heal a broken heart但是你终会治愈那颗破碎的心，
　　wouldn't time be out to charm you最终战胜痛苦，因为时间。
　　　　　　
　　sometimes i need some time...on my own有时候我也需要一些时间，属于自己的时间
　　sometimes i need some time...all alone有时候我也需要一些时间，一个人的时间，
　　everybody needs some time...on their own每个人都需要一些时间，属于自己的时间
　　don't you know you need some time...all alone你知道吗，你也需要属于自己的时间，一个人的时间。
　　and when your fears subside当你对爱的恐惧渐渐消失的时候，
　　and shadows still remain痛苦的阴影仍然闪现。
　　i know that you can love me我明白你一定爱我，
　　when there's no one left to blame到时候没有人能够去埋怨。
　　　　　　　　
　　so never mind the darkness所以永远不要介意黑暗，
　　we still can find a way因为我们仍然会找到爱的路线。
　　'cause nothin' lasts forever因为没有什么会永远不变，
　　even cold november rain即使那十一月凄冷的雨天。
　　　　　　
　　don't ya think that you need somebody是否，你觉得需要有一个人，
　　don't ya think that you need someone和你一起分担。
　　everybody needs somebody因为每个人都需要一个人，
　　you're not the only one你不孤单,
　　you're not the only one你不孤单。

梵

Shape file
https://www.baruch.cuny.edu/confluence/display/geoportal/ESRI+USA+Data

Shape to GeoJSON:

Tutorial: https://www.statsilk.com/maps/convert-esri-shapefile-map-geojson-format
Pay version: https://mygeodata.cloud/converter/shp-to-geojson
Best free version: https://mapshaper.org/
Somehow it does not work well for zip3 shape, but it helps covert large GeoJSON to the smaller version

梵

Here is the zip level GeoJSON:
https://github.com/OpenDataDE/State-zip-code-GeoJSON

Here is the state level GeoJSON:
https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json

梵

"I tell my kids...think of yourself like a captain, and you've got this little boat. And sometimes the weather's good, and you're just sailing and sometimes big storms hit and..you're in a stormy sea, but just ride it out, ride it out. Because it is good to be alive." Patti Smith

梵

const tableData = this.state.uploadedFiles.map((file) => {
      const url = file.url;
      const filename = file.filename;
      console.log(url);
      file.action = this.deleteButton(file);
      file.downloadUrl = (
        <a href="#" onClick={(e) => this.handleDownload(e, url, filename)}>
          {url}
        </a>
      );
      return file;
    });

Have to create a new object

const tableData = this.state.uploadedFiles.map((file) => {
      const newFile = Object.assign({}, file);
      const url = file.url;
      const filename = file.filename;
      console.log(url);
      newFile.action = this.deleteButton(file);
      newFile.downloadUrl = (
        <a href="#" onClick={(e) => this.handleDownload(e, url, filename)}>
          {url}
        </a>
      );
      return newFile;
    });

https://stackoverflow.com/questions/45798885/object-is-not-extensible-error-when-creating-new-attribute-for-array-of-objects

梵

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript

梵

https://medium.com/@varvara.munday/d3-in-react-a-step-by-step-tutorial-cba33ce000ce
https://d3-annotation.susielu.com/#introduction
https://github.com/susielu/d3-annotation/issues/57
https://www.npmjs.com/package/d3v4

梵

https://www.d3-graph-gallery.com/graph/custom_annotation.html

梵

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
      integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      /* On mouse hover, lighten state color */
      /* path:hover {
        fill-opacity: 0.7;
      } */

      div.markets {
        fill-opacity: 0.8;
      }

      /* Style for Custom Tooltip */
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }

      /* Legend Font Style */
      body {
        font: 11px sans-serif;
      }

      /* Legend Position Style */
      .legend {
        position: absolute;
        left: 800px;
        top: 350px;
      }
    </style>
  </head>
  <body>
    <button id="select-vq">VQ Markets</button>
    <button id="select-wtw">WTW Markets</button>
    <button id="select-aon">AON Markets</button>
    <button id="select-mercer">MERCER Markets</button>
    <button id="hide-markets">Hide Markets</button>

    <script type="text/javascript">
      /*  This visualization was made possible by modifying code provided by:

            Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
            https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

            Malcolm Maclean, tooltips example tutorial
            http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

            Mike Bostock, Pie Chart Legend
            http://bl.ocks.org/mbostock/3888852  */

      "use strict";

      //Width and height of map
      var width = 960;
      var height = 500; // D3 Projection

      var projection = d3
        .geoAlbersUsa()
        // .albersUsa()
        .translate([width / 2, height / 2]) // translate to center of screen
        .scale([1000]); // scale things down so see entire US
      // Define path generator

      var path = d3
        .geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection
      // Define linear scale for output

      var color = d3
        .scaleLinear()
        .range([
          "rgb(213,222,217)",
          "rgb(69,173,168)",
          "rgb(84,36,55)",
          "rgb(217,91,67)",
        ]);
      var legendText = [
        "Cities Lived",
        "States Lived",
        "States Visited",
        "Nada",
      ]; //Create SVG element and append map to the SVG

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height); // Append Div for tooltip to SVG

      var div = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
      var layer1 = svg.append("g");
      var layer2 = svg.append("g");
      var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data

      var offsets = {
        VT: [0, 50],
        NH: [15, 35],
        MA: [20, 25],
        RI: [28, 20],
        CT: [35, 10],
        NJ: [34, 20],
        DE: [33, 30],
        MD: [47, 35],
        DC: [49, 21],
      };

      d3.json("us-states-abbr.json", function (statejson) {
        layer1
          .selectAll("path")
          .data(statejson.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("stroke", "#cc0000")
          .style("stroke-width", "1")
          .style("fill", "none");

        var smalllStates = statejson.features.filter((item) =>
          _.has(offsets, item.properties.abbr)
        );

        smalllStates.forEach((item) => {
          var x = path.centroid(item)[0];
          var y = path.centroid(item)[1];

          var abbr = item.properties.abbr;

          var offset = offsets[abbr];

          var annotations = [
            {
              note: {
                label: abbr,
              },
              x: x,
              y: y,
              dy: offset[0],
              dx: offset[1],
            },
          ];

          // Add annotation to the chart
          const makeAnnotations = d3.annotation().annotations(annotations);
          svg.append("g").call(makeAnnotations);
        });

        var bigStates = statejson.features.filter(
          (item) => !_.has(offsets, item.properties.abbr)
        );

        svg
          .append("g")
          .attr("class", "states-names")
          .selectAll("text")
          .data(bigStates)
          .enter()
          .append("svg:text")
          .text(function (d) {
            return d.properties.abbr;
          })
          .attr("x", function (d) {
            console.log(path.centroid(d));
            return path.centroid(d)[0];
          })
          .attr("y", function (d) {
            return path.centroid(d)[1];
          })
          .attr("text-anchor", "middle")
          .attr("fill", "black");
      });

      // const annotations = [
      //   {
      //     note: {
      //       label: "Here is the annotation label",
      //       title: "Annotation title",
      //     },
      //     x: 562,
      //     y: 143,
      //     dy: 200,
      //     dx: 200,
      //   },
      // ];

      // // Add annotation to the chart
      // const makeAnnotations = d3.annotation().annotations(annotations);
      // svg.append("g").call(makeAnnotations);

      var items = ["#cc0000", "#00cc00", "#0000cc"];
      // d3.json("mercerMarkets.json", function (vqs) {
      //   vqs.forEach(function (vq) {
      //     var nlayer = svg.append("g").attr("class", "markets");
      //     // var color = items[Math.floor(Math.random() * items.length)];
      //     var color = vq.color;
      //     var file = vq.file;
      //     d3.json(file, function (json) {
      //       var features = [json];
      //       nlayer
      //         .selectAll("path")
      //         .data(features)
      //         .enter()
      //         .append("path")
      //         .attr("class", "markets")
      //         .attr("d", path)
      //         .style("stroke", "#ccc")
      //         .style("stroke-width", "1")
      //         .style("fill", color)
      //         .style("opacity", "0.8");
      //     });
      //   });
      // });
      document
        .getElementById("select-vq")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("vqMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("hide-markets")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
        });
      document
        .getElementById("select-wtw")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("wtwMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;

              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-aon")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("aonMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-mercer")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("mercerMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });
    </script>
  </body>
</html>

梵

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
      integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww=="
      crossorigin="anonymous"
    ></script>
    <style type="text/css">
      /* On mouse hover, lighten state color */
      /* path:hover {
        fill-opacity: 0.7;
      } */

      div.markets {
        fill-opacity: 0.8;
      }

      /* Style for Custom Tooltip */
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 28px;
        padding: 2px;
        font: 12px sans-serif;
        background: white;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
      }

      /* Legend Font Style */
      body {
        font: 11px sans-serif;
      }

      /* Legend Position Style */
      .legend {
        position: absolute;
        left: 800px;
        top: 350px;
      }
    </style>
  </head>
  <body>
    <button id="select-vq">VQ Markets</button>
    <button id="select-wtw">WTW Markets</button>
    <button id="select-aon">AON Markets</button>
    <button id="select-mercer">MERCER Markets</button>
    <button id="hide-markets">Hide Markets</button>

    <script type="text/javascript">
      /*  This visualization was made possible by modifying code provided by:

            Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
            https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

            Malcolm Maclean, tooltips example tutorial
            http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

            Mike Bostock, Pie Chart Legend
            http://bl.ocks.org/mbostock/3888852  */

      "use strict";

      //Width and height of map
      var width = 960;
      var height = 500; // D3 Projection

      var projection = d3
        .geoAlbersUsa()
        // .albersUsa()
        .translate([width / 2, height / 2]) // translate to center of screen
        .scale([1000]); // scale things down so see entire US
      // Define path generator

      var path = d3
        .geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection
      // Define linear scale for output

      var color = d3
        .scaleLinear()
        .range([
          "rgb(213,222,217)",
          "rgb(69,173,168)",
          "rgb(84,36,55)",
          "rgb(217,91,67)",
        ]);
      var legendText = [
        "Cities Lived",
        "States Lived",
        "States Visited",
        "Nada",
      ]; //Create SVG element and append map to the SVG

      var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height); // Append Div for tooltip to SVG

      var div = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
      var layer1 = svg.append("g");
      var layer2 = svg.append("g");
      var layer3 = svg.append("g"); // Load GeoJSON data and merge with states data

      var offsets = {
        VT: [0, 50],
        NH: [15, 35],
        MA: [20, 25],
        RI: [28, 20],
        CT: [35, 10],
        NJ: [34, 20],
        DE: [33, 30],
        MD: [47, 35],
        DC: [49, 21],
      };

      d3.json("us-states-abbr.json", function (statejson) {
        layer1
          .selectAll("path")
          .data(statejson.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("stroke", "#cc0000")
          .style("stroke-width", "1")
          .style("fill", "none");

        var smalllStates = statejson.features.filter((item) =>
          _.has(offsets, item.properties.abbr)
        );

        smalllStates.forEach((item) => {
          var x = path.centroid(item)[0];
          var y = path.centroid(item)[1];

          var abbr = item.properties.abbr;

          var offset = offsets[abbr];

          var annotations = [
            {
              note: {
                label: abbr,
              },
              x: x,
              y: y,
              dy: offset[0],
              dx: offset[1],
            },
          ];

          // Add annotation to the chart
          const makeAnnotations = d3.annotation().annotations(annotations);
          svg.append("g").call(makeAnnotations);
        });

        var bigStates = statejson.features.filter(
          (item) => !_.has(offsets, item.properties.abbr)
        );

        svg
          .append("g")
          .attr("class", "states-names")
          .selectAll("text")
          .data(bigStates)
          .enter()
          .append("svg:text")
          .text(function (d) {
            return d.properties.abbr;
          })
          .attr("x", function (d) {
            console.log(path.centroid(d));
            return path.centroid(d)[0];
          })
          .attr("y", function (d) {
            return path.centroid(d)[1];
          })
          .attr("text-anchor", "middle")
          .attr("fill", "black");
      });

      // const annotations = [
      //   {
      //     note: {
      //       label: "Here is the annotation label",
      //       title: "Annotation title",
      //     },
      //     x: 562,
      //     y: 143,
      //     dy: 200,
      //     dx: 200,
      //   },
      // ];

      // // Add annotation to the chart
      // const makeAnnotations = d3.annotation().annotations(annotations);
      // svg.append("g").call(makeAnnotations);

      var items = ["#cc0000", "#00cc00", "#0000cc"];
      // d3.json("mercerMarkets.json", function (vqs) {
      //   vqs.forEach(function (vq) {
      //     var nlayer = svg.append("g").attr("class", "markets");
      //     // var color = items[Math.floor(Math.random() * items.length)];
      //     var color = vq.color;
      //     var file = vq.file;
      //     d3.json(file, function (json) {
      //       var features = [json];
      //       nlayer
      //         .selectAll("path")
      //         .data(features)
      //         .enter()
      //         .append("path")
      //         .attr("class", "markets")
      //         .attr("d", path)
      //         .style("stroke", "#ccc")
      //         .style("stroke-width", "1")
      //         .style("fill", color)
      //         .style("opacity", "0.8");
      //     });
      //   });
      // });
      document
        .getElementById("select-vq")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("vqMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("hide-markets")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
        });
      document
        .getElementById("select-wtw")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("wtwMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;

              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-aon")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("aonMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });

      document
        .getElementById("select-mercer")
        .addEventListener("click", function () {
          svg.selectAll(".markets").remove();
          d3.json("mercerMarkets.json", function (vqs) {
            vqs.forEach(function (vq) {
              var nlayer = svg.append("g").attr("class", "markets");
              var color = vq.color;
              var file = vq.file;
              d3.json(file, function (json) {
                var features = [json];
                nlayer
                  .selectAll("path")
                  .data(features)
                  .enter()
                  .append("path")
                  .attr("d", path)
                  .style("stroke", "#ccc")
                  .style("stroke-width", "1")
                  .style("fill", color);
              });
            });
          });
        });
    </script>
  </body>
</html>

梵

componentDidMount() {
this.login();
window.history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.onBack);
//Ping the server every 31 minutes to see if the session is still alive
this.interval = setInterval(
() => this.sessionManager.ping(),
SESSION_TIMEOUT
);
}

componentWillUnmount() {
clearInterval(this.interval);
}

onBack() {
if (this.state.selectedNetwork) {
this.onSelectNetwork(null);
}
window.history.pushState(null, null, document.URL);
}

梵

Start from here for some basic example using D3:
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

梵

This is amazing website for geoJSON topoJSON, shape and beyond:
https://mapshaper.org/

梵

var items = [
   '#cc0000','#00cc00', '#0000cc'
];


for(var i=0; i < 100; i++ ) {

	let nlayer = svg.append('g');

	let color = items[Math.floor(Math.random() * items.length)];
	if (i<10){
		j = "00" + i;
	}
	else {
		j = "0" + i;
	}

	console.log(j, color);
	d3.json("https://api.deniapps.com/zip3?zip3="+j, function(json) {
	const features = json.data;
	nlayer.selectAll("path")
	.data(features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("stroke", "#ccc")
	.style("stroke-width", "1")
	.style("fill", color)

});

}

梵

https://egghead.io/lessons/react-update-data-using-the-apollo-mutation-component

梵

独裁世界，我们被洗脑。
然而有观点，必然有偏见。
自由世界里，虽然我们可以听到两种声音，但是谁对谁错，依然使我们困惑和迷失！

梵总 发布的帖子

梵总发布的帖子