curran/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An example visualizing the missing IDs in the world-atlas project.

  
## bundle.js
(function (d3,topojson) {
  'use strict';

  const svg = d3.select('svg');

  const projection = d3.geoNaturalEarth1();
  const pathGenerator = d3.geoPath().projection(projection);

  const g = svg.append('g');

  const colorLegendG = svg.append('g')
      .attr('transform', `translate(40,310)`);

  g.append('path')
      .attr('class', 'sphere')
      .attr('d', pathGenerator({type: 'Sphere'}));

  svg.call(d3.zoom().on('zoom', () => {
    g.attr('transform', d3.event.transform);
  }));

  d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
    .then(data => topojson.feature(data, data.objects.countries))
    .then(countries => {
      g.selectAll('path').data(countries.features)
        .enter().append('path')
          .attr('class', 'country')
          .attr('d', pathGenerator)
          .attr('fill', d => (d.id === '-99') ? 'red' : 'green')
        .append('title')
          .text(d => d.id);
  });

}(d3,topojson));

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Missing IDs for World Atlas</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
    <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script src="bundle.js"></script>
  </body>
</html>

## index.js
import {
  select,
  geoPath,
  geoNaturalEarth1,
  zoom,
  event,
  scaleOrdinal,
  schemeSpectral,
  csv,
  json
} from 'd3';

import { feature } from 'topojson';

const svg = select('svg');

const projection = geoNaturalEarth1();
const pathGenerator = geoPath().projection(projection);

const g = svg.append('g');

const colorLegendG = svg.append('g')
    .attr('transform', `translate(40,310)`);

g.append('path')
    .attr('class', 'sphere')
    .attr('d', pathGenerator({type: 'Sphere'}));

svg.call(zoom().on('zoom', () => {
  g.attr('transform', event.transform);
}));

json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
  .then(data => feature(data, data.objects.countries))
  .then(countries => {
    g.selectAll('path').data(countries.features)
      .enter().append('path')
        .attr('class', 'country')
        .attr('d', pathGenerator)
        .attr('fill', d => (d.id === '-99') ? 'red' : 'green')
      .append('title')
        .text(d => d.id);
});

## package.json
{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "latest"
  }
}

## rollup.config.js
export default {
  input: 'index.js',
  external: ['d3'],
  output: {
    file: 'bundle.js',
    format: 'iife',
    sourcemap: true,
    globals: { d3: 'd3' }
  }
};

## styles.css
body {
  margin: 0px;
  overflow: hidden;
}

.sphere {
  fill: #4242e4;
}

.country {
  stroke: black;
  stroke-width: 0.05px;
}

.country:hover {
  fill: red;
}

.tick text {
  font-size: 1em;
  fill: black;
  font-family: sans-serif;
}

.tick circle {
  stroke: black;
  stroke-opacity: 0.5;
}
	(function (d3,topojson) {
	'use strict';

	const svg = d3.select('svg');

	const projection = d3.geoNaturalEarth1();
	const pathGenerator = d3.geoPath().projection(projection);

	const g = svg.append('g');

	const colorLegendG = svg.append('g')
	.attr('transform', `translate(40,310)`);

	g.append('path')
	.attr('class', 'sphere')
	.attr('d', pathGenerator({type: 'Sphere'}));

	svg.call(d3.zoom().on('zoom', () => {
	g.attr('transform', d3.event.transform);
	}));

	d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
	.then(data => topojson.feature(data, data.objects.countries))
	.then(countries => {
	g.selectAll('path').data(countries.features)
	.enter().append('path')
	.attr('class', 'country')
	.attr('d', pathGenerator)
	.attr('fill', d => (d.id === '-99') ? 'red' : 'green')
	.append('title')
	.text(d => d.id);
	});

	}(d3,topojson));
	<!DOCTYPE html>
	<html>
	<head>
	<title>Missing IDs for World Atlas</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>
	<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
	</head>
	<body>
	<svg width="960" height="500"></svg>
	<script src="bundle.js"></script>
	</body>
	</html>
	import {
	select,
	geoPath,
	geoNaturalEarth1,
	zoom,
	event,
	scaleOrdinal,
	schemeSpectral,
	csv,
	json
	} from 'd3';

	import { feature } from 'topojson';

	const svg = select('svg');

	const projection = geoNaturalEarth1();
	const pathGenerator = geoPath().projection(projection);

	const g = svg.append('g');

	const colorLegendG = svg.append('g')
	.attr('transform', `translate(40,310)`);

	g.append('path')
	.attr('class', 'sphere')
	.attr('d', pathGenerator({type: 'Sphere'}));

	svg.call(zoom().on('zoom', () => {
	g.attr('transform', event.transform);
	}));

	json('https://unpkg.com/world-atlas@1.1.4/world/50m.json')
	.then(data => feature(data, data.objects.countries))
	.then(countries => {
	g.selectAll('path').data(countries.features)
	.enter().append('path')
	.attr('class', 'country')
	.attr('d', pathGenerator)
	.attr('fill', d => (d.id === '-99') ? 'red' : 'green')
	.append('title')
	.text(d => d.id);
	});
	{
	"scripts": {
	"build": "rollup -c"
	},
	"devDependencies": {
	"rollup": "latest"
	}
	}
	export default {
	input: 'index.js',
	external: ['d3'],
	output: {
	file: 'bundle.js',
	format: 'iife',
	sourcemap: true,
	globals: { d3: 'd3' }
	}
	};
	body {
	margin: 0px;
	overflow: hidden;
	}

	.sphere {
	fill: #4242e4;
	}

	.country {
	stroke: black;
	stroke-width: 0.05px;
	}

	.country:hover {
	fill: red;
	}

	.tick text {
	font-size: 1em;
	fill: black;
	font-family: sans-serif;
	}

	.tick circle {
	stroke: black;
	stroke-opacity: 0.5;
	}