Skip to content

Instantly share code, notes, and snippets.

View biovisualize's full-sized avatar

Chris Viau biovisualize

147 followers · 0 following
View GitHub Profile
@biovisualize
biovisualize / Mapping JSON
Last active April 16, 2024 13:19
// If you have data like this
const dataExample = {
charts: [
{
id: "chart1",
something1: {
something2: 1
},
something3: {
histogram: [1, 2, 3]
@biovisualize
biovisualize / README.md
Last active April 12, 2023 12:15
direct svg to canvas to png conversion

It seems that Chrome finally found a way to let us convert from svg to canvas to png without the tainted canvas security feature/bug.

@biovisualize
biovisualize / index.html
Last active March 10, 2023 22:15
MapD3 chart update
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./mapd3.min.css">
<style>
.chart1 {
margin-top: 80px;
margin-left: 40px;
}
.mapd3 {
@biovisualize
biovisualize / index.html
Last active March 10, 2023 22:03
Générateur de noms de villages français
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body>
<div id="display"></div>
<script>
var start = ['peu', 'prou', 'fil', 'né', 'che', 'mir', 'tré',
'cor', 'fèri', 'mol', 'fente', 'chon', 'plume', 'mériè',
'mis', 'motte', 'saint-', 'bi', 'glu'];
@biovisualize
biovisualize / index.html
Last active March 10, 2023 22:00
top 10 airports network viz
<head>
<script src="//unpkg.com/force-graph"></script>
<style>
body {
margin: 0;
padding: 0;
background: #1e1e1e;
}
</style>
</head>
@biovisualize
biovisualize / index.html
Last active February 21, 2023 21:08
Fast pixel drawing on canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
</style>
</head>
@biovisualize
biovisualize / README.md
Last active August 25, 2022 02:04
Planet OS point API basic demo
@biovisualize
biovisualize / index.html
Created June 9, 2011 14:42
Simple D3 tooltip
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div class="example_div"></div>
<script type="text/javascript">
var tooltip = d3.select("body")
.append("div")
@biovisualize
biovisualize / README.md
Last active September 9, 2021 16:57
d3.selection.appendHTML and appendSVG

Parse and append an HTML or SVG string. I use it a lot for appending a template, instead of generating it with d3.

d3.select('.container').appendHTML('<div><svg><g><rect width="50" height="50" /></g></svg></div>');

Unlike using .html, .appendHTML can append multiple elements

d3.select('.container').html('<span id="a"></span>');
d3.select('.container').html('<span id="b"></span>'); // will replace content
d3.select('.container').appendHTML('<span id="c"></span>'); // will append content
@biovisualize
biovisualize / index.html
Last active July 13, 2021 22:53
Tooltip as a d3 helper
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="./tooltip.js"></script>
</head>
<body>
<div class="viz"></div>
<script type="text/javascript">