导航

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 用户
    • 群组
    1. 主页
    2. 梵总
    梵
    • 继续与 梵总 聊天
    • 开始与 梵总 的新会话
    • 举报资料
    • block_user
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组
    保存
    正在保存

    站长

    @梵总

    administrators

    0
    声望
    111
    帖子
    2226
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录
    网站 j4fun.com

    梵总 关注
    administrators

    梵总 发布的帖子

    • RE: map with label

      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
      发布在 笔记
      梵
      梵总
    • RE: map with label

      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

      发布在 笔记
      梵
      梵总
    • Best Quote

      "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

      发布在 笔记
      梵
      梵总
    • Object is not extensible error when creating new attribute for array of objects
      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

      发布在 笔记
      梵
      梵总
    • shallow copy vs deep copy

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

      发布在 笔记
      梵
      梵总
    • d3 with react

      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

      发布在 笔记
      梵
      梵总
    • RE: map with label

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

      发布在 笔记
      梵
      梵总
    • map with label
      <!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>
      
      发布在 笔记
      梵
      梵总
    • What
      <!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>
      
      发布在 笔记
      梵
      梵总
    • pushstate

      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);
      }

      发布在 笔记
      梵
      梵总