Demonstration of transforming CSV data using D3
For NICAR Beginning D3, 2017
Charts forked from d3indepth's block: DOM Manipulation
forked from darlacameron's block: 2. Transforming data
forked from darlacameron's block: 3. Drawing shapes
forked from anonymous's block: Time series chart with real data
forked from jmuyskens's block: Multiple time series chart with real data
forked from jmuyskens's block: Scatterplot with real data
xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>Transforming data</title>
</head>
<style>
path {
fill: none;
stroke: #aaa;
}
circle {
opacity: 0.5;
}
.axis path {
stroke: none;
}
.axis line {
stroke: #ccc;
}
.axis.x line {
stroke-dasharray: 3px 2px;
}
.circle.android {
fill: red;
}
line.annotation {
stroke: black;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="script.js"></script>
<script>
d3.csv("realdonaldtrump2017.csv", function(error, data) {
if (error) throw error;
lineChart(data);
});
</script>
</body>
</html>
Modified http://d3js.org/d3.v4.min.js to a secure url
https://d3js.org/d3.v4.min.js