Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@redsift/d3-rs-geo
Advanced tools
Readme
d3-rs-geo
presents a TopoJSON map in an SVG container.
View @redsift/d3-rs-geo on Codepen
<script src="//static.redsift.io/reusable/d3-rs-geo/latest/d3-rs-geo.umd-es2015.min.js"></script>
<script>
var chart = d3_rs_geo.html();
d3.select('body')
.datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json')
.call(chart);
</script>
import { html as chart } from "@redsift/d3-rs-geo";
let eml = chart();
...
var chart = require("@redsift/d3-rs-geo");
var eml = chart.html();
...
Datum can be one of:
url
(URL to load the TopoJSON file) and optionally the keys points
and links
Represents points of interest on the map. [ [ longitude, latitude ] ... ]
Default presentation uses a symbol. You can supply a custom symbol i.e. object that implements a draw
function as per https://github.com/d3/d3-shape#symbol_type or supply a totally custom reusable component via the pointsDisplay
property.
// Display a text label instead of the default symbol.
var points = [ [ -76.852587, 38.991621, 'NY' ], [ -0.076132, 51.5074, 'London' ] ];
function displayText(selection) {
selection.each(function(d, i) {
let node = select(this).selectAll('text').data([ d ]);
node = node.enter().append('text').merge(node);
node.text(d[2]);
});
}
var chart = d3_rs_geo.html().points(points).pointsDisplay(displayText);
d3.select('body')
.datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json')
.call(chart);
Represents great arcs between two points. [ [ longitude-1, latitude-1, longitude-2, latitude-2 ] ... ]
Default presentation uses a dashed line.
// Display a solid red line
var links = [ [ -76.852587, 38.991621, -0.076132, 51.5074 ] ];
function redLine(selection) {
selection.attr('stroke', 'red').attr('stroke-width', '2px');
}
var chart = d3_rs_geo.html().links(links).linksDisplay(redLine);
d3.select('body')
.datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json')
.call(chart);
Click handler for map interactions. d
will be the object of the interaction from the TopoJSON data structure. E.g. if the click was on a country, d
will be an object and d.id
will be the ISO_3166-1 country code.
d
will be null if the click was outside a country boundary.
As setup in the examples, the drawing of the map involves a number of heavy operations.
enter()/update()/exit()
pattern for the paths.While this is all done relatively efficiently (once the JSON is in the network cache, a 110m world map will compute in ~200ms on a fast desktop), reducing the amount of work that needs to be done will improve performance, reduce energy consumption and free cycles for the rest of the application. You can do this by:
https://static.redsift.io/thirdparty/topojson/examples/world-50m.json
is ~750kb of JSON while the 110 meter resolution version https://static.redsift.io/thirdparty/topojson/examples/world-110m.json
is ~ 100kb. The 110m version obviously does not capture outlines and smaller islands as accurately.datum
indead of using the URL reference.redrawTopology
to false e.g. you may use this when updating data points on the same map.Property | Description | Transition |
---|---|---|
classed | String SVG custom class. | N |
width , height , size , scale | Integer SVG container sizes. | Y |
background | String Change the colour of the SVG background. | Y |
theme | String Change the graph theme, includes 'light' (default) and 'dark' . | Y |
margin | Number Change the margin inside of the SVG container. | Y |
graticule | Number Opacity of the graticule (line grid). Range between 0 and 1. | N |
projection | String Change projection view of the world map. Default set to geoPatterson . The available world projection can be on found the D3 geo library github webpage. | Y |
projectionScale | Number Change the projection scale of the world map. | Y |
interrupted | Boolean Enabled clipping for interrupted projections. Default set to true . | N |
geometry | String Set the country geometry Parameters land ;display the entire country geometry , states ; display each state of the country, countries ; display each countries. | N |
fill | String Change the land filling colour. Parameter colour name , rgb colour or hex colour . | Y |
points | (Array of)Number Add points on the map using decimal expression of [ Longitude , Latitude ]. | N |
pointsDisplay | Function, String Supply custom symbol of the plotted points i.e. object that implements a draw function or supply a totally custom reusable component via the pointDisplay property. Default set to symbolWye * | N |
links | (Array of)Number Links each points. Parameter include an arrays of points connecting the link. | Y |
linksDisplay | Function, String Supply custom presentation to the dashed line. | |
zoom | Number Zoom into the map. Default set to 1.0 . | Y |
zoomX , zoomY | Number Zoom into the map at x-coordinate (zoomX) and Y-coordinate (zoomY). | Y |
onClick | Function Handler for a click event on a data series. | N |
redrawTopology | Boolean When drawing the map, redraw the topology too | |
negative | String Color for the negative space in the map i.e. typically the water. When interrupted is set to false, this does not display and the background color shows through | |
boundary | String Color for the boundaries between country polygons |
FAQs
Generates geo maps using D3v4.
The npm package @redsift/d3-rs-geo receives a total of 10 weekly downloads. As such, @redsift/d3-rs-geo popularity was classified as not popular.
We found that @redsift/d3-rs-geo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.