未加星标

Livecoding #32: A Map of Global Migrations, Part 1

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

This is a Livecoding Recap an almost-weekly post about interesting things discovered while livecoding :movie_camera:. Always under 500 words and with pictures. You can follow my channel, here . New content almost every Sunday at 2pm PDT . There’s live chat, come say hai :wink:

You know, it's really hard to compete with the Super Bowl. This Sunday must have been the lowest live coding turnout I've ever seen.

A cumulative of 80 people came to see me live, and that makes me happy, and I still don't know how liveedu.tv calculates that. It doesn't matter. It's a number, it's not zero, and that's great.

Thanks to mrmaru for teaching me how to jump to the end of line ( $ ) and beginning of line ( 0 ) in Vim. I sure feel dumb for holding the left and right arrow keys for the past 15 years like an idiot. Why didn't I look that up? :neutral_face:

Together, we talked about not understanding football and built this map:


Livecoding #32: A Map of Global Migrations, Part 1

We're going to make it better next week. I know it doesn't look like much yet.

Our (my?) goal is to build a map of global migrations using the UN dataset I mentionedlast week. Initially, I wanted to build one of those cool maps that change country sizes to represent a value. No idea how to do that. Yet.

Instead we're drawing lines. Because I couldn't figure out how to make curves :joy:

In my defense, I was tired and dying from a cold.

Right now, you're seeing global migrations into Djibouti. Lines connect source migrations to their destination . There's nothing about magnitude yet. That comes next week, and I'd love some suggestions on how to do that. Line thickness smells interesting but would probably look weird.

Oh, and the lines are going to be curved. I think what I'm missing is a third point between the source and destination . Something to give D3's curve curveBasis interpolator a reason to make a curve.

Right now we're rendering the migrations layer as a React component, like this:

const Migrations = ({ topology, projection, data, nameIdMap }) => { const countries = topojson.feature(topology, topology.objects.countries), path = d3.geoPath(projection), centroids = _.fromPairs(countries.features .map(country => [country.id, path.centroid(country)])); return ( <g> <CountryMigrations data={data[10]} nameIdMap={nameIdMap} centroids={centroids} /> </g> ); }; const CountryMigrations = ({ data, nameIdMap, centroids }) => { const line = d3.line() .curve(d3.curveBasis), destination = centroids[data.id]; console.log(data.name); const sources = Object.keys(data.sources) .filter(name => centroids[nameIdMap[name]]) .map(name => centroids[nameIdMap[name]]); return ( <g> {sources.map((source, i) => ( <path d={line([destination, source])} style={{stroke: 'black', strokeWidth: '1px'}} key={`${data.id}-${i}`} /> ))} </g> ) };

The Migrations component builds a dictionary of country centroids, which gives us a cached mapping from country id to country centroid position. We use these as line anchors.

Then we iterate through the list of countries and render CountryMigration components. Well, in theory. There's just one CountryMigration right now, so it's easier to debug.

Each CountryMigration component creates a d3.line generator, compiles a list of sources , then iterates through them and adds path elements for each line. As you can see, this works, but it doesn't make curves because a curve between two points is a straight line.

That sounds stupidly obvious when I say it out loud

Join me next week as we curve the curves, add animation to represent migration volume, and maybe some interactivity. Mouseovers could filter countries? Perhaps.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React
分页:12
转载请注明
本文标题:Livecoding #32: A Map of Global Migrations, Part 1
本站链接:http://www.codesec.net/view/531003.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(30)