line_chart = {
yield html`
<div id="lineChart">
<h1 class="chart-title">Title of Chart</h1>
<div id="wrapper-lineChart">
</div>
</div>`;
lineChart();
}
async function lineChart() {
// Data - can change to sampleData for alluma-esque data
const dataset = await d3.json(
"https://gist.githubusercontent.com/chekos/7ee802ef53ba4bbd10a3b8161116d638/raw/e0d655473a57fae5ba54e648429bfd01ca698e12/tijuana_weather_data.json"
);
// Chart dimensions
let dimensions = {
width: 685,
height: 450,
margin: {
top: 25,
right: 10,
bottom: 50,
left: 50
}
};
dimensions.boundedWidth =
dimensions.width - dimensions.margin.left - dimensions.margin.right;
dimensions.boundedHeight =
dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
// Canvas
const wrapper = d3
.select("#wrapper-lineChart")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
const bounds = wrapper
.append("g")
.style(
"transform",
`translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
);
// Accessors + Scales
const dateParser = d3.timeParse("%Y-%m-%d");
const xAccessor = d => dateParser(d.date);
const yAccessor = d => ((d.temperatureMax - 32) * 5) / 9;
const xScale = d3
.scaleTime()
.domain(d3.extent(dataset, xAccessor))
.range([0, dimensions.boundedWidth])
.nice();
const yScale = d3
.scaleLinear()
.domain(d3.extent(dataset, yAccessor))
.range([dimensions.boundedHeight, 0])
.nice();
// Draw data
const lineGenerator = d3
.line()
.x(d => xScale(xAccessor(d)))
.y(d => yScale(yAccessor(d)));
bounds
.append("path")
.attr("d", lineGenerator(dataset))
.attr("fill", "none")
.attr("stroke", selected_color)
.attr("stroke-width", 1.4);
// Peripherals
const xAxisGenerator = d3.axisBottom().scale(xScale);
const xAxis = bounds
.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${dimensions.boundedHeight}px)`);
const xAxisLabel = xAxis
.append("text")
.attr("x", dimensions.boundedWidth / 2)
.attr("y", dimensions.margin.bottom - 10)
.attr("fill", allumaSlate)
.style("font-size", "1.4em")
.html("X axis title")
.attr("class", "axis-title");
const yAxisGenerator = d3
.axisLeft()
.scale(yScale)
.ticks(dimensions.boundedHeight / 50);
const yAxis = bounds.append("g").call(yAxisGenerator);
const yAxisLabel = yAxis
.append("text")
.attr("x", -dimensions.margin.left)
.attr("y", -dimensions.margin.top / 2)
.attr("fill", allumaSlate)
.style("font-size", "1.4em")
.text("Y axis title")
.style("text-anchor", "start")
.attr("class", "axis-title");
// Interactions
}
allumaGreen = colorSchemes.primary[0]
allumaSlate = colorSchemes.primary[1]
sampleData = [
{ county: "Alameda", gender: "Female", value: 1219900 },
{ county: "Alameda", gender: "Male", value: 914301 },
{ county: "Los Angeles", gender: "Female", value: 1388536 },
{ county: "Los Angeles", gender: "Male", value: 622894 },
{ county: "Orange County", gender: "Female", value: 523747 },
{ county: "Orange County", gender: "Male", value: 553368 },
{ county: "San Francisco", gender: "Female", value: 429355 },
{ county: "San Francisco", gender: "Male", value: 850145 },
{ county: "San Mateo", gender: "Female", value: 867492 },
{ county: "San Mateo", gender: "Male", value: 582689 }
]
Object.keys(colorSchemes)
Object.values(colorSchemes)
colorsForPicker = {
let _ = [];
for (let [key, value] of Object.entries(colorSchemes)) {
_.push({ name: key, colors: value });
}
return _;
}
vals = {
let vals = [];
for (let index = 0; index < color_scheme.length; index++) {
vals.push({
label: html`<svg width="10" height="10">
<rect width="10" height="10" style="fill:${color_scheme[index]};" />
</svg> ${color_scheme[index]} `,
value: color_scheme[index]
});
}
return vals;
}
colorsForRadio = {
let _ = [];
for (let [key, value] of Object.entries(color_scheme)) {
_.push({
label: key,
value: value
});
}
}
import { colorSchemes } from '@chekos/alluma-data-visualization-style-guide'
import { select, radio } from '@jashkenas/inputs'
import { colorSchemePicker } from "@zechasault/color-schemes-and-interpolators-picker"
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.
