L

latifiss

@latifiss·22 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country as a stacked bar chart, showing the population distribution for each country. The chart uses a bar mark for each country, with the x-axis ordered by total population and color encoding for religion, while tooltips display the exact population values. It loads CSV data from a GitHub Gist and renders via Vega-Lite, using the Vega-Lite API to construct the specification, with D3.js fetching the data and Vega-Tooltip providing interactive hover details. The visualization is configured to fit the browser window and includes custom axis and label styling for readability.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to combine React with D3.js for data loading and display. It fetches a CSV file of CSS named colors from a GitHub Gist, then renders a text summary showing the data size, row count, and column count. The visualization uses React’s `useEffect` hook to trigger the D3 `csv` fetch and stores the result in state via `useState`. D3’s `csvFormat` utility calculates the data size, while React manages the UI updates from a loading message to the final result, showcasing the integration of declarative React components with D3’s data processing functions.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads CSS named colors from a CSV file and displays a summary of the dataset’s size, row count, and column count. It uses both the `d3.csv` and `d3.csvFormat` methods to parse and measure the data, while also demonstrating an alternative approach with the Fetch API and async/await to retrieve raw text. The visualization outputs the statistics as plain text in a large HTML `<pre>` element, highlighting different ways to load and parse tabular data.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS Named Colors from a remote URL, then summarizes the dataset by displaying its size in kilobytes, row count, and column count. The visualization uses React as the framework and D3 version 5 to fetch the data via the `fetch` API, parse it with `d3.csv`, and format the summary using `d3.csvFormat`. The rendered output is plain text presented in a large-font `<pre>` element, showcasing the data loading workflow without additional charting.

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a single SVG graphic containing a red rectangle, a yellow circle, and the text "SVG" centered within a 500px square. The code embeds these shapes directly in an HTML page using inline SVG elements with explicit pixel dimensions and fill colors. The page centers the SVG vertically and horizontally using flexbox through the global style attribute. No JavaScript or external libraries are used; the visualization relies solely on static SVG markup.

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face begins as a yellow circle with a black stroke, featuring two smaller black circles for eyes positioned symmetrically around the center. The code directly renders static shapes using SVG elements—`circle` tags for the head and eyes—within an HTML page that hides overflow. This initial step toward a smiley face uses no JavaScript libraries, relying solely on hardcoded pixel coordinates and fixed dimensions of 960 by 500. The result is a minimal, non-interactive illustration in the browser.

Loading thumbnail…

Fork of Working with Time

This is a fork of a D3.js line chart that visualizes temperature measurements over time, depicting a week of San Francisco weather data from the Data Canvas Sense Your City dataset. The visualization uses a time-scaled x-axis and a linear y-axis for temperature. The chart is built with React and uses D3's `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to create a smooth path, rendered as SVG.

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the top 10 most populous countries using a scatter plot, with population on the x-axis and sepal length on the y-axis, despite the mismatch with the data source. The chart displays circular marks for each country, with tooltips showing the population value formatted in billions. Built with React and D3 v5, it uses `csv` to load data from a URL, `scaleLinear` for scaling, and renders SVG elements through React components like `AxisBottom`, `AxisLeft`, and `Marks`. The code also includes a video embed from YouTube.

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart renders the top 10 most populous countries as rectangles with no axes, using React and D3 v5. The chart shows population values for 2020 from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The code uses `d3.scaleBand` for the y-axis country labels, `d3.scaleLinear` for the horizontal bar lengths, and renders the SVG output through ReactDOM, with a left margin for country names.

Loading thumbnail…

Fork of Working with Time

This fork visualizes a week of San Francisco temperature readings from the Data Canvas Sense Your City Dataset as a scatter plot. Time runs along the horizontal axis with temperature on the vertical axis, rendered as SVG circles using React components. The code employs d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.extent for domain calculation. Native SVG title elements provide hover tooltips, while custom AxisBottom and AxisLeft React components generate the tick marks and labels.

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset, plotting petal length against sepal width using a stylized scatter plot. The code builds a React-based SVG visualization with axes generated by custom AxisBottom and AxisLeft components, while a Marks component renders the data points as circles with tooltips. D3.js v5 functions like scaleLinear and extent handle the quantitative scales, with csv loading data from a remote GitHub gist. The minimal design uses Poppins typography and specific teal coloring for the marks.

