Columbia '20 // hackNY '17
viewof start = html`<button onclick="startButton">start</button><button onclick="stop()">stop</button>`
chart2 = {
var svg = d3.create("svg")
.attr("width", 1000)
.attr("height", 700);
var dateLabel = svg.append("text")
.attr("id", "date-label")
.text("FEBRUARY 16")
.attr("x", 50)
.attr("y", 50)
var ridershipLabel = svg.append("text")
.attr("id", "ridership-label")
.text("106492540 total riders")
.attr("x", 50)
.attr("y", 90)
var g = svg.append("g")
g.selectAll("path")
.data(nyc2.features)
.enter().append("path")
.attr("d", path)
.attr("fill", "lightgrey")
.attr("stroke", "white")
g.attr("transform", "translate(200, 0)");
var h = svg.append("g")
var circs = h.selectAll("circle")
.data(data.series)
.enter().append("circle")
.attr("cx",function(d,i) {
var coords = proj([d.longitude,d.latitude]);
return coords[0];
})
.attr("cy",function(d,i) {
var coords = proj([d.longitude,d.latitude]);
return coords[1];
})
.attr("r",function(d,i) {
var proportion = d.values[0]/50000;
return 20*proportion;
})
.attr("fill",function(d, i) {
var proportion = d.values[0]*20/50000;
return d3.interpolateRdBu(d.values[0]/maximum);
})
.style("opacity", 0.5);
h.attr("transform", "translate(200, 0)");
var x = d3.scaleLinear()
.domain([0, 48])
.range([0, 500]);
var y = d3.scaleLinear()
.domain([0, 4000000])
.range([0, 500]);
svg.append("path")
.datum(allTotals)
.attr("stroke", "steelblue")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d, i) { return x(i) })
.y(function(d, i) { return y(d) })
.curve(d3.curveBasis)
)
/*
// transition through days
var day = 0;
setInterval(() => {
//sliderTransition.width(Math.random() * 100 + 200);
ridershipLabel
.transition()
.duration(200)
.text(getTotalForDay(day) + " total riders")
.style("fill", d3.interpolateRdBu(getTotalForDay(day)/maxForTotals));
var formatTime = d3.timeFormat("%B %d, %Y");
dateLabel.transition().duration(200).text(formatTime(data.dates[day]));
day += 1;
if (day >= 48) {
day = 1;
}
}, 1000);
*/
/*
const slider = d3.sliderBottom()
.min(d3.min(data.dates))
.max(d3.max(data.dates))
.marks(data.dates)
.width(1000)
.tickFormat(d3.utcFormat("%b %d"))
.ticks(5)
.on("onchange", function(value) {
console.log(value);
circs.transition().attr("r", 20);
});
svg.call(slider);
*/
return svg.node()
}
maximum = {
var max = 0
for (var i = 0; i < data.series.length; i++) {
if (data.series[i].values[0] > max) {
max = data.series[i].values[0];
}
}
return max;
}
html`
<style>
#date-label {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
#ridership-label {
font-size: 40px;
font-weight: bold;
}
</style>`
proj = d3.geoConicConformal()
.parallels([33, 45])
.rotate([96, -39])
.fitSize([1000, 700], nyc2)
path = d3.geoPath()
.projection(d3.geoConicConformal()
.parallels([33, 45])
.rotate([96, -39])
.fitSize([1000, 700], nyc2))
nyc2 = {
var betterfeatures = nyc.features.filter(function(d) {
return d.properties.borough != "Staten Island";
})
return {
type: nyc.type,
features: betterfeatures
};
}
nyc = d3.json("https://gist.githubusercontent.com/pstuffa/928a2a31f352e59edef5ef56fa767e20/raw/7ba0230c627237c12cc1b3809f85d99486621756/nyc.json")
maxForTotals = {
var tots = []
for (var i = 0; i < 48; i++) {
tots.push(getTotalForDay(i));
}
return d3.max(tots);
}
y = d3.scaleLinear()
.domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()
//.domain([0, 12000])
.range([height - margin.bottom, margin.top])
x = d3.scaleUtc()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right])
margin = ({top: 20, right: 20, bottom: 30, left: 30})
height = 600
d3 = require.alias({
"d3-array": "d3@5",
"d3-axis": "d3@5",
"d3-dispatch": "d3@5",
"d3-drag": "d3@5",
"d3-ease": "d3@5",
"d3-scale": "d3@5",
"d3-selection": "d3@5",
"d3-transition": "d3@5"
})("d3@5", "d3-simple-slider@1")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
