#js

About a year ago I redesigned this site. I mostly liked my old site, but I wanted to move away from Jekyll. I didn't dislike Jekyll, but programming brings many technologies to learn. I've been heading down the javascript path for a while now learning express.js and p5. I wanted to complete my transformation with the move to Eleventy (or 11ty). This post covers problems I had moving from Jekyll to Eleventy, how I solved them, and introduces some features of the new site.

I am starting to really like Django development. I'm not a python developer and I am by no means a "full stack" developer, but I keep finding ways to make things in Django without much effort.

I come from the R world working with data. A very common data analysis technique is to take data and group it by a variable. I wanted to do the same thing with javascript and then append the data using .innerHTML to the DOM. I am working on an app that has data that I would like the user to be able to display in various different ways. I had a really hard time finding any information on grouping data and how to loop through the grouped data to display the grouped data in HTML. I am not very good a javascript so this was quite a challange for me.

I'm working on a website for a rafting non-profit. I thought it would be cool if they could display the flow data for local rivers. I also thought this would be good time for me to learn more about D3js and the USGS instantaneous flow data API.

After my last blogpost I was a little frustrated at how poorly the title text resized using ggplot and ggsave. It was a minor issue to be honest, but I figured I could learn something new by exporting the data as geojson and plotting it using D3 js. So here it goes.

This is a basic line chart built with D3. I've written a few more tutorials on how to make charts starting out very basic and moving to a little more complex. I'm no expert, so these are how a beginner (at both javascript and D3) would explain everything. Some might find that methodology helpful. My previous tutorials: My first charts, SVG Plots, Scatterplot.

I've made a few bar charts up to this point. But really what I want to do is plot data over time. We need to figure out how to add x and y axis and work with x and y coordinates. The next logical step then, is to make a scatterplot.

When I learned to program, I started to come up with all of these ideas that all of the sudden I knew were possible. But I didn't really know how to implement most of them. For instance, I've wanted to be able to use an API to retrieve data and then use that data to make a chart on the fly for quite some time. There's only one problem: I suck at javascript. Without a doubt, charting and making api calls on the front end requires javascript. It also means, working with D3 if you want to do it right. Needless to say, because I am not an excellent javascript (or anything but html, css, and a touch of r for that matter) this "dream" has been an uphill battle. Just getting the data has been a challenge. Needless to say, today I started working on some simple D3 charts. No longer will I wait until I magically become an amazing javascript developer to learn how to make charts.

So the next big steps in making charts is instead of using html elements, d3 works really well with svg elements. But even though svg elements are a flexible for making graphics, not that many people are familiar with them so they add another level of confusion to the process. So let's start at the beginning with what an svg element is.

My notes on getting up and running with vue and axios. this is also the first step in turning my River Flow app which queries the USGS instantaneous flow data from a non server rendering non-route serving app to a Nuxt.js Universal Application (meaning it is rendered on the server before it is served).

My notes on Nuxt.js.