sleyus

@sleyus·9 public vizzes

Kids Shape and Color App

This interactive app lets a child choose a color, size, and shape from three side panels to customize a central display mark. Built with d3 v5, it uses an SVG canvas and event handlers (`onClick`) to update the state. The shape panel uses d3’s `symbol` factory to render circle, square, and triangle paths, while the color and size panels present clickable circles.

Nov 8, 2019

Loading thumbnail…

Multiple Instances

Two linked line charts visualize water level readings over time for two well locations. The upper chart displays the full dataset, while the lower chart contains a brushable axis. Dragging the brush updates the upper chart’s x-axis domain to the selected time range, filtering both charts to that interval. The visualization uses d3.csv, d3.scaleTime, d3.scaleLinear, and d3.brushX to manage data loading, scaling, and interactive selection, rendering paths and circles as SVG elements.

Nov 8, 2019

Loading thumbnail…

Temperature in Different Cities

Small multiples of area charts show hourly temperature readings for one week across seven cities, using Vega-Lite’s `row` facet with a nominal color encoding that is intentionally meaningless. The visualization embeds Vega-Lite 2.0 and d3.v4, with a Vega spec generated dynamically from CSV data of the Sense Your City project. It highlights how color and area under the curve fail to support comparison, as the charts are difficult to read against each other, and resizes responsively via `window.addEventListener('resize', render)`.

Nov 8, 2019

Loading thumbnail…

P5.js Example

This example renders a set of concentric circular targets that overlap across the canvas. Each target consists of a series of filled ellipses with decreasing size, where the fill color shifts from dark to light based on the number of rings. It uses the P5.js library, specifically the `createCanvas`, `background`, `noStroke`, `noLoop`, `fill`, and `ellipse` APIs. The drawing logic is split into a `setup` function that initializes the canvas and a `draw` function that calls a custom `drawTarget` routine four times with different positions, sizes, and ring counts, producing the visual composition.

Nov 8, 2019

Loading thumbnail…

Sized Points on a Map

This example uses a geographic map to visualize the populations of cities worldwide. The visualization shows cities as sized points on a world map. A square-root scale maps a city's population to the radius of its corresponding circle. The visualization is rendered using SVG and the React framework. The code uses d3's `geoNaturalEarth1` projection, `geoPath`, `geoGraticule`, and `scaleSqrt`. The underlying geo data comes from the World Atlas TopoJSON, and city data comes from a CSV file.

Nov 8, 2019

Loading thumbnail…

Map with Selectable Countries

This map visualizes global countries colored by economic group, with clicking a country highlighting it while dimming others and the map sphere. A color legend allows filtering countries by economic category, and hovering shows country names. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for choropleth coloring. Data comes from World Atlas TopoJSON and TSV files, loaded via d3.json and d3.tsv.

Nov 8, 2019

Loading thumbnail…

Rendering Data with React & D3

This example renders a radial burst visualization of CSS named colors using React for SVG generation and D3 utilities for data loading and arc computation. It loads color data via `d3.csv`, then uses `d3.pie` and `d3.arc` to create equal-width slices, each filled with its corresponding hex value from the dataset. React’s `useState` and `useEffect` manage asynchronous data fetching, displaying a loading state until the CSV arrives. The final output is a circular color wheel centered on an SVG canvas.

Nov 8, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings (in degrees Celsius) from cities worldwide, sourced from Data Canvas - Sense Your City data. The chart plots each city as a separate colored line, using a smooth curve (curveBasis) to connect temperature measurements over time. The visualization is rendered as an SVG using d3.v5, leveraging scales and axes from `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom`. The code nests data by city with `nest()`, assigns categorical colors via `scaleOrdinal(schemeCategory10)`, and includes a custom color legend built through the `colorLegend` function.

Nov 7, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal VizHub project that displays the make of the first car from a static JSON dataset. It uses D3 v5 for data handling and DOM manipulation, importing a parsed array of car records from a separate ES6 module via `export` and `import`. The code targets a `<pre>` element in the HTML and sets its text content to "Honda" using `document.getElementById`. The project shows how to structure modular code with external data and a simple rendering update.

Sep 10, 2019