I am trying to transform GeoJSON to TopoJOSN in order to put into Vega-Lite. Therefore I can draw a map.
I used https://geojson-maps.ash.ms/ to download the .json for map Oceania (Low resolution), then I put this file into https://mapshaper.org/ so that I can export it again as .topojson
However, even I choose export as .topojson, the file still give me .json. Because when I put this URL to Vega-Late, it cannot display a Oceania map. (My code at the very bottom of the question)
Anyone know how can I transform into topojson? Or even maybe there is anything wrong with my URL?
A couple issues with your specification:
your GeoJSON file does not include a feature named "states". It includes a feature named "custom".
you are using the albersusa projection, which only shows the USA, and your GeoJSON has no data within this boundary.
Fixing these issues, and using an orthographic projection centered on Australia, gives you a better chart (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 500,
"height": 300,
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/Ausmap.geo.json",
"format": {
"type": "topojson",
"feature": "custom"
}
},
"mark": {
"type": "geoshape",
"fill": "lightgray",
"stroke": "white"
}
},
{
"data": {
"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/rainfall_tidy.csv"
},
"mark": "circle",
"encoding": {
"longitude": {
"field": "longitude",
"type": "quantitative"
},
"latitude": {
"field": "latitude",
"type": "quantitative"
},
"size": {"value": 10},
"color": {"value": "steelblue"}
}
}
],
"config": {
"projection": {
"type": "orthographic",
"rotate": [-140, 30, 0]
}
}
}
Related
As stated the map has a drop down menu that changes the display of the map, it selects different columns in the dataset. Ideally I would like to show a different "scheme" for input one and input two or what would also work in my case is to use "reverse" the "scale" encoding to reverse the color scheme for one of the two data columns being loaded
Code extract:
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"background":"white",
"view": {"stroke": "trasparent"}},
"width": 700,
"height": 500,
"data": {
"url": "https://unpkg.com/world-atlas#1.1.4/world/110m.json",
"format": {
"type": "topojson",
"feature": "countries"}
},
"projection": {
"type": "naturalEarth2"},
"mark": {
"type": "geoshape",
"stroke": "rgb(50, 50, 50)",
"strokeWidth":0.3},
"transform": [
{"calculate":"parseInt(datum.id)", "as":"id_N"},
{
"lookup": "id_N",
"from": {
"key": "id",
"fields": ["alpha3", "name"],
"data": {"url": "data1"}}
},
{"lookup": "alpha3",
"from":{
"data":{
"url":"data2"},
"key": "ISO3",
"fields":["Vulnerability", "Gain"]
}
},
{"calculate": "datum.Vulnerability", "as": "Climate Vulnerability"},
{"calculate": "datum.Gain", "as": "Overall Vulnerability Index"},
{"calculate": "datum[Select]","as": "varSelected"},
],
"params": [
{"name": "Select",
"value": "Vulnerability",
"bind": {
"input": "select",
"options": [
"Climate Vulnerability",
"Overall Vulnerability Index"]}}],
"encoding": {
"color":{
"field":"varSelected",
"type":"quantitative",
"title": null,
"scale":{
"scheme": {"name": "turbo", "count":5}
}
},
"tooltip":[
{"field":"name", "title":"Country"},
{"field":"varSelected","title":"Score","type":"quantitative"}],
}
I am trying to build an elementary plot showing proportion of energy source by continent. I've already cleaned up the data and uploaded a .csv file here : https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015
Yet when I try to import it in vega lite editor, it states that my csv is empty.
Here is the code I've written :
{
"data": {"url": "raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015"},
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain":["Africa","Europe","Asia","North America","South America","Asia"],
"title": "Continent"
},
"y": {
"field":"prop",
"aggregate":"sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy", "hydro_share_energy","renewables_share_energy","oil_share_energy"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
If you look in the Javascript console, you'll see the issue:
loader.js:175 GET https://vega.github.io/editor/raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015 404
You are attempting to load the dataset with a relative rather than absolute URL, which is returning a 404; you can fix this by adding https:// to the front of your URL.
Additionally, since your URL does not include a file extension, you must tell Vega-Lite that the data is CSV-formatted using a format specification. With these two changes, your chart works (open in editor):
{
"data": {
"url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/master/prop_source_by_continent_2015",
"format": {"type": "csv"}
},
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain":["Africa","Europe","Asia","North America","South America","Asia"],
"title": "Continent"
},
"y": {
"field":"prop",
"aggregate":"sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": ["coal_share_energy","gas_share_energy","nuclear_share_energy",
"hydro_share_energy","renewables_share_energy","oil_share_energy"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
The Url you have provided in your data config should also contain https:// and then need to specify the format of data. Refer the below config or try fiddle:
{
"data": {
"url": "https://raw.githubusercontent.com/mkeutgen/dataviz_energy/main/prop_source_by_continent_2015",
"format": {"type": "csv"}
},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"mark": "bar",
"encoding": {
"x": {
"field": "continent",
"type": "nominal",
"domain": [
"Africa",
"Europe",
"Asia",
"North America",
"South America",
"Asia"
],
"title": "Continent"
},
"y": {
"field": "prop",
"aggregate": "sum",
"type": "quantitative",
"stack": "normalize"
},
"color": {
"field": "share energy",
"type": "nominal",
"scale": {
"domain": [
"coal_share_energy",
"gas_share_energy",
"nuclear_share_energy",
"hydro_share_energy",
"renewables_share_energy",
"oil_share_energy"
],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"title": "Weather type"
}
}
}
We are using Cytoscape + neo4j + spring boot + REST. We've tried to use some formats pass to frontend, however didn't work that well. So looking for best structure to use Cytoscape js.
========
Added later.
For example response from neo4j apoc export json query would be like this:
{
"application": {
"type": "node",
"id": "hhj354",
"labels": [
"Application"
],
"properties": {
"appid": "A90378",
"name": "hkjgj",
"status": "In Production"
}
},
"changes": [
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": sfd
},
{
"node": {
"type": "node",
"id": "fdsf324",
"labels": [
"Change"
],
"properties": {
"type": "gjhk",
"startdate": "2019-11-21 02:11:32"
}
},
"group": "2019-11",
"relation": 453
}
]
}
I need some detailed parsing codes. Parsing in backend or front end both ok as long as short enough.
Thanks in advance.
As far as I'm concerned, the front-end should do the less calculations as possible.
Therefore, try to send a JSON as close as possible to the format specified in the specs of cytoscape.js
The basic idea of graph is that it's composed of nodes and edges, those elements (as cytoscape calls them) have ids that can help you select them in a easier way.
No Calculation in Back-End
If you want to use built-in format .json from CALL apoc.export.json.all("all.json",{useTypes:true})then you will have for example to do some transformation in the front-end:
responseJson => {
responseJson.map(element => {
return {
group: element.type,
data : {
id: `${element.type}${element.id}`,
myFavouriteProperty: element.property
}
}
}
I am trying to get the width of a text-field in coordinates, i.e. starting coordinates and ending coordinates of the text-field on the map. My code is as below:
map.on('load', function () {
map.addLayer({
"id": "labels",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-119.4179, 36.7783]
}
}]
}
},
"layout": {
"icon-image": "harbor-15",
"text-field": "Testing city name",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top",
"text-allow-overlap": true
}
});
From the above, I would like to get the exact start and end coordinates of the text-field only. Could somebody say whether this is possible?
I don't think that's possible to access. The text layout is calculated buried deeply in the mapbox-gl source code. The text itself is rendered in WebGL using Distance Field Fonts
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y