D3 v4.x Learning (1-Final Chapter) - Map Exploration

Keywords: Programming JSON less

To keep the Great Wall from falling
Horse Long Gun
See early
Mr. Qi Jiangdong
A lot of hard work on the road
To live forever
Look at my mountains and rivers
China stands tall!

In the last chapter of the first phase of this series, I would like to recommend a big man in D3.

https://my.csdn.net/lzhlzz

To prevent people from finding resources for map json files, here's the portal for Map Resources

https://blog.csdn.net/lzhlzz/article/details/41347929

<template>
  <div id='svgContainer' style="">
    <div class="map">
      <h3>Map</h3>
      <div class="svg" id="geomap"></div>
    </div>
</template>
<script>
import * as d3 from 'd3'
export default {
  methods: {
    geomap () {
      const width = 1000
      const height = 1000
      const svg = d3.select('#geomap')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
      // Define map projection
      const projection = d3.geoMercator()
        .center([106, 35])
        .scale(880)
        .translate([width / 2, height / 2])
      // Define Geographic Path Generator
      const path = d3.geoPath()
        .projection(projection)
      // Color Scale
      const color = d3.scaleOrdinal(d3.schemeCategory20)
      // Reading map files requires setting up a local server
      d3.json('/static/mapJson/china.json', function (error, root) {
        if (error) { return console.error(error) }
        // Draw Path
        console.log(root.features)
        svg.selectAll('path')
          .data(root.features)
          .enter()
          .append('path')
          .attr('stroke', '#ccc')
          .attr('stroke-width', 1)
          .attr('fill', function (d, i) {
            return color(i)
          })
          .attr('d', path)
          .on('mouseover', function (d, i) {
            d3.select(this)
              .attr('fill', 'yellow')
            // Whether to select the mouse to move into the displayed province, commented
            // svg
            //   .append('text')
            //   .attr('x', () => projection(d.properties.cp)[0])
            //   .attr('y', () => projection(d.properties.cp)[1])
            //   .attr('dx', () => -d.properties.name.length / 2 + 'em')
            //   .attr('dy', '-0.5em')
            //   .style('font-size', '12px')
            //   .attr('class', 'label')
            //   .text(() => d.properties.name)
          })
          .on('mouseout', function (d, i) {
            d3.select(this)
              .attr('fill', color(i))
            // d3.selectAll('.label').remove()
          })
        // Show all provinces
        let textContainer = svg.selectAll('.texts')
          .data(root.features)
          .enter()
          .append('g')
          .attr('class', 'texts')
        textContainer.append('text')
          .attr('x', (d) => projection(d.properties.cp)[0])
          .attr('y', (d) => projection(d.properties.cp)[1])
          .attr('dx', (d) => -d.properties.name.length / 2 + 'em')
          .attr('dy', '0.5em')
          .style('font-size', '11px')
          .text((d) => d.properties.name)
      })
    }
  },
  mounted () {
    this.geomap()
  }
}
</script>
<style lang="less">
#svgContainer{
  width: 100%;
  height: 100%;
  .every{
    width: 400px;
    height: 425px;
    margin:15px;
    float: left;
    h3{
      margin:0;
      .button{
        float: right;
        margin-right: 20px;
        font-size: 14px;
        cursor: pointer;
        padding: 2px 8px;
        border:1px solid #ccc;
        background: yellowgreen;
        border-radius: 4px;
        &:hover{
          background: violet;
        }
      }
    }
    .svg{
      width: 400px;
      height: 400px;
    }
    .map{
      width: 1000px;
      height: 1025px;
      margin:15px;
      float: left;
      h3{
        margin: 0;
      }
      .svg{
        width: 1000px;
        height:1000px;
      }
    }
  }
}
</style>

The most important thing for a family in this series is to be neat and tidy

 

This is the last chapter in the first phase of the series. Here's a personal summary (stop by finding a partner for resources)

 

This series should go on, to what extent, to a great degree.

Recently I read a book, Hackers and Painters, translated by Ruan Dashen.Opening the first page is a comment by an associate professor at MIT, in a striking position

"This book will force you to rethink the nature of computer programming."- goushi

This sentence is not followed by the name of the associate professor or his pen name, his nickname, his alias, it is just the phonetic pronunciation of shit.I didn't read this book seriously (word for word) because it really didn't make people read it seriously. It's not a tutorial or a complex programming document. It's just like my university English teacher. When we were in class, we were told which platform has cheap paper diapers and which specialty is delicious. Tell us all about the latest "fresh" smells except English., she says everything. I think it's probably a college English class.The same is true of this book. I remember that when it first came up, it talked about education in the United States, followed by some skills to do things for people, some things to start a business, and so on.Of course, he also has a lot of hackers in it. He explains the generation, habits and hobbies of hackers and how to become a master programmer. In fact, if you want to be a good cook, you can also read this book.Because the way to be a good person is actually all the same.

That's why I want to open that paragraph at the beginning of this chapter.

???

If you take a closer look at the evidence above, you will find that the examples I have cited do not seem to have any connection with the things I have cited, or that they have not yet been found.

If you think so, you've actually found the answer to this question.

Not all seemingly unrelated things can't be put together. No one stipulates that things must be clustered and people grouped. It's just the habit of'good'people.People are always willing to put the superficial similarities together. People themselves are like a magnet, collecting something similar to themselves and sucking it up on them.You can often see singleton wang, who boasts himself as a programmer ape, watching XXX Programming From Getting Started to Give Up. He never seems to be concerned about his singleton status, because this is different from his own perception. Instead of spending time in the toilet with a copy of Getting Started with Bubbles, he prefers to think about how to handle product reviews that will be held at night.

Actually, I didn't mean to offend this way of life. There is a passage in Singer's movie where a gambler plays four cards with four tables at the same time and casually depicts winning money in different cards.As you and I are all human, it is difficult to talk about a brief history of time from a genius's point of view while still tapping into beautiful code.Fortunately, there is no time for genius in your time. You have a lot of time other than programming, and you won't be caught working nights and nights at a research institute because you're a genius.

If I'm free, I'd like to find a copy of Getting Started with Eating to see what's the way to eat.

   

 

Posted by davidmuir on Wed, 08 May 2019 00:45:40 -0700