Tag Archives: JSON

Where art thou: Converting addresses to latitude and longitude.

Previously, we have covered how to identify where the user is, based upon navigator.geolocation and based upon their IP address (there are definitely ways to make IP-based geolocation suck less).  I figured that in today’s post, we would look at how to go from an arbitrary physical location (zip code or city name) to latitude and longitude coordinates. Continue reading Where art thou: Converting addresses to latitude and longitude.

State Parks App: I made some new APIs for the app

Last week, I wrote about creating a cloudflare worker.  When I created that worker, I knew that I wanted to leverage that for the state parks app.  This week, I created three new workers: one to get the user’s location, one to get the list of parks, and one to get an individual park.  Let’s take a look. Continue reading State Parks App: I made some new APIs for the app

State Parks App: Let’s add Bulma and Sorting

Last week, we finally got the park listing working and updated the instance at test.wisparks.jws.app.  This week, I figured that we should add Bulma to the project and add sorting.

So, let’s start by adding Bulma and cleaning the code up a little.

See the Pen
Wisc Parks (Part 5): Cleaning up the listing and adding Bulma
by Joe Steinbring (@steinbring)
on CodePen.

That improves things quite a bit.  Next, let’s add font awesome, a sortBy variable, a sortOrder variable, and the ability to toggle sorting by clicking on a table heading.

See the Pen
Wisc Parks (Part 6): Adding font-awesome and sorting
by Joe Steinbring (@steinbring)
on CodePen.

So, there are two issues now.  It doesn’t make a lot of sense to sort by the street address and you can’t sort by the property type because it is actually three values (not just a singular string).  So, let’s clean things up a bit.

See the Pen
Wisc Parks (Part 7): Cleaning things up a little
by Joe Steinbring (@steinbring)
on CodePen.

That is probably enough for one week, so let’s update the test branch of the app on github.  We have previously added Bulma / Beufy to Vue CLI app but haven’t added Font Awesome to one, yet.  I might drill down on the topic in the future but until then, I would recommend the article “How to use Font Awesome 5 on VueJS Project” for further details.  To see exactly what I did, you can check out the commits to the test branch but I ended up needing to tweak the template before Font Awesome was finally willing to behave.

Here is what the final result ended up looking like …

See the Pen
Wisc Parks (Part 8): Changing v-if to v-show and adding spans for FA
by Joe Steinbring (@steinbring)
on CodePen.

So, the test instance of the app now looks like this …

I think that the next step is to surface more information through park profile pages (something that I know that I promised at the end of last week’s post).

Have any questions, comments, etc?  Feel free to drop a comment, below.

State Parks App: Let’s try that again?

Last week, I got all the way to the end before the damn Google Sheets API stopped working on me.  This week, I figured that we would create a JSON file out of the spreadsheet, host it somewhere, and then just use that.  I started by creating a CSV file from the Google Sheets document, running it through a CSV to JSON converter, creating a new github repo for it, and then wiring it up for hosting via Render.  That resulted in my new api.wisparks.jws.app “service”.  Now that we have replaced Google Sheets, let’s try to get the app finally working. Continue reading State Parks App: Let’s try that again?

State Parks App: Let’s actually build something

Previously, we built an API for the State Parks App, using Google Sheets and we set up hosting for the thing.  The next step is to actually write the first bit of the thing.  When we created the API, we also wrote a little vue.js proof of concept that loops over the data and outputs it as an HTML table.  If we combine that with the code that we wrote for “How to sort a list of locations by how close they are to you”, we get a table that lists every park in the system by how close they are to where you (the user) are at this moment.

See the Pen
Wisc Parks (Part 1): Listing state parks by distance from the user
by Joe Steinbring (@steinbring)
on CodePen.

The above example loads like shit and is too much information for such a listing but it is a start.

For our next iteration, let’s remove every column except for “Name”, “Property Type”, “Physical Address”, “County”, and “Distance From You”.  Since “Property Type” is three booleans (State Park, Recreation Area, and State Forest), we will also need to use v-if to get the job done.

