I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
May 19, 2020
14 forks
22 stars
{
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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.