Loading thumbnail…

Fork of Axes with React & D3

This bar chart displays the top 10 most populous countries by 2020 population, using horizontal bars sorted descending. The visualization is built with React components for rendering SVG marks and axes, while D3.js (v5) computes scales, ticks, and number formatting via `scaleBand`, `scaleLinear`, and `format`. Data comes from the UN World Population Prospects 2019 CSV. The chart features custom axis components, tick labels formatted with "B" for billions, and tooltips via SVG `<title>` elements.

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries as a set of bare, axis-free rectangles using SVG. Built with React and D3 v5, it loads United Nations 2019 population data via `d3.csv`, sorts by the 2020 estimate, and uses `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar lengths. The minimal styling intentionally omits axes, labels, and other chart furniture, leaving only colored bars whose widths encode population values.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented as a wedge in a pie chart. The code loads color data from a CSV file using D3’s `csv` utility, then renders the wedges as SVG paths with React. It uses D3’s `pie` and `arc` generators to compute the angles and shapes, and each path is filled with the color’s RGB hex value from the dataset.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a series of horizontal bars with no axes or labels, using a deliberately minimal design. The bars are rendered as SVG rectangles whose widths encode each country’s 2020 population, sorted from largest to smallest. The code loads CSV data from the United Nations World Population Prospects 2019 via D3’s `csv` function, then uses `scaleBand` for the y-axis positions and `scaleLinear` for bar widths. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while the bars are mapped directly from the fetched array.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented as a wedge in a pie chart. The code loads color data from a CSV file using D3’s `csv` utility, then renders the wedges as SVG paths with React. It uses D3’s `pie` and `arc` generators to compute the angles and shapes, and each path is filled with the color’s RGB hex value from the dataset.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to combine React with D3.js for data loading and display. It fetches a CSV file of CSS named colors from a GitHub Gist, then renders a text summary showing the data size, row count, and column count. The visualization uses React’s `useEffect` hook to trigger the D3 `csv` fetch and stores the result in state via `useState`. D3’s `csvFormat` utility calculates the data size, while React manages the UI updates from a loading message to the final result, showcasing the integration of declarative React components with D3’s data processing functions.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file containing CSS named colors. The visualization displays three numeric statistics in a large text format: the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code primarily uses d3.csv from d3.v5 to fetch and parse the remote CSV, then formats the result with d3.csvFormat. It also includes commented-out alternatives using the Fetch API with async/await and a nested-promise approach for comparison.

Loading thumbnail…

Mouse Follower

A small circle tracks the mouse cursor in real time across a fixed 960 by 500 SVG canvas. The visualization demonstrates how React state manages interactive updates: each mousemove event on the SVG element updates the mouse position, which is then used to set the circle’s cx and cy attributes. It uses React’s useState and useCallback hooks to handle state and event logic, with the circle’s initial position at the canvas center.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying the raw text output in the browser console. It fetches the data from a GitHub gist using the Fetch API, with multiple approaches shown: async/await and promise chains. The visualization uses the D3.js v5 library and is built within a React framework, though the core interaction is simply logging the fetched CSV text to the console. The page renders a large empty <pre> element with styling, serving as a placeholder for the message container.

Loading thumbnail…

Smiley Face Part III

A grid of eighteen randomly generated smiley faces fills the screen, each rendered as a yellow SVG circle with black stroke. React components compose each face from reusable parts—background circle, eyes, and mouth—while the D3 `arc` API draws the curved mouth. Randomization varies stroke width, eye offset, eye radius, and mouth dimensions for each face, producing a playful, varied collection. The code uses React with D3 v5 for arc generation and SVG rendering.