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 examplescatterPlotData.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.forked from curran's block: Fundamental Visualizations
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Fundamental Visualizations</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<!-- The date parsing for the line chart data uses Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<!-- The Choropleth component uses TopoJSON. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<!-- A functional reactive model library. github.com/curran/model -->
<script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>
<!-- Chiasm core and plugins. github.com/chiasm-project -->
<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>
<!-- Custom Chiasm plugins for this example. -->
<script src="dataLoader.js"></script>
<script src="pieChart.js"></script>
<script src="scatterPlot.js"></script>
<script src="barChart.js"></script>
<script src="lineChart.js"></script>
<script src="choropleth.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>
<script>
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