render_data_table(table_info)
d3.min(speed_dist, d => d.avg_sp_rd)
height = 500
margin = ({ top: 50, right: 30, bottom: 40, left: 40 })
chart2_x = d3
.scaleLinear()
.domain([4.6, 10.1])
.range([margin.left, width - margin.right]).nice()
chart2_y = d3
.scaleLinear()
.domain([0, 15])
.range([height - margin.bottom, margin.top]).nice()
chart2_xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(chart2_x))
chart2_yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(chart2_y))
gender_color_scale = d3
.scaleOrdinal()
.domain(['M', 'F'])
.range(["#55CDFC", "#F7A8B8"])
gender_color_scale2 = d3
.scaleOrdinal()
.domain(['M', 'F', 'All'])
.range(["#55CDFC", "#F7A8B8", "#893BFF"])
viewof selectedGender2 = select({
title: "Gender for Visualization",
options: ["M", "F", "All"],
value: "All"
})
gender_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(chart2_xAxis);
svg.append("g").call(chart2_yAxis);
svg
.append("g")
.selectAll("circle")
.data(gender_speed.filter(function(d) {return d.gender === selectedGender2}))
.join("circle")
.attr("fill", d => gender_color_scale2(d.gender))
.attr("stroke", "black")
.attr("opacity", 0.5)
.attr("cx", d => chart2_x(d.avg_sp_rd) + margin.left)
.attr("cy", d => chart2_y(d.num_runners))
.attr("r", "10px")
svg
.append("text")
.attr("x", width / 3)
.attr("y", height)
.text("Average Speed Throughout Race")
.style("font-size", "20px");
svg
.append("text")
.attr("transform", "translate(10, 300) rotate(-90)")
.text("Number of Runners")
.style("font-size", "20px");
svg
.append("text")
.attr("x", width / 3)
.attr("y", 15)
.text("Runners by Average Speed")
.style("font-size", "20px");
return svg.node();
}
chart3_y = d3
.scaleLinear()
.domain([4.6, 10.1])
.range([height - margin.bottom, margin.top]).nice()
chart3_yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(chart3_y))
chart3_x = d3
.scaleLinear()
.domain([1, 235])
.range([margin.left, width - margin.right]).nice()
chart3_xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(chart3_x))
viewof selectedGender = select({
title: "Gender for Visualization",
options: ["M", "F"],
value: "M"
})
rank_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(chart3_xAxis);
svg.append("g").call(chart3_yAxis);
svg
.append("g")
.selectAll("circle")
.data(speed_rank.filter(function(d) {return d.gender === selectedGender}))
.join("circle")
.attr("fill", d => gender_color_scale(d.gender))
.attr("stroke", "white")
.attr("opacity", 0.5)
.attr("cx", d => chart3_x(d.rank))
.attr("cy", d => chart3_y(d.avg_spd_rd))
.attr("r", "7px")
svg
.append("text")
.attr("x", width / 2.5)
.attr("y", height)
.text("Finishing Place")
.style("font-size", "20px");
svg
.append("text")
.attr("transform", "translate(10, 350) rotate(-90)")
.text("Average Speed Throughout Race")
.style("font-size", "20px");
svg
.append("text")
.attr("x", width / 3)
.attr("y", 15)
.text("Finishing Place by Average Speed")
.style("font-size", "20px");
return svg.node();
}
speed_dist = d3.csvParse(await FileAttachment("runners_by_speed.csv").text(), )
females = full_data.filter(function(d) {return d.Gender === 'F'})
males = full_data.filter(function(d) {return d.Gender === 'M'})
gender_speed = d3.csvParse(await FileAttachment("runners_spd_gender@1.csv").text())
full_data = d3.csvParse(await FileAttachment("DUV_Baja_Trail (1).csv").text())
speed_rank = d3.csvParse(await FileAttachment("speeds_by_rank.csv").text())
d3 = require('d3')
import { select } from "@jashkenas/inputs"
html`<style>
rect:hover {
fill:blue;
}
</style>`
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.
