Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
{
const height = 100,
svg = d3.select(html`<svg width=${width} height=${height}>`);
svg.append("circle")
.attr("cx", circle_cx)
.attr("cy", circle_cy)
.attr("r", circle_r)
.style("fill", circle_fill)
.style("stroke", circle_stroke)
.style("stroke-width", 1);
svg.append("circle")
.attr("cx", 150)
.attr("cy", 50)
.attr("r", 20);
svg.append("circle")
.attr("cx", 200)
.attr("cy", 50)
.attr("r", 10)
.style("fill", "steelblue");
svg.append("circle")
.attr("cx", 300)
.attr("cy", 50)
.attr("r", 15)
.style("fill", "gold")
.style("stroke", "firebrick")
.style("stroke-width", "1.5px");
return svg.node();
}
{
const height = 100,
svg = d3.select(html`<svg width=${width} height=${height}>`),
barWidth = 20;
svg.append("rect")
.attr("x", rect_x)
.attr("y", rect_y)
.attr("width", rect_width)
.attr("height", rect_height)
.style("fill", rect_fill)
.style("stroke", rect_stroke)
.style("stroke-width", 1);
svg.append("rect")
.attr("x", 100)
.attr("y", 100 - 20)
.attr("width", barWidth)
.attr("height", 20)
.style("fill", "gold");
svg.append("rect")
.attr("x", 130)
.attr("y", 100 - 80)
.attr("width", barWidth)
.attr("height", 80)
.style("fill", "gold");
svg.append("rect")
.attr("x", 160)
.attr("y", 100 - 60)
.attr("width", barWidth)
.attr("height", 60)
.style("fill", "gold");
return svg.node();
}
md`## Exercise
Draw a horizontal barchart with three bars like the ones above. You can copy and paste the code above.`
{
const height = 200,
svg = d3.select(html`<svg width=${width} height=${height}>`),
barHeight = 20;
// Draw a bar chart with three rects using d3
// YOUR CODE
return svg.node();
}
md`The [path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) tag is a little more complicated in SVG. Instead of taking separte attributes for coordinates, they only use a \`d\` parameter that takes an special encoding for describing the path position. If you are familiar with programming languages like [logo](https://en.wikipedia.org/wiki/Logo_programming_language) you might recognize it. The [MDN path tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) is quite good at explaining it. Take a look at it, and then come back to complete this exercise`
viewof path_d = text({title: "d", value:"M 50 10 L 100 20"})
chart = {
const target = html`
<style>
.chart {
font-family: sans-serif;
}
.chart-footer {
font-style: italic;
font-size: 10pt;
color: #aaa;
}
</style>
<div class="chart">
<h2>Example insight</h2>
<div>A short description of the chart. Usually what's on the y axis</div>
<div id="chart"></div>
<div class="chart-footer">By <a href="https://johnguerra.co">John Alexis Guerra Gómez</a>.
<br>
<strong>Source</strong>: <a href="">My data source</a>
</div>
</div>`;
const
width = 500,
height = 500,
svg = d3.select(target).select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
const margin = ({top: 50, right: 30, bottom: 30, left: 40}),
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const gDrawing = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear()
.domain([0, 1])
.range([0, iwidth]);
const y = d3.scaleLinear()
.domain([0, 1])
.range([iheight, 0]);
const xAxis = svg => svg
.attr("transform", `translate(0,${iheight})`)
.call(d3.axisBottom(x));
const yAxis = svg => svg
.call(d3.axisLeft(y));
gDrawing.append("g")
.call(xAxis)
.append("text")
.style("fill", "black")
.style("font-size", "12pt")
.text("xAxis")
.style("text-anchor", "end")
.attr("transform", `translate(${iwidth}, ${30})`);
gDrawing.append("g")
.call(yAxis)
.append("text")
.style("fill", "black")
.style("font-size", "12pt")
.attr("transform", `translate(${0}, -10)`)
.text("yAxis");
return target;
}
chartArea = {
const target = html`
<style>
.chart {
font-family: sans-serif;
}
.chart-footer {
font-style: italic;
font-size: 10pt;
color: #aaa;
}
</style>
<div class="chart">
<h2>Example insight</h2>
<div>A short description of the chart. Usually what's on the y axis</div>
<div id="chart"></div>
<div class="chart-footer">By <a href="https://johnguerra.co">John Alexis Guerra Gómez</a>.
<br>
<strong>Source</strong>: <a href="">My data source</a>
</div>
</div>`;
const
width = 500,
height = 500,
svg = d3.select(target).select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
const margin = ({top: 50, right: 30, bottom: 30, left: 40}),
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const gDrawing = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const x = d3.scaleLinear()
.domain([0, 1])
.range([0, iwidth]);
const y = d3.scaleLinear()
.domain([0, 1])
.range([iheight, 0]);
const xAxis = svg => svg
.attr("transform", `translate(0,${iheight})`)
.call(d3.axisBottom(x));
const yAxis = svg => svg
.call(d3.axisLeft(y));
gDrawing.append("g")
.call(xAxis)
.append("text")
.style("fill", "black")
.style("font-size", "12pt")
.text("xAxis")
.style("text-anchor", "end")
.attr("transform", `translate(${iwidth}, ${30})`);
gDrawing.append("g")
.call(yAxis)
.append("text")
.style("fill", "black")
.style("font-size", "12pt")
.attr("transform", `translate(${0}, -10)`)
.text("yAxis");
return target;
}
import {slider, color, text} from "@jashkenas/inputs"
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.