See the Pen
Wisc Parks (Part 2): Listing state parks by distance from the user
by Joe Steinbring (@steinbring)
on CodePen.

The above example is a definite improvement but we can do even better.  Let’s drop the “Distance From You” column completely if we don’t have that data yet, only show two decimal places for that value, and add a basic loading screen.

See the Pen
Wisc Parks (Part 3): Listing state parks by distance from the user
by Joe Steinbring (@steinbring)
on CodePen.

This third iteration is still very much a minimal viable product, but it is enough to justify a dev build.  In “Playing with the Vue CLI and Webpack” we transformed one of these pens into a CLI app and in “State Parks App: Hosting and Code Management“, we set up hosting and a git repo for the app.

If you check out the test branch of the WIStateParks repository, you can see the end result of the transformation and you can test it at test.wisparks.jws.app but you will notice that it doesn’t actually work anymore.  The night that I finished writing this code, the google sheets API stopped working for me and creating a new one using a duplicate google sheet didn’t help.

So, where do we go from here?  I think that the next step might be to save the sheet as a JSON document and just use that instead of the google sheets hack.  Have a question, comment, or suggestion?  Feel free to drop a comment, below.

 

[ Cover photo by Mike Benna on Unsplash  ]

Playing with COVID-19 data: D3.js Bar Charts

Last week, we gathered COVID-19 statistical data.  This week, we are going to try to build some charts using D3.js.  D3.js is a javascript library that allows you to generate some fairly fancy charts and graphs but we are going to start with some basic bar charts.  Let’s take a look at a simple example.

See the Pen
D3.js – Bar Chart – Part 1
by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, D3.js lets you feed it an array of data and it builds the chart based upon it.  So, what if we take our dataset from last week and try to feed it in?

See the Pen
Playing with COVID-19 data – Part 5
by Joe Steinbring (@steinbring)
on CodePen.

The problem seems to be that the number of data points and the maximum values in out dataset make the graph pretty unreadable.  So, what if we flip our graph 90 degrees?

See the Pen
D3.js – Bar Chart – Part 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, the first data point is on the first line, the second one is on the second line, etc.  That should hopefully at least fix the issue with the chart wrapping onto the next line, right?

See the Pen
Playing with COVID-19 data – Part 6
by Joe Steinbring (@steinbring)
on CodePen.

As you can see, it still leaves it pretty darn unreadable.  Well, let’s try limiting the data to just a 30 day period?

See the Pen
Playing with COVID-19 data – Part 7
by Joe Steinbring (@steinbring)
on CodePen.

This is a little bit better. It at least leaves us with a semi-readable chart.  Next week, we are going to take a look at how we could use the same data to create a line chart.

Until then, if you have any questions, comments, etc, feel free to leave a comment, below.

 

[ Cover photo by visuals on Unsplash ]

Playing with COVID-19 data

I have been wanting to work with some statistical data for a while now.  Recently, I came across The COVID Tracking Project (a project of The Atlantic) and I figured that I would would look at what I could get out of the project’s APIs.  The project has a lot of API endpoints but I figured that I would look at three of them for the moment.  I am also limiting my experimentation to data for the state of Wisconsin. Continue reading Playing with COVID-19 data

Did you know that you can use Google Sheets as a JSON API?

You don’t necessarily need to write server-side code for everything.  Sometime there is a much easier solution.  Did you know that you can use Google Sheets as an API endpoint?  Let’s take a look at a quick example.

For a few years now, I have been archiving my tweets as Google Sheets documents.  There is a maximum size to a single document, so there are more than one.  Today, we will be using the eighth one in the series as an example. Continue reading Did you know that you can use Google Sheets as a JSON API?

Playing with the OpenWeather API: The basics

Ever since Apple bought and shut down Dark Sky, I have been struggling to figure out what to replace it with.  I figured that this would be a good excuse to play with some weather APIs.  I have done this once before but that was with Rivets and YQL (neither of which I can necessarily recommend anymore).

OpenWeather is “a team of IT experts and data scientists that has been practising deep weather data science since 2014”.  Most importantly, they have free plans, so you can play with their data rather easily. Continue reading Playing with the OpenWeather API: The basics