C

charliemok

@charliemok·20 public vizzes

Loading thumbnail…

Untitled

This interactive map displays a collection of settlement points across Europe and North Africa, rendered using Leaflet with tile layers from CartoDB. The visualization separates data into two categories: modern settlements and historical settlements, each represented by distinct markers using the Leaflet.AwesomeMarkers plugin with Font Awesome icons. Users can filter between categories using Bootstrap-styled buttons that toggle layer visibility through jQuery. The GeoJSON data is loaded via jQuery’s `$.getJSON` method, and the map automatically fits its bounds to all plotted locations.

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the relationship between petal length and sepal width in the Iris dataset. The code uses React to render an SVG with D3's `scaleLinear` for axes and data scaling, along with custom `AxisBottom` and `AxisLeft` components to generate ticks. The `Marks` component creates circles with a tooltip title for each data point. Axis labels are styled with the Poppins font, and data loading is handled by D3's `csv` function.

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph represents the network of connections among the Kenneth Rainin Foundation's grantees. It shows four main organizational nodes — such as Arts Web and AmbitioUS — each with child nodes and many small leaf nodes, linked by colored lines. The visualization uses d3.forceSimulation with forceManyBody and forceLink, rendering SVG circles and text. Node positions update on each tick, and drag interaction lets users reposition nodes. Data is defined in data.js with color palettes from colors.js.

Loading thumbnail…

Untitled

This interactive map displays three local businesses in Ithaca, New York, with custom icons and popups that appear on hover. Users can filter the displayed points by category—All, Cafes, or Others—using Bootstrap-styled buttons. The visualization is built with Leaflet for map rendering and GeoJSON data from `businesses.json`, with Font Awesome icons via Leaflet.awesome-markers to distinguish cafes from other business types.

Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This map demonstrates interactive pan and zoom on a Natural Earth projection of the world, with country boundaries rendered as SVG paths and tooltips showing country names on hover. The visualization loads world-atlas TopoJSON data and a TSV file mapping ISO country codes to names, then draws countries using `d3.geoPath` with a `geoNaturalEarth1` projection. The zoom behavior is implemented via `d3.zoom`, which applies a transform to the SVG group, while hover styling changes country fill to red.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down in a loop. The demo shows how D3.js v5 selects and appends DOM elements, using `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the eyebrow group. A static yellow circle with black stroke forms the head, while black circles and rectangles compose the eyes and brows. The code relies on data-free hardcoded coordinates rather than a dataset.

Loading thumbnail…

Untitled

This example shows a small directed graph with four nodes and two weighted links rendered as an SVG. Nodes are labeled with their names from a JSON file, and link stroke width encodes the weight value. The visualization uses the D3.js v2 force-directed layout API, `d3.layout.force`, to position nodes, with link coordinates updated on each simulation tick. Node dragging is enabled via the `force.drag` call.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimalist web page that displays the text “Hello HTML” in large, centered type using CSS styling. The page loads a single HTML file containing inline styles and a script tag that logs “Hello JavaScript!” to the browser’s developer console. It uses plain HTML, CSS, and JavaScript without any external libraries or frameworks, serving as a basic starting point for projects. The rendering approach relies on default browser behavior for text display, with the console providing a simple output mechanism for the script’s execution.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit visualizes the general update pattern with special cases. It shows apples and lemons as colored circles in a fixed bowl, with each fruit's type label beneath it. The code uses D3 v5's `scaleOrdinal` for color and radius scales, then applies the update pattern via `selection.selectAll` and `.merge` to handle entering, updating, and exiting elements. SVG rendering positions fruits horizontally, with a static rect forming the bowl.

Loading thumbnail…

World Population By Year 2015

This visualization displays global population trends from 1950 to 2015 using an area chart with a smooth curve. The SVG rendering relies on D3 v5 functions including `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft`. Population values are formatted with abbreviations (e.g., "B" for billions) using D3's `format` function. The data comes from a CSV file loaded via D3's `csv` method, and the chart includes labeled axes and a title.

Loading thumbnail…

Car Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each red, semi-transparent circle represents a car, positioned according to its values on these two continuous axes. The visualization is built with D3 v5, using `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and SVG circles rendered on a 960x500 canvas. The code parses the CSV data, converts numeric fields, and applies styling from an external CSS file.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to customize axis ticks, formats, and grid lines. Population values are formatted in abbreviated units (e.g., billions) via `d3.format`. The SVG rendering highlights styling of tick labels, axis labels, and the chart title.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, featuring a linear scale for population values and a band scale for country names. The code demonstrates custom axis configuration through `axisLeft` for the categorical country labels and `axisBottom` for the quantitative population scale, with data loaded from a CSV file using D3’s `csv` method.

Loading thumbnail…

Fork of Fork of Responding to Resize

This example demonstrates a simple responsive chart that dynamically adjusts an SVG to fill the browser viewport. It first extracts the client width and height from its container, then sets the SVG’s `width` and `height` attributes accordingly, and redraws two green diagonal lines to verify the resizing behavior. The visualization uses D3.js v5 to create and update the SVG elements, leveraging a listener for the window’s `resize` event to trigger the redraw. The code relies on the `d3.select` API to bind the chart container and `attr` to update the SVG dimensions.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example creates a yellow smiley face with circular eyes, rectangular eyebrows, and an arc-shaped mouth centered within an SVG canvas. D3.js selections append SVG shapes and apply a two-second `transition` that moves the eyebrow group upward by 50 pixels and then back down, producing a repetitive animation. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition.attr` calls to alter the `transform` attribute, demonstrating fundamental DOM manipulation with version 5 of the library.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an interactive smiley face using D3.js v5, starting with a red SVG background and progressively adding facial features. The code uses d3.select to manipulate the SVG canvas, setting the background color and preparing the structure for additional elements. Though the primary implementation is incomplete, the accompanying README and video tutorial show how to create moving eyebrows through DOM manipulation with D3's data-binding and selection methods. The example is rendered entirely as inline SVG elements within a 960x500 viewport.

Loading thumbnail…

Shapes and Colors with SVG and CSS

Four SVG shapes—two circles and two rectangles—demonstrate presentational attributes and CSS styling. The first pair uses default black fill, while the second pair applies inline `fill` colors. A `<g>` group with `transform`, `fill`, `stroke`, and `stroke-width` attributes applies shared styling to both a circle and rectangle, showing inheritance and grouping in SVG. The example uses no JavaScript libraries, relying purely on SVG markup and external CSS from `styles.css`. The `styles.css` file defines global body margins but contains unused `.lines` rules, leaving shape styling entirely attribute-driven.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a polyline path—stylized with CSS classes and inline attributes. The scene uses a transformed group to scale the entire drawing, while a nested translation positions a second group of shapes. Colors vary between explicit fills like red and green, and a shared fill applied via a group attribute, with stroke properties defined in styles.css for black lines and a custom line join. The page relies solely on native SVG markup and CSS, with no JavaScript libraries involved.