Unexpected geometry encountered with TopoJson and ChartGeo/ChartJS integration

I have successfully used TopoJson and ChartJS to create a map of the UK. However, I am now facing difficulty in drawing two squares off the west coast of GB.

Here is my custom-written TopoJson data:

const topoData = {
    type: "Topology",
    arcs:
    [
        [[0,0],[-50,0],[0,50],[50,0],[0,-50]]
    ],
    objects: {
        locs: {
            type: "GeometryCollection",
            geometries: [
            {
                arcs: [[0]],
                type: "Polygon",
                properties: {
                    Name: "Other Regions"
                }
            }]
        }
    },
};

Despite my efforts, the square defined in the arcs object does not draw as expected. Instead, it appears incorrectly drawn. See image here: Incorrectly drawn geo

I am unsure where I am going wrong and would appreciate any assistance. Thank you!

Answer №1

After spending some time digging into this, I finally cracked the code. It turns out the documentation is misleading and incorrect. Rather than declaring vertices as deltas from the previous vertex, they actually need to be defined as absolute positions.

This revelation changes everything: vertices should indeed be defined as actual positions!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to import JavaScript file from "static" directory in Flask environment

Having trouble importing mainfirst.js onto my HTML page. I've attempted the following methods: <script src="../../../static/assets/js/main.js"></script> <script type="text/javascript" src="{{ url_for('static',filename=' ...

Hey there! Is there a way to detect in React when the page is rendering due to a ctrl+shift+t command?

Is it possible to detect in React when a page is rendered using the ctrl+shift+t command? I am looking to identify the following scenario: The user closes the browser tab The user then reopens the tab by pressing ctrl+shift+t I want to be able to recogniz ...

Can JavaScript code be utilized within Angular?

Hello, I am wondering if it is acceptable to include JavaScript code within Angular for DOM manipulation purposes. Here is a sample of what I have in mind: document.querySelectorAll('div.links a').forEach(function(item) { const tag = window.lo ...

Searching for multiple filtered items in Vue.js

When working with Vue js, searching through a list is straightforward. However, when dealing with a large dataset of 1000 records and needing to apply specific filters for user searches, I find myself at a loss. Is there a plugin or method that can help me ...

Triggering createEffect in SolidJS with an external dependency: A guide

Is there a way to use an external dependency to trigger the createEffect function in Solid, similar to React's useEffect dependency array? I am trying to execute setShowMenu when there is a change in location.pathname. const location = useLocation() ...

Unexpected color changes when hovering over sparkline graphs

One of the jquery plugins I'm using is called sparkline Here's an example of how I am using it: $(function(){ $("#sparkline5").sparkline([2, 8, 10, 22], { type: 'pie', height: '140', sliceColors: [ ...

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

Why is my HTTP request callback not being executed?

I've been trying to send an HTTP POST request to a 3rd-party API using a promise method. Oddly enough, the callback function never seems to run, even though when I test the code on its own, the API call is successful. Node.js and the concept of an e ...

Captions in Bootstrap 4 carousel vanish when adjusting size

My Bootstrap 4 carousel is displaying GIFs with captions for different project features. The captions work well on medium/large screens, but disappear entirely on smaller screens. How can I ensure the captions remain visible on smaller screens? <div ...

Is it possible to pass parameters through a GET query to Vue.js?

When I apply a filter, the query in the API disappears. A PHP developer suggested that the request should be GET instead of POST. How can I pass parameters to the GET query? Here is an example of my POST request: export const filterDate = (options) => ...

Exploring the depths of nested decimal values in Mongo databases

My experience with MongoDB (not local) involves an entry in the collection structured like this. name: "fancy name" description: "fancy description" category: "fancy category" options: Object small: 5.35 medium: 9.25 large: 16.00 However, w ...

Utilize Electron's fs to stream a file directly to an HTML video player while it is being downloaded

I am currently exploring the possibility of using the HTML video player to stream a file from the file system within Electron. My goal is to initiate streaming while the file is still being downloaded. I am uncertain whether my current approach will be ...

Flawed reasoning in determining the selection of checkboxes

Take a look at the code snippet below, featuring multiple checkboxes with corresponding fields: <Checkbox checked={checked[element]} onChange={(e) => { setChecked({ ...checked, [e.target.name]: !checked[e ...

What is the process for accessing information from Symantec through their API?

Experiencing a 400 status code error currently. Feeling a bit stuck on what steps to take next. The 400 status code typically relates to syntax issues. How can I properly format my output into JSON file structure? import requests, json, urllib3 urllib3.d ...

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

Triggering a click event within a JavaScript OnClick function leads to a malfunction

Working on creating a context menu with various options using <li> tags as outlined below. The goal is to trigger a click event on another ID (image) when selecting and clicking on an option from the context menu. However, I am facing an issue where ...

Testing the equality of nested arrays: A step-by-step guide

My maze generator creates walls for each "cell", resulting in duplicate walls - such as the left wall of one cell being identical to the right wall of the adjacent cell. I have managed to convert the maze data into a different program where it is stored in ...

How can we format a number to match the Brazilian number system while still maintaining its ability to be used in calculations?

Is there a known method to convert the number 123,123,214.93 into Brazilian currency format (123.123.214,93) for display purposes only? I attempted to achieve this conversion using a JavaScript function where I added periods after every 3 numbers and repl ...

How to generate a nested JSON structure with two arrays in Node.js

I have two arrays. One array contains field names, and the other array consists of arrays that correspond to rows in a table. I want to create a list of JSON Objects using these two arrays. Is there an in-built function available for this? Although I can a ...

"Encountered a hiccup while trying to query a web service using Power BI - Oops! We hit a roadblock: Expression

Our web service generates JSON data, which we retrieve using jQuery REST calls and display in tables. The web service is written in C# WEBAPI and the code snippet looks like this: data = serializer.Serialize(rows); return Request.CreateResponse(HttpS ...