ortelius - npm Package Compare versions

Comparing version 0.0.1-beta.1 to 0.0.1-beta.2

package.json

 {
   "name": "ortelius",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "description": "a tool for making good-looking maps",
@@ -37,2 +37,5 @@ "main": "index.js",
     "d3-scale-chromatic": "^1.3.3",
+    "d3-selection": "^1.4.0",
+    "d3-svg-legend": "^2.25.6",
+    "d3-transition": "^1.2.0",
     "prop-types": "^15.7.2",
@@ -39,0 +42,0 @@ "react": "^16.8.0",

src/utils/createColorScale.js

@@ -1,15 +0,26 @@
-import { scaleLinear } from 'd3-scale';
+import { scaleLinear, scaleThreshold } from 'd3-scale';
 import { interpolateViridis } from 'd3-scale-chromatic';
 
-export default function createColorScale(data) {
-  const scaleData = data.map(datum => datum.value);
+export default function createColorScale(
+  config = { type: 'linear', range: [interpolateViridis(0), interpolateViridis(1)] },
+  dataById
+) {
+  const { type } = config;
 
-  const min = Math.min(...scaleData);
-  const max = Math.max(...scaleData);
+  if (type === 'linear') {
+    const scaleData = Object.values(dataById).map(datum => datum.value);
 
-  const scale = scaleLinear()
-    .domain([min, max])
-    .range([interpolateViridis(0), interpolateViridis(1)]);
+    const min = Math.min(...scaleData);
+    const max = Math.max(...scaleData);
 
-  return scale;
+    return scaleLinear()
+      .domain([min, max])
+      .range([interpolateViridis(0), interpolateViridis(1)]);
+  }
+
+  if (type === 'threshold') {
+    return scaleThreshold()
+      .domain(config.domain)
+      .range(config.range);
+  }
 }

src/utils/createGeoFeatures.js

 import { geoPath as d3GeoPath } from 'd3-geo';
 
 export function createGeoPath({ projection, width, height, geojson }) {
-  return d3GeoPath().projection(projection.fitExtent([[0, 0], [width, height]], geojson));
+  return d3GeoPath().projection(projection.fitSize([width, height], geojson));
 }
 
 export default function createGeoFeatures(features, geoPathParams) {
-  const geoPath = createGeoPath(geoPathParams);
+  // const geoPath = createGeoPath(geoPathParams);
 
@@ -15,7 +15,7 @@ return features.map(feature => {
       id,
-      geoProperties: properties,
-      path: geoPath(feature),
-      bounds: geoPath.bounds(feature)
+      geoProperties: properties
+      // path: geoPath(feature),
+      // bounds: geoPath.bounds(feature)
     };
   });
 }

src/utils/prepareData.js

 import { csvParse } from 'd3-dsv';
 
-function castToFloat(valueToCast, idKey) {
+export function castToFloat(valueToCast, idKey) {
   try {
@@ -5,0 +5,0 @@ const value = parseFloat(valueToCast);

src/utils/prepareGeoJson.js

@@ -1,10 +0,17 @@
-import { feature as topo2geo } from 'topojson';
+import * as topojson from 'topojson';
 
-export default function prepareGeoJson(ext, fetchedData, filter) {
+export default function prepareGeoJson(
+  format = 'topojson',
+  fetchedData,
+  filter = geoJson => geoJson,
+  simplifyFactor = 0
+) {
   let geoJson = fetchedData;
 
-  if (ext === 'json') {
+  if (format === 'topojson') {
     const topoJsonKey = Object.keys(fetchedData.objects)[0];
+    let topoJson = topojson.presimplify(fetchedData);
+    topoJson = topojson.simplify(topoJson, simplifyFactor);
 
-    geoJson = topo2geo(fetchedData, fetchedData.objects[topoJsonKey]);
+    geoJson = topojson.feature(topoJson, topoJson.objects[topoJsonKey]);
   }
@@ -11,0 +18,0 @@

src/utils/zoomToBoundingBox.js

 export default ({ bounds, width, height }) => {
   const dx = bounds[1][0] - bounds[0][0];
   const dy = bounds[1][1] - bounds[0][1];
-  const scale = Math.max(1, Math.min(20, 0.9 / Math.max(dx / width, dy / height)));
+  const scale = Math.max(1, Math.min(10, 0.9 / Math.max(dx / width, dy / height)));
 
@@ -6,0 +6,0 @@ const x = (bounds[0][0] + bounds[1][0]) / 2;

src/viewer/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import SimpleMap from './SimpleMap';
-import DynamicMap from './DynamicMap';
+import { csvParse } from 'd3-dsv';
 
-const mapFactory = Factory => ({ container, ...rest }) => {
-  const containerElem = document.querySelector(container);
+import Choropleth from './Choropleth';
 
-  ReactDOM.render(
-    React.createElement(Factory, {
-      ...rest
-    }),
-    containerElem
-  );
-};
+export default {
+  createMap: ({ container, type, ...rest }) => {
+    const containerElem = document.querySelector(container);
+    let Factory;
 
-export default {
-  createSimpleMap: mapFactory(SimpleMap),
-  createDynamicMap: mapFactory(DynamicMap)
+    if (type === 'choropleth') {
+      Factory = Choropleth;
+    }
+
+    ReactDOM.render(
+      React.createElement(Factory, {
+        ...rest
+      }),
+      containerElem
+    );
+  },
+  fetchCSV: async urls => {
+    const rawCSV = await Promise.all(urls.map(url => fetch(url).then(response => response.text())));
+
+    return rawCSV.map(csvParse);
+  },
+  fetchJSON: async items =>
+    Promise.all(items.map(({ url }) => fetch(url).then(response => response.json())))
 };

src/viewer/shared/Legend.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function Legend() {
-  return null;
+import * as d3 from 'utils/d3-custom.js';
+
+export default class Legend extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.legendContainer = React.createRef();
+  }
+
+  componentDidMount() {
+    const { labels, labelWrap, scale } = this.props;
+
+    const legend = d3
+      .legendColor()
+      .labelFormat(d3.format('.2f'))
+      .labels(labels)
+      .labelWrap(labelWrap)
+      .scale(scale);
+
+    d3.select(this.legendContainer.current).call(legend);
+  }
+
+  render() {
+    return <g className="legend" ref={this.legendContainer} />;
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

359701

increased by19.23%

Worsened metrics

Dependency count

14

increased by27.27%

Number of package files

33

decreased by-2.94%

Lines of code

953

decreased by-5.83%

Number of medium supply chain risk alerts

5

increased by150%

Dependency changes

• + Addedd3-selection@^1.4.0

• + Addedd3-svg-legend@^2.25.6

• + Addedd3-transition@^1.2.0

• + Added@types/d3-selection@1.0.10(transitive)

• + Addedd3-array@1.0.1(transitive)

• + Addedd3-collection@1.0.7(transitive)

• + Addedd3-dispatch@1.0.1(transitive)

• + Addedd3-ease@1.0.7(transitive)

• + Addedd3-format@1.0.2(transitive)

• + Addedd3-scale@1.0.3(transitive)

• + Addedd3-selection@1.0.21.4.2(transitive)

• + Addedd3-svg-legend@2.25.6(transitive)

• + Addedd3-time@1.1.0(transitive)

• + Addedd3-time-format@2.3.0(transitive)

• + Addedd3-timer@1.0.10(transitive)

• + Addedd3-transition@1.0.31.3.2(transitive)