Fundamental Visualizations

Fundamental visualization techniques as Chiasm plugins. Inspired by:

Goals of this example:

Provide a starting point for developing more advanced visualization components. Directions to go from here include adding axes, labels, legends, tooltips, and brushing.
Show how each visualization technique can be encapsulated as a standalone piece of code, with no shared dependencies between components. This is why, for example, code for margins and styling is duplicated code in many components. These things could conveivably be refactored out into common modules shared between visualization components.

For a more advanced example that adds brushing interaction to a scatter plot, check out Focus + Context Scatter Plots.

Data includes:

barChartData.csv barChartData.json Fake data to approximate the Cleveland & McGill bar charts.
lineChartData.json This data is from William Playfair's famous visualization of England trade imports and exports from the 1700s. This data was extracted from this example, part of the blog post Dimple as htmlwidget.
pieChartData.csv pieChartData.json Copied from this D3 Pie Chart example
scatterPlotData.csv scatterPlotData.json This is a random sample of 25 entries from Fisher's Iris Data Set.
choroplethData.json This is a topoJSON file containing outlines for US States and demographic data. This data is published as a Shapefile as part of US Census: TIGER/Line® with Selected Demographic and Economic Data. Mapshaper was used to simplify lines and generate the topoJSON file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fundamental Visualizations</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    
    
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>

<script src="https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.0.js"></script>

<script src="dataLoader.js"></script>

<style>

body {
        background-color: black;
      }

/* Make the chart container fill the page using CSS. */
      #chiasm-container {
        background-color: white;
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }
    </style>

</head>
  <body>
    <div id="chiasm-container"></div>

var chiasm = Chiasm();

chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.dataLoader = DataLoader;
      chiasm.plugins.pieChart = PieChart;
      chiasm.plugins.scatterPlot = ScatterPlot;
      chiasm.plugins.barChart = BarChart;
      chiasm.plugins.lineChart = LineChart;
      chiasm.plugins.choropleth = Choropleth;

// Use D3 to fetch the chiasm configuration file and
      // Set the Chaism application configuration.
      d3.json("chiasmConfig.json", function (config){
        chiasm.setConfig(config);
      });

// Set up the line chart component with data from William Playfair.
      chiasm.getComponent("lineChart").then(function (lineChart){

// Fetch the JSON version of the data for the line chart.
        d3.json("lineChartData.json", function (lineChartData){

// Do a custom data transform to make it the table structure that the
          // line chart component understands.
          var data = lineChartData.year.map(function (yearStr, i){
            return {
              year: moment(yearStr).toDate(),
              imports_minus_exports: lineChartData.imports_minus_exports[i]
            };
          });

// Configure the line chart with the data.
          lineChart.set({
            data: data,
            xColumn: "year",
            yColumn: "imports_minus_exports"
          });
        });
      });

// Set up the choropleth component with data from the US Census.
      chiasm.getComponent("choropleth").then(function (choropleth){

// Fetch the JSON version of the data for the line chart.
        d3.json("choroplethData.json", function (topoData){

var geometries = topoData.objects.State_2010Census_DP1.geometries;

var data = geometries.map(function (d){
            return {
              geoId: d.properties.GEOID10,
              population: d.properties.DP0010001
            };
          });

// Configure the line chart with the data.
          choropleth.set({
            topoData: topoData,
            data: data
          });
        });
      });
    
    </script>
  </body>
</html>

Modified http://curran.github.io/model/cdn/model-v0.2.4.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js to a secure url

Modified http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js to a secure url

Modified http://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.0.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://curran.github.io/model/cdn/model-v0.2.4.js

https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js

https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js

https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.0.js