metasoarous / oz

Data visualizations in Clojure and ClojureScript using Vega and Vega-lite
Eclipse Public License 1.0
825 stars 74 forks source link

How to label axes #199

Open jimka2001 opened 1 month ago

jimka2001 commented 1 month ago

I asked this elsewhere but with no answer, so please allow me to ask it here.

I have a clojure function, series-format-plot-data, defined here https://github.com/jimka2001/clojurein-student/blob/ce1e21511a04d17f851a294f39fcf7b457f4427e/clojurein-source-code/src/lecture/vega_plot.clj#L8 which creates a plot using oz. I can't figure out how to set the label on the x and y axes. Can someone help?

When I call the function, sample-plot-2, defined here https://github.com/jimka2001/clojurein-student/blob/ce1e21511a04d17f851a294f39fcf7b457f4427e/clojurein-source-code/src/lecture/baby_name_plot.clj#L98 I get a graphs looking like the following which has x and y axis labels as "x" and "y" rather than "Year" and "Percentage" as requested. Baby Names 44427929273960329145

I'm basically returning a data structure such as the following:

    {:data {:values polished-data} // polished-data computed elsewhere.
     :title {:text chart-title}
     :description chart-title
     :axes [{:orient "bottom"
             ;; TODO this is NOT setting the label
             :title x-label}
            {:orient "left"
             ;; TODO this is NOT setting the label
             :title y-label}]
     :encoding {:x {:field "x" ;; x-label
                    :type "quantitative"}
                :y {:field "y" ;; y-label
                    :type "quantitative"}
                :color {:field "series"
                        :type "nominal"}}
     :mark "line"}
jimka2001 commented 1 month ago

If I change the data structure to the following, no points get plotted.

{:data {:values polished-data}
     :title {:text chart-title}
     :description chart-title
     :axes [{:orient "bottom"
             ;; TODO this is NOT setting the label
             :title x-label}
            {:orient "left"
             ;; TODO this is NOT setting the label
             :title y-label}]
     :encoding {:x {:field x-label ;; !!! CHANGED TO x-label
                    :type "quantitative"}
                :y {:field y-label ;; !!! CHANGED TO y-label
                    :type "quantitative"}
                :color {:field "series"
                        :type "nominal"}}
     :mark "line"}
jimka2001 commented 1 month ago

If I change the {:data {:values polished-data} ...} value as follows, it get the correct x and y axis labels. I really doubt that is the intended way. I'm creating a keyword with a call to keyword whose text is the text I'd like on the label, then creating polished-data using those keywords.

(defn series-format-plot-data 
  "encode plotting data into an hashmap ready to pass to oz/view!"
  [chart-title x-label y-label data]
  ;; data is of form [[string [(x y) (x y) (x y) ...]]
  ;;                  [string [(x y) (x y) (x y) ...]]
  ;;                  ...]

  (let [x-key (keyword x-label)
        y-key (keyword y-label)
        polished-data (for [[label aseq] data
                            [x y] aseq]
                        {x-key (float x)
                         y-key (float y)
                         :series label})]
    {:data {:values polished-data}
     :title {:text chart-title}
     :description chart-title
     :axes [{:orient "bottom"
             ;; TODO this is NOT setting the label
             :title x-label}
            {:orient "left"
             ;; TODO this is NOT setting the label
             :title y-label}]
     :encoding {:x {:field x-label ;; "x" ;; x-label
                    :type "quantitative"}
                :y {:field y-label ;; "y" ;; y-label
                    :type "quantitative"}
                :color {:field "series"
                        :type "nominal"}}
     :mark "line"}))

Baby Names 1220876085143165141