maximsch2/Main.elm

## index.html
<html>
  <head>
    <title>Vega Scaffold</title>
    <script src="https://vega.github.io/vega-editor/vendor/d3.min.js"></script>
    <script src="https://vega.github.io/vega-editor/vendor/d3.geo.projection.min.js"></script>
    <script src="https://vega.github.io/vega-editor/vendor/topojson.js"></script>
    <script src="https://vega.github.io/vega-editor/vendor/d3.layout.cloud.js"></script>
    <script src="https://vega.github.io/vega/vega.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
  <script type="text/javascript">
      var app = Elm.Main.fullscreen();

      // parse a spec and create a visualization view
      function parse(spec, elspec) {
        vg.parse.spec(spec, function(error, chart) {
            console.log(error)
            chart({el: elspec}).update();
        });
      }

      app.ports.plot.subscribe(function(spec) {
          parse(spec[0], spec[1]);

      });
  </script>

</html>

## Main.elm
import Html exposing (Html, Attribute, div, input, text, button)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String
import Ports exposing (..)

main =
  Html.program { init = init, view = view, update = update, subscriptions = \x -> Sub.none }


-- MODEL

type alias Model =
  { content : String
  }

init =
    (model, Cmd.none)


model : Model
model =
  { content = "" }


-- UPDATE


type Msg
  = Change String | Run

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent } ! []
    Run ->
        model ! [plot (model.content, "#vis")]


-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", onInput Change ] []
    , button [onClick Run] [text "Show graph"]

    , div [id "vis"] []
    ]

## Ports.elm
port module Ports exposing (..)

port plot : (String, String) -> Cmd a
	<html>
	<head>
	<title>Vega Scaffold</title>
	<script src="https://vega.github.io/vega-editor/vendor/d3.min.js"></script>
	<script src="https://vega.github.io/vega-editor/vendor/d3.geo.projection.min.js"></script>
	<script src="https://vega.github.io/vega-editor/vendor/topojson.js"></script>
	<script src="https://vega.github.io/vega-editor/vendor/d3.layout.cloud.js"></script>
	<script src="https://vega.github.io/vega/vega.min.js"></script>
	<script src="main.js"></script>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	var app = Elm.Main.fullscreen();

	// parse a spec and create a visualization view
	function parse(spec, elspec) {
	vg.parse.spec(spec, function(error, chart) {
	console.log(error)
	chart({el: elspec}).update();
	});
	}

	app.ports.plot.subscribe(function(spec) {
	parse(spec[0], spec[1]);

	});
	</script>

	</html>
	import Html exposing (Html, Attribute, div, input, text, button)
	import Html.App as Html
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput, onClick)
	import String
	import Ports exposing (..)

	main =
	Html.program { init = init, view = view, update = update, subscriptions = \x -> Sub.none }


	-- MODEL

	type alias Model =
	{ content : String
	}

	init =
	(model, Cmd.none)


	model : Model
	model =
	{ content = "" }


	-- UPDATE


	type Msg
	= Change String \| Run

	update : Msg -> Model -> (Model, Cmd Msg)
	update msg model =
	case msg of
	Change newContent ->
	{ model \| content = newContent } ! []
	Run ->
	model ! [plot (model.content, "#vis")]


	-- VIEW

	view : Model -> Html Msg
	view model =
	div []
	[ input [ placeholder "Text to reverse", onInput Change ] []
	, button [onClick Run] [text "Show graph"]

	, div [id "vis"] []
	]
	port module Ports exposing (..)

	port plot : (String, String) -> Cmd a