Skip to content

Instantly share code, notes, and snippets.

@lostintangent

lostintangent/README.md

Forked from michellechandra/README.md
Last active August 4, 2023 00:12
Show Gist options
  • Save lostintangent/cb8dcc8a5b34fa6e40309f2365377f3c to your computer and use it in GitHub Desktop.
Save lostintangent/cb8dcc8a5b34fa6e40309f2365377f3c to your computer and use it in GitHub Desktop.
Download ZIP
Basic US State Map - D3
Raw
README.md
Raw
cities-lived.csv
years place lat lon
2 New York City 40.71455 -74.007124
6 San Francisco 37.7771187 -122.4196396
8 Santa Cruz 36.9740181 -122.0309525
3 Santa Barbara 34.4193802 -119.6990509
10 Tucson 32.22155 -110.9697571
100 Washington DC 38.8903694 -77.0319595
Raw
editor.ts
import { pasteImageCommand } from "@abstractions/images/pasteImage";
import * as path from "path";
import { GistFile } from "src/store";
import {
commands,
env,
ExtensionContext,
ProgressLocation,
TextEditor,
Uri,
window,
workspace
} from "vscode";
import { EXTENSION_NAME } from "../constants";
import { listGists, newGist } from "../store/actions";
import { ensureAuthenticated } from "../store/auth";
import { GistFileNode } from "../tree/nodes";
import {
byteArrayToString,
fileNameToUri,
getGistDescription,
getGistLabel,
stringToByteArray
} from "../utils";
import { GistQuickPickItem } from "./gist";
async function askForFileName() {
return window.showInputBox({
prompt: "Enter a name to give to this file",
value: "foo.txt"
});
}
const CREATE_PUBLIC_GIST_ITEM = "$(gist-new) Create new Gist...";
const CREATE_SECRET_GIST_ITEM = "$(gist-private) Create new secret Gist...";
const CREATE_GIST_ITEMS = [
{ label: CREATE_PUBLIC_GIST_ITEM },
{ label: CREATE_SECRET_GIST_ITEM }
];
async function newGistWithFiles(isPublic: boolean, files: GistFile[]) {
const description = await window.showInputBox({
prompt: "Enter an optional description for the new Gist"
});
window.withProgress(
{ location: ProgressLocation.Notification, title: "Creating Gist..." },
() => {
return newGist(files, isPublic, description, false);
}
);
}
async function promptForGistSelection(files: GistFile[]) {
const gists = await listGists();
const gistItems = gists.map((gist) => {
return <GistQuickPickItem>{
label: getGistLabel(gist),
description: getGistDescription(gist),
id: gist.id
};
});
gistItems.push(...CREATE_GIST_ITEMS);
const list = window.createQuickPick();
list.placeholder = "Specify the gist you'd like to add the file(s) to";
list.items = gistItems;
list.onDidAccept(async () => {
const gist = <GistQuickPickItem>list.selectedItems[0];
list.hide();
if (gist.id) {
window.withProgress(
{ location: ProgressLocation.Notification, title: "Adding file(s)..." },
() =>
Promise.all(
files.map((file) =>
workspace.fs.writeFile(
fileNameToUri(gist.id!, file.filename!),
stringToByteArray(file.content!)
)
)
)
);
} else {
const isPublic = gist.label === CREATE_PUBLIC_GIST_ITEM;
newGistWithFiles(isPublic, files);
}
});
list.show();
}
export function registerEditorCommands(context: ExtensionContext) {
context.subscriptions.push(
commands.registerCommand(
`${EXTENSION_NAME}.addFileToGist`,
async (
targetNode: GistFileNode | Uri,
multiSelectNodes?: GistFileNode[] | Uri[]
) => {
await ensureAuthenticated();
const nodes =
multiSelectNodes && !("editorIndex" in multiSelectNodes)
? multiSelectNodes
: [targetNode];
const files = [];
for (const node of nodes) {
if (node instanceof GistFileNode) {
// The command is being called as a response to
// right-clicking a file node in the Gists tree
files.push({
filename: node.file.filename!,
content: byteArrayToString(
await workspace.fs.readFile(
fileNameToUri(node.gistId, node.file.filename!)
)
)
});
} else {
// The command is being called as a response to
// right-clicking a file node in the explorer
// and/or right-clicking the editor tab
files.push({
filename: path.basename(node.toString()),
content: byteArrayToString(await workspace.fs.readFile(node))
});
}
}
promptForGistSelection(files);
}
)
);
context.subscriptions.push(
commands.registerTextEditorCommand(
`${EXTENSION_NAME}.addSelectionToGist`,
async (editor: TextEditor) => {
await ensureAuthenticated();
const filename = await askForFileName();
if (!filename) {
return;
}
const content = await editor.document.getText(editor.selection);
promptForGistSelection([{ filename, content }]);
}
)
);
context.subscriptions.push(
commands.registerTextEditorCommand(
`${EXTENSION_NAME}.pasteGistFile`,
async (editor: TextEditor) => {
await ensureAuthenticated();
const gists = await listGists();
const gistItems = gists.map((gist) => ({
label: getGistLabel(gist),
description: getGistDescription(gist),
id: gist.id
}));
const selectedGist = await window.showQuickPick(gistItems, {
placeHolder: "Select the Gist you'd like to paste a file from"
});
if (!selectedGist) {
return;
}
const gist = gists.find((gist) => gist.id === selectedGist!.id);
const fileItems = Object.keys(gist!.files);
let selectedFile: string | undefined;
if (fileItems.length === 1) {
selectedFile = fileItems[0];
} else {
selectedFile = await window.showQuickPick(fileItems, {
placeHolder: "Select the file to paste from"
});
if (!selectedFile) {
return;
}
}
// TODO: Add support for pasting binary files
// (or at least prevent it)
const uri = fileNameToUri(gist!.id, selectedFile);
const contents = byteArrayToString(await workspace.fs.readFile(uri));
await env.clipboard.writeText(contents);
await commands.executeCommand("editor.action.clipboardPasteAction");
}
)
);
context.subscriptions.push(
commands.registerTextEditorCommand(
`${EXTENSION_NAME}.pasteImage`,
pasteImageCommand
)
);
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
/* On mouse hover, lighten state color */
path:hover {
fill-opacity: .8;
}
/* Style for Custom Tooltip */
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
/* Legend Font Style */
body {
font: 11px sans-serif;
}
/* Legend Position Style */
.legend {
position: absolute;
left: 800px;
top: 350px;
}
</style>
</head>
<body>
<script type="text/javascript">
/* This visualization was made possible by modifying code provided by:
Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html
Malcolm Maclean, tooltips example tutorial
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
Mike Bostock, Pie Chart Legend
http://bl.ocks.org/mbostock/3888852 */
//Width and height of map
var width = 960;
var height = 500;
// D3 Projection
var projection = d3.geo.albersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
// Define linear scale for output
var color = d3.scale.linear()
.range(["rgb(213,222,217)", "rgb(69,173,168)", "rgb(84,36,55)", "rgb(217,91,67)"]);
var legendText = ["Cities Lived", "States Lived", "States Visited", "Nada"];
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Append Div for tooltip to SVG
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Load in my states data!
d3.csv("stateslived.csv", function (data) {
color.domain([0, 1, 2, 3]); // setting the range of the input data
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function (json) {
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
// Grab State Name
var dataState = data[i].state;
// Grab data value
var dataValue = data[i].visited;
// Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
// Copy the data value into the JSON
json.features[j].properties.visited = dataValue;
// Stop looking through the JSON
break;
}
}
}
// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function (d) {
// Get data value
var value = d.properties.visited;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "rgb(213,222,217)";
}
});
// Map the cities I have lived in!
d3.csv("cities-lived.csv", function (data) {
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function (d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", function (d) {
return Math.sqrt(d.years) * 4;
})
.style("fill", "rgb(217,91,67)")
.style("opacity", 0.85)
// Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks"
// http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
.on("mouseover", function (d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.text(d.place)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
// fade out tooltip on mouse out
.on("mouseout", function (d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
});
// Modified Legend Code from Mike Bostock: http://bl.ocks.org/mbostock/3888852
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.attr("width", 140)
.attr("height", 200)
.selectAll("g")
.data(color.domain().slice().reverse())
.enter()
.append("g")
.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.data(legendText)
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function (d) { return d; });
});
});
</script>
</body>
</html>
Raw
stateslived.csv
state visited
Alabama 0
Alaska 0
Arkansas 0
Arizona 2
California 2
Colorado 1
Connecticut 1
Delaware 0
Florida 1
Georgia 0
Hawaii 0
Iowa 0
Idaho 1
Illinois 1
Indiana 0
Kansas 0
Kentucky 0
Louisiana 0
Maine 1
Maryland 1
Massachusetts 1
Michigan 0
Minnesota 1
Missouri 0
Mississippi 0
Montana 1
North Carolina 0
North Dakota 0
Nebraska 0
New Hampshire 1
New Jersey 0
New Mexico 1
Nevada 1
New York 2
Ohio 1
Oklahoma 0
Oregon 1
Pennsylvania 1
Rhode Island 1
South Carolina 0
South Dakota 0
Tennessee 0
Texas 0
Utah 1
Virginia 0
Vermont 0
Washington 1
Wisconsin 0
West Virginia 0
Wyoming 1
Display the source blob
Display the rendered blob
Raw
us-states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment