geom.viz spec SVG transformation example

geomviz.clj

(->> {:x-axis (viz/linear-axis
               {:domain      [0 len]
                :range       [40 220]
                :major       100
                :minor       50
                :pos         100
                :label       (viz/default-svg-label int)
                :label-style {:style {:font-size "9px"}}
                :attribs     {:stroke-width "0.5px"}})
      :y-axis (viz/log-axis
               {:domain      [min-v max-v]
                :range       [100 5]
                :pos         40
                :label-dist  15
                :label       (viz/default-svg-label utils/format-k)
                :label-style {:style {:font-size "9px"} :text-anchor "end"}
                :label-y     3
                :attribs     {:stroke-width "0.5px"}})
      ;; background axis grid
      :grid   {:attribs      {:stroke "#ccc" :stroke-width "0.5px"}
               :minor-y      true}
      ;; one or more datasets and their layouts
      :data   [{:values      (map-indexed vector data)
                :attribs     {:stroke "none" :fill "url(#grad)" :stroke-width "0.5px"}
                :layout      viz/svg-line-plot}]}

     ;; interprete axes in cartesian space (radial supported too)
     (viz/svg-plot2d-cartesian)

     ;; wrap with SVG root element and define gradient
     (svg/svg
      {:width "100%" :viewBox "0 0 240 120"}
      (svg/linear-gradient
       "grad" {:gradientTransform "rotate(90)"}
       [0 (col/css "#f03")] [1 (col/css "#0af")]))

     ;; inject unique :key attribs for React.js
     (svgadapt/inject-element-attribs svgadapt/key-attrib-injector))