Kams2015

@Kams2015·9 public vizzes

Horizon chart

This visualization presents a multi-series bar chart of personnel hours (JH) by team, task, and degree level, using data from a CSV file with team, degree, task, and JH columns. The view shows three teams (A, B, C) across three tasks (IT, Livraison, RH) and three degree levels (0, 1, 2). The chart encodes each degree value as a scaled circle positioned at the center of its corresponding cell, with radius proportional to the JH value and fill color varying by degree level using a green color scheme. It uses D3.js (v5) to load the CSV, nest data by team and task, and render the SVG with band scales for both x and y axes.

Jul 15, 2020

Loading thumbnail…

Horizon chart

This visualization displays traffic data over time using a horizon chart, where each band represents a different location and the area encodes the hourly visitor count. The chart compresses the y-axis by layering positive values into colored bands, making it easy to compare patterns across multiple series. Built with D3 v5, it uses d3.nest to group the CSV data, scaleLinear for the y-axis, and an area generator with curveBasis for smooth lines. The data comes from traffic.csv, and the rendering is done with SVG.

Jul 15, 2020

Loading thumbnail…

Horizon chart

This horizon chart displays multiple time-series datasets stacked vertically, each showing traffic values over time for different locations. The visualization loads data from a CSV file using d3.csv and processes it with d3.nest to group series by name and parse dates. The implementation uses d3.scaleLinear for the y-axis and prepares an d3.area generator for rendering, though the final SVG output is currently incomplete, showing only placeholder circles instead of the intended area paths.

Jul 15, 2020

Loading thumbnail…

Temperature in SF Line Chart with D3.js!

This area chart visualizes one week of San Francisco temperatures in degrees Celsius, with time on the x-axis and temperature on the y-axis. The chart uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft`, rendered as SVG with a maroon-filled path using `curveBasis`. Axis labels and a title are added via SVG text elements. Data comes from the Data Canvas - Sense Your City project, loaded as CSV and parsed with timestamps and numeric temperatures.

Jul 13, 2020

Loading thumbnail…

Bar chart

A horizontal bar chart displays Olympic medal counts for ten countries, sourced from data.csv. Using the React framework and D3 v5, the visualization maps medal counts to bar widths via a linear scale and country names to vertical positions via a band scale. The SVG rendering includes axes created with axisLeft and axisBottom, with bars styled as rect elements. Data is loaded and parsed asynchronously with csv, converting medalCount values to numbers for quantitative scaling.

Jul 13, 2020

Loading thumbnail…

Créer une belle page html

This example displays the results of the August 2020 municipal elections in France’s ten largest cities, listing each winner in an ordered list with a prominent title and styled links. The page is built with a mix of static HTML and CSS, while React 16.10.0 is loaded via UMD scripts and used in `index.js` to render a separate “Hello React!” message as the root element. The code includes internal and external hyperlinks, using CSS selectors like `#bigTitle` and `#lienAutrePage` to style the header and a link to Le Monde’s election results.

Jul 6, 2020

Loading thumbnail…

First test with D3.js

This example draws a simple cartoon face and body on an SVG canvas using D3.js v5 within a React framework. The code creates circles, rectangles, and an arc path to form the character’s head, nose, eyes, mouth, and torso, applying a sky-blue background and blue strokes. It also generates 50 randomly placed white circles to simulate background particles. The implementation uses direct SVG element manipulation via D3’s selection and append methods, along with a `d3.arc` generator for the mouth shape.

Jul 6, 2020

Loading thumbnail…

Image with SVG and CSS

A playful face is drawn directly in SVG, combining primitive shapes like circles, rectangles, a line, and a path to form a snowman-like character. The image is styled with CSS, which sets the background color, adds a red nose, and positions a snowball via a transform. The visualization uses React for the component structure, though the drawing itself relies on raw SVG elements and CSS rules for styling, with no JavaScript interaction or data binding.

Jul 6, 2020

Loading thumbnail…

React Starter

This example displays a list of filtered first names from a JSON dataset, showing only those with a feminine gender marker after a simulated data-loading delay. It uses React 16.10, loaded via UMD scripts, alongside a custom asynchronous `getPrénoms` function that returns a Promise. The code manipulates the DOM directly with `document.getElementById` and `textContent` rather than React rendering, and relies on `Array.filter` and `Array.map` to extract and format the name and origin fields.

Jul 4, 2020