3f:null 40:["$","title",null,{"children":"Vertical Line Chart | Jasper Croome | Observable"}] 46:Tc38,horizontalbarChart = { // create data object const xDomain = d3.extent(data.map((d) => metricAccessor(d))); const yDomain = d3 .extent(data.map((d) => parseFloat(d["Latitude"]))) .sort((a, b) => b - a); // create the scales const xScale = d3 .scaleLinear() .domain(xDomain) .range([175, dimensions.width - dimensions.marginLeft * 2]); const yScale = d3 .scaleLinear() .domain(yDomain) .nice() .range([ dimensions.marginTop + 20, dimensions.height - dimensions.marginTop ]); const line = d3 .line() .x((d) => xScale(metricAccessor(d))) .y((d) => yScale(d["Latitude"])) .curve(d3.curveLinear); // create & append to the SVG const svg = d3 .create("svg") .attr("overflow", "visible") .attr("width", dimensions.width) .attr("height", dimensions.height); svg .append("text") .text(title) .attr("fontSize", titleStyle["font-size"]) .attr("class", "annotationBold") .attr("y", dimensions.marginTop * (2 / 3)); svg .append("path") .attr("class", "path") .attr("d", line(data)) .attr("stroke", "black") .attr("fill", "none"); svg .append("g") .attr("class", "dots") .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => xScale(metricAccessor(d))) .attr("cy", (d) => yScale(d["Latitude"])) .attr("r", "2.5px") .attr("fill", "black"); // add the labels for the detail bars svg .append("g") .attr("class", "categoryName") .selectAll("text") .data(data) .join("text") .text((d) => categoryAccessor(d)) .attr("y", (d) => yScale(d["Latitude"]) + 5) .attr("x", dimensions.marginLeft) .attr("font-size", "12") .attr("fill", "black") .attr("text-anchor", "start"); // add the value labels for each bar svg .append("g") .attr("class", "valueLabel") .selectAll("text") .data(data) .join("text") .text((d) => formatValue(metricAccessor(d))) .attr("y", (d) => yScale(d["Latitude"]) + 5) .attr("x", (d) => xScale(metricAccessor(d)) + dimensions.marginLeft) .attr("font-size", "12") .attr("fill", "black") .attr("text-anchor", "start"); Object.entries(detailLabelStyle).map((e) => { svg.selectAll(".barLabel").attr(`${e[0]}`, `${e[1]}`); }); // apply the standard style to the elements const titleStyleArray = Object.entries(titleStyle); const titleText = svg.selectAll(".title"); titleStyleArray.forEach((t) => { titleText.style(t[0], t[1]); }); const categoryNameStyleArray = Object.entries(summaryLabelStyle); const categoryNames = svg.selectAll(".categoryName"); categoryNameStyleArray.forEach((s) => { categoryNames.style(s[0], s[1]); }); const valueLabelStyleArray = Object.entries(detailLabelStyle); const valueLabels = svg.selectAll(".valueLabel"); valueLabelStyleArray.forEach((s) => { valueLabels.style(s[0], s[1]); }); const latitudeLabels = svg.selectAll(".latitudeLabel"); categoryNameStyleArray.forEach((s) => { latitudeLabels.style(s[0], s[1]); }); return svg.node(); }47:T78f0,// Custom SVG Shapes handDrawn = svg` `48:[] 44:{"id":"61ce4a057522cd53","slug":"vertical-line-chart","title":"Vertical Line Chart","thumbnail":"68e9e3fb6acd2464b9043a09388dffb954be8f5efa8b0dc758235d9bde17174e","access_level":"public","create_time":"$D2022-01-04T13:53:55.073Z","update_time":"$D2022-01-05T13:48:31.593Z","view_time":null,"first_public_time":"$D2022-01-04T14:26:05.574Z","has_unpublished_edits":null,"fork":{"id":"2111ae8a34acd3ad","slug":"horizontal-bar-template","title":"Horizontal Category Bar Chart","owner":{"id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4980cc230c98941f","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":"starter_2024","bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false},"version":2036,"publish_version":2036,"role":null,"authored":false,"authors":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"bio":"Hi! I'm a Design Technologist based in Portland, Oregon (USA). ","following":false}],"members":[{"type":"individual","id":"4520200087dbe52b","login":"jasper","name":"Jasper Croome","avatar_url":"https://avatars-next.observableusercontent.com/608473607665cc282deb36830ffc0c0456605281332fdcb460041f875772ba68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vertical Line Chart","cells":[{"id":0,"value":"# Vertical Line Chart\n\nThis is a vertical Line chart, A riff on the horizontal bar chart, which strangely enough is oriented in the same way :shrug:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"// example dataset, copy-pasted directly from spreadsheet\ndata = d3.tsvParse(\n `City\tSolar Insolation\tLatitude\nSaint Petersburg (59º 57'N)\t14.16\t59.9\nMoscow (55º 45' N)\t14.93\t55.75\nParis (48º 51' N)\t15.53\t48.9\nGeneva (46º 12' N)\t16.02\t46.1\nSan Francisco (37º 47' N)\t16.42\t37.75\nSrinagar (34º 05' N)\t16.74\t34\nWuhan (30º 35' N)\t17\t30.5\nMiami (25º 47' N)\t17.21\t25.75\nMumbai (18º 59' N)\t17.38\t18.99\nBangkok (13º 45' N)\t17.5\t13.75\nPanama City (8º 59' N)\t17.59\t8.99\nMale (4º 11' N)\t17.64\t4.1\nNairobi (1º 17' S)\t17.66\t-1.1\nJakarta (6º 12' S)\t17.74\t-6.1\nLima (12º 03' S)\t17.6\t-12.0\nCairns (16º 56' S)\t17.51\t-16.9\nPort Louis (20º 10' S)\t17.4\t-20.1\nCuritiba (25º 25' S)\t17.24\t-25.45\nPerth (31º 57' S)\t17.04\t-31.9\nBuenos Aires (34º 36' S)\t16.79\t-34.5\nHamilton (37º 47' S)\t16.47\t-37.75\nHobart (42º 53' S)\t16.09\t-42.9\nRio Gallegos (51º 38' S)\t15.62\t-51.51\nPuerta Tora (55º 05' S)\t15.03\t-55`,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"title = `Solar Energy Absorbed per square meter, mid-March`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1892,"value":"// this is where you specify the format to be used for the value labels. more info can be found here: https://github.com/d3/d3-format/blob/v3.1.0/README.md#format\nformatValue = (d) => {\n const f = d3.format(\"~s\");\n return f(d) + \" kw/h\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2034,"value":"## New version - done with plot","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2029,"value":"Plot.plot({\n marks: [\n Plot.line(data, {\n x: \"Solar Insolation\",\n y: \"Latitude\"\n }),\n Plot.dot(data, {\n x: \"Solar Insolation\",\n y: \"Latitude\",\n fill: \"black\"\n }),\n Plot.text(data, {\n x: \"Solar Insolation\",\n y: \"Latitude\",\n text: (d) => `${d[\"Solar Insolation\"]} kw/h`,\n textAnchor: \"start\",\n dx: 10\n })\n ],\n x: { axis: null },\n y: {\n ticks: data.map((d) => +d[\"Latitude\"]),\n tickFormat: (d, i) => data[i].City,\n tickSize: 0\n },\n marginLeft: 200,\n marginRight: 100,\n width: 400,\n height: 480\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"## Original - done with straight d3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1929,"value":"#### Once complete, click on the three dots to the left of the chart and select 'Download SVG'.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1831,"value":"metricAccessor = (d) => {\n return parseFloat(d[dataStructure.metricName]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"categoryAccessor = (d) => {\n return d[dataStructure.categoryName]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"// this is where you call out what columns should be used for metrics and categories in your chart.\ndataStructure = Object({\n metricName: data.columns[1],\n categoryName: data.columns[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"**Anything below this box is maintenance-related, and doesn't directly change the experience of the grouped Waffle Chart**\n\n(apart from maybe breaking it)\n____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"valueCalc = (n) => `${(n / 10000) * 494}`.substring(0, 4) // this converts the values in the data object to gigatons","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"dimensions = Object({\n height: 600,\n width: 300,\n marginLeft: 10,\n marginTop: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"detailLabelStyle = Object({\n \"font-weight\": 200,\n \"font-size\": \"16\",\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"summaryLabelStyle = Object({\n \"font-weight\": 200,\n \"font-family\": \"helvetica\",\n fill: \"#6F6F6F\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"titleStyle = Object({\n 'font-size':'31.25px',\n 'font-weight':400,\n 'font-family':'helvetica, sans-serif',\n 'fill':'#707070'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"import { styleString, textureArrays, colors } from \"@jasper/carbon-almanac-stylesheet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"{\n const defaultStyle = document.createElement(\"style\");\n defaultStyle.innerHTML = styleString;\n document.head.appendChild(defaultStyle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